diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index e05be34cfc0b8..f261c3d29c020 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -46,6 +46,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             onMouseLeave={[Function]}
             style={
               Object {
+                "backgroundColor": "#f00",
                 "color": "#f00",
               }
             }
@@ -53,6 +54,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
           />
           <svg
             aria-hidden="true"
+            fill="#000000"
             focusable="false"
             height={24}
             role="img"
diff --git a/packages/components/src/circular-option-picker/index.js b/packages/components/src/circular-option-picker/index.js
index b8878ad32633a..7e4faa6ccf27c 100644
--- a/packages/components/src/circular-option-picker/index.js
+++ b/packages/components/src/circular-option-picker/index.js
@@ -15,7 +15,13 @@ import Button from '../button';
 import Dropdown from '../dropdown';
 import Tooltip from '../tooltip';
 
-function Option( { className, isSelected, tooltipText, ...additionalProps } ) {
+function Option( {
+	className,
+	isSelected,
+	selectedIconProps,
+	tooltipText,
+	...additionalProps
+} ) {
 	const optionButton = (
 		<Button
 			isPressed={ isSelected }
@@ -33,7 +39,12 @@ function Option( { className, isSelected, tooltipText, ...additionalProps } ) {
 			) : (
 				optionButton
 			) }
-			{ isSelected && <Icon icon={ check } /> }
+			{ isSelected && (
+				<Icon
+					icon={ check }
+					{ ...( selectedIconProps ? selectedIconProps : {} ) }
+				/>
+			) }
 		</div>
 	);
 }
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index a76a852559f7b..a754ff2e0d8a6 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -71,6 +71,7 @@ $color-palette-circle-spacing: 12px;
 		box-shadow: inset 0 0 0 4px;
 		position: relative;
 		z-index: z-index(".components-circular-option-picker__option.is-pressed");
+		overflow: visible;
 
 		& + svg {
 			position: absolute;
@@ -78,7 +79,6 @@ $color-palette-circle-spacing: 12px;
 			top: 2px;
 			border-radius: 50%;
 			z-index: z-index(".components-circular-option-picker__option.is-pressed + svg");
-			background: $white;
 			pointer-events: none;
 		}
 	}
diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
index 0a3d1f0ad1748..fae8fc900d46e 100644
--- a/packages/components/src/color-palette/index.js
+++ b/packages/components/src/color-palette/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { map } from 'lodash';
+import tinycolor from 'tinycolor2';
 
 /**
  * WordPress dependencies
@@ -29,12 +30,21 @@ export default function ColorPalette( {
 			<CircularOptionPicker.Option
 				key={ color }
 				isSelected={ value === color }
+				selectedIconProps={
+					value === color
+						? {
+								fill: tinycolor
+									.mostReadable( color, [ '#000', '#fff' ] )
+									.toHexString(),
+						  }
+						: {}
+				}
 				tooltipText={
 					name ||
 					// translators: %s: color hex code e.g: "#f00".
 					sprintf( __( 'Color code: %s' ), color )
 				}
-				style={ { color } }
+				style={ { backgroundColor: color, color } }
 				onClick={
 					value === color ? clearColor : () => onChange( color )
 				}
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index 15d8de9fe8549..633d44bf2eb86 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -145,8 +145,14 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
         aria-label="Color: red"
         isSelected={true}
         onClick={[Function]}
+        selectedIconProps={
+          Object {
+            "fill": "#000000",
+          }
+        }
         style={
           Object {
+            "backgroundColor": "#f00",
             "color": "#f00",
           }
         }
@@ -156,8 +162,10 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
         aria-label="Color: white"
         isSelected={false}
         onClick={[Function]}
+        selectedIconProps={Object {}}
         style={
           Object {
+            "backgroundColor": "#fff",
             "color": "#fff",
           }
         }
@@ -167,8 +175,10 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
         aria-label="Color: blue"
         isSelected={false}
         onClick={[Function]}
+        selectedIconProps={Object {}}
         style={
           Object {
+            "backgroundColor": "#00f",
             "color": "#00f",
           }
         }
@@ -230,8 +240,14 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           aria-label="Color: red"
           isSelected={true}
           onClick={[Function]}
+          selectedIconProps={
+            Object {
+              "fill": "#000000",
+            }
+          }
           style={
             Object {
+              "backgroundColor": "#f00",
               "color": "#f00",
             }
           }
@@ -241,8 +257,10 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           aria-label="Color: white"
           isSelected={false}
           onClick={[Function]}
+          selectedIconProps={Object {}}
           style={
             Object {
+              "backgroundColor": "#fff",
               "color": "#fff",
             }
           }
@@ -252,8 +270,10 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           aria-label="Color: blue"
           isSelected={false}
           onClick={[Function]}
+          selectedIconProps={Object {}}
           style={
             Object {
+              "backgroundColor": "#00f",
               "color": "#00f",
             }
           }
@@ -270,8 +290,14 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         isSelected={true}
         key="#f00"
         onClick={[Function]}
+        selectedIconProps={
+          Object {
+            "fill": "#000000",
+          }
+        }
         style={
           Object {
+            "backgroundColor": "#f00",
             "color": "#f00",
           }
         }
@@ -295,6 +321,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
               onMouseLeave={[Function]}
               style={
                 Object {
+                  "backgroundColor": "#f00",
                   "color": "#f00",
                 }
               }
@@ -311,6 +338,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 onMouseLeave={[Function]}
                 style={
                   Object {
+                    "backgroundColor": "#f00",
                     "color": "#f00",
                   }
                 }
@@ -319,6 +347,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             </ForwardRef(Button)>
           </Tooltip>
           <Icon
+            fill="#000000"
             icon={
               <SVG
                 viewBox="-2 -2 24 24"
@@ -331,6 +360,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             }
           >
             <SVG
+              fill="#000000"
               height={24}
               viewBox="-2 -2 24 24"
               width={24}
@@ -338,6 +368,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             >
               <svg
                 aria-hidden="true"
+                fill="#000000"
                 focusable="false"
                 height={24}
                 role="img"
@@ -362,8 +393,10 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         isSelected={false}
         key="#fff"
         onClick={[Function]}
+        selectedIconProps={Object {}}
         style={
           Object {
+            "backgroundColor": "#fff",
             "color": "#fff",
           }
         }
@@ -387,6 +420,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
               onMouseLeave={[Function]}
               style={
                 Object {
+                  "backgroundColor": "#fff",
                   "color": "#fff",
                 }
               }
@@ -403,6 +437,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 onMouseLeave={[Function]}
                 style={
                   Object {
+                    "backgroundColor": "#fff",
                     "color": "#fff",
                   }
                 }
@@ -417,8 +452,10 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         isSelected={false}
         key="#00f"
         onClick={[Function]}
+        selectedIconProps={Object {}}
         style={
           Object {
+            "backgroundColor": "#00f",
             "color": "#00f",
           }
         }
@@ -442,6 +479,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
               onMouseLeave={[Function]}
               style={
                 Object {
+                  "backgroundColor": "#00f",
                   "color": "#00f",
                 }
               }
@@ -458,6 +496,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                 onMouseLeave={[Function]}
                 style={
                   Object {
+                    "backgroundColor": "#00f",
                     "color": "#00f",
                   }
                 }
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index a7853ec0e2a39..2a5eb8fd0aab1 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/storybook/test/__snapshots__/index.js.snap
@@ -1963,6 +1963,7 @@ exports[`Storyshots Components/ColorPalette Default 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
+          "backgroundColor": "#f00",
           "color": "#f00",
         }
       }
@@ -1984,6 +1985,7 @@ exports[`Storyshots Components/ColorPalette Default 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
+          "backgroundColor": "#fff",
           "color": "#fff",
         }
       }
@@ -2005,6 +2007,7 @@ exports[`Storyshots Components/ColorPalette Default 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
+          "backgroundColor": "#00f",
           "color": "#00f",
         }
       }
@@ -2057,6 +2060,7 @@ exports[`Storyshots Components/ColorPalette With Knobs 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
+          "backgroundColor": "#f00",
           "color": "#f00",
         }
       }
@@ -2078,6 +2082,7 @@ exports[`Storyshots Components/ColorPalette With Knobs 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
+          "backgroundColor": "#fff",
           "color": "#fff",
         }
       }
@@ -2099,6 +2104,7 @@ exports[`Storyshots Components/ColorPalette With Knobs 1`] = `
       onMouseLeave={[Function]}
       style={
         Object {
+          "backgroundColor": "#00f",
           "color": "#00f",
         }
       }