diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index b866dcd7425b..7bf50d6f4970 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -81,6 +81,7 @@ const SwatchColors = styled.div(({ theme }) => ({
   overflow: 'hidden',
   backgroundColor: 'white',
   backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
+  backgroundClip: 'padding-box'
 }));
 
 const SwatchSpecimen = styled.div({