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 edfd553100317..6052c2ad71567 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
@@ -32,13 +32,38 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 }
 
 .emotion-4>*+*:not( marquee ) {
-  margin-top: calc(4px * 2);
+  margin-top: calc(4px * 1);
 }
 
 .emotion-4>* {
   min-height: 0;
 }
 
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-6>*+*:not( marquee ) {
+  margin-top: calc(4px * 3);
+}
+
+.emotion-6>* {
+  min-height: 0;
+}
+
 <div
   className="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
 >
@@ -59,89 +84,89 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
               className="components-base-control__label"
             >
               Test Color
-              <span
-                aria-label="(Color: #f00)"
-                className="component-color-indicator"
-                style={
-                  Object {
-                    "background": "#f00",
-                  }
-                }
-              />
             </span>
           </div>
         </legend>
         <div
-          className="components-circular-option-picker"
+          className="components-flex components-h-stack components-v-stack emotion-6 emotion-5"
+          data-wp-c16t={true}
+          data-wp-component="VStack"
         >
           <div
-            className="components-circular-option-picker__swatches"
+            className="components-dropdown"
+            tabIndex="-1"
+          >
+            <button
+              aria-expanded={false}
+              aria-haspopup="true"
+              aria-label="Custom color picker"
+              className="components-color-palette__custom-color"
+              onClick={[Function]}
+              style={
+                Object {
+                  "background": "#f00",
+                }
+              }
+            >
+              #f00
+            </button>
+          </div>
+          <div
+            className="components-circular-option-picker"
           >
             <div
-              className="components-circular-option-picker__option-wrapper"
+              className="components-circular-option-picker__swatches"
             >
-              <button
-                aria-describedby={null}
-                aria-label="Color: red"
-                aria-pressed={true}
-                className="components-button components-circular-option-picker__option is-pressed"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                style={
-                  Object {
-                    "backgroundColor": "#f00",
-                    "color": "#f00",
-                  }
-                }
-                type="button"
-              />
-              <svg
-                aria-hidden={true}
-                fill="#000"
-                focusable={false}
-                height={24}
-                role="img"
-                viewBox="0 0 24 24"
-                width={24}
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                className="components-circular-option-picker__option-wrapper"
               >
-                <path
-                  d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                <button
+                  aria-describedby={null}
+                  aria-label="Color: red"
+                  aria-pressed={true}
+                  className="components-button components-circular-option-picker__option is-pressed"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  style={
+                    Object {
+                      "backgroundColor": "#f00",
+                      "color": "#f00",
+                    }
+                  }
+                  type="button"
                 />
-              </svg>
+                <svg
+                  aria-hidden={true}
+                  fill="#000"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                  />
+                </svg>
+              </div>
             </div>
-          </div>
-          <div
-            className="components-circular-option-picker__custom-clear-wrapper"
-          >
             <div
-              className="components-dropdown components-circular-option-picker__dropdown-link-action"
-              tabIndex="-1"
+              className="components-circular-option-picker__custom-clear-wrapper"
             >
               <button
                 aria-describedby={null}
-                aria-expanded={false}
-                aria-haspopup="true"
-                aria-label="Custom color picker"
-                className="components-button is-link"
+                className="components-button components-circular-option-picker__clear is-secondary is-small"
                 onClick={[Function]}
                 type="button"
               >
-                Custom color
+                Clear
               </button>
             </div>
-            <button
-              aria-describedby={null}
-              className="components-button components-circular-option-picker__clear is-secondary is-small"
-              onClick={[Function]}
-              type="button"
-            >
-              Clear
-            </button>
           </div>
         </div>
       </div>
diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 8ec461342d093..534c9e3113f3f 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -13,25 +13,16 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	ColorIndicator,
 	ColorPalette,
 	GradientPicker,
 } from '@wordpress/components';
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { getColorObjectByColorValue } from '../colors';
-import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
 
-// translators: first %s: the color name or value (e.g. red or #ff0000)
-const colorIndicatorAriaLabel = __( '(Color: %s)' );
-
-// translators: first %s: the gradient name or value (e.g. red to green or linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)
-const gradientIndicatorAriaLabel = __( '(Gradient: %s)' );
-
 const colorsAndGradientKeys = [
 	'colors',
 	'disableCustomColors',
@@ -39,45 +30,6 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
-function VisualLabel( {
-	colors,
-	gradients,
-	label,
-	currentTab,
-	colorValue,
-	gradientValue,
-} ) {
-	let value, ariaLabel;
-	if ( currentTab === 'color' ) {
-		if ( colorValue ) {
-			value = colorValue;
-			const colorObject = getColorObjectByColorValue( colors, value );
-			const colorName = colorObject && colorObject.name;
-			ariaLabel = sprintf( colorIndicatorAriaLabel, colorName || value );
-		}
-	} else if ( currentTab === 'gradient' && gradientValue ) {
-		value = gradientValue;
-		const gradientObject = __experimentalGetGradientObjectByGradientValue(
-			gradients,
-			value
-		);
-		const gradientName = gradientObject && gradientObject.name;
-		ariaLabel = sprintf(
-			gradientIndicatorAriaLabel,
-			gradientName || value
-		);
-	}
-
-	return (
-		<>
-			{ label }
-			{ !! value && (
-				<ColorIndicator colorValue={ value } aria-label={ ariaLabel } />
-			) }
-		</>
-	);
-}
-
 function ColorGradientControlInner( {
 	colors,
 	gradients,
@@ -90,6 +42,7 @@ function ColorGradientControlInner( {
 	colorValue,
 	gradientValue,
 	clearable,
+	showTitle = true,
 } ) {
 	const canChooseAColor =
 		onColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );
@@ -111,19 +64,16 @@ function ColorGradientControlInner( {
 			) }
 		>
 			<fieldset>
-				<VStack space={ 3 }>
-					<legend>
-						<div className="block-editor-color-gradient-control__color-indicator">
-							<BaseControl.VisualLabel>
-								<VisualLabel
-									currentTab={ currentTab }
-									label={ label }
-									colorValue={ colorValue }
-									gradientValue={ gradientValue }
-								/>
-							</BaseControl.VisualLabel>
-						</div>
-					</legend>
+				<VStack spacing={ 1 }>
+					{ showTitle && (
+						<legend>
+							<div className="block-editor-color-gradient-control__color-indicator">
+								<BaseControl.VisualLabel>
+									{ label }
+								</BaseControl.VisualLabel>
+							</div>
+						</legend>
+					) }
 					{ canChooseAColor && canChooseAGradient && (
 						<ToggleGroupControl
 							value={ currentTab }
diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index 36ef7ac2ac1ca..84c5adad96fe5 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -133,6 +133,7 @@ export const PanelColorGradientSettingsInner = ( {
 		>
 			{ settings.map( ( setting, index ) => (
 				<ColorGradientControl
+					showTitle={ showTitle }
 					key={ index }
 					{ ...{
 						colors,
diff --git a/packages/block-editor/src/components/colors-gradients/test/control.js b/packages/block-editor/src/components/colors-gradients/test/control.js
index e0de5f5eea1ed..99478184dd0ab 100644
--- a/packages/block-editor/src/components/colors-gradients/test/control.js
+++ b/packages/block-editor/src/components/colors-gradients/test/control.js
@@ -10,14 +10,6 @@ import { noop } from 'lodash';
  */
 import ColorGradientControl from '../control';
 
-const getButtonWithTestPredicate = ( text ) => ( element ) => {
-	return (
-		element.type === 'button' &&
-		element.children[ 0 ] === text &&
-		element.children.length === 1
-	);
-};
-
 const getButtonWithAriaLabelStartPredicate = ( ariaLabelStart ) => (
 	element
 ) => {
@@ -76,9 +68,6 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is showing the two predefined Colors.
 		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
-
-		// Is showing the custom color picker.
-		expect( screen.queryByText( 'Custom color' ) ).toBeInTheDocument();
 	} );
 
 	it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {
@@ -116,11 +105,6 @@ describe( 'ColorPaletteControl', () => {
 				getButtonWithAriaLabelStartPredicate( 'Color:' )
 			)
 		).toHaveLength( 2 );
-
-		// Is showing the custom color picker.
-		expect(
-			wrapper.root.findAll( getButtonWithTestPredicate( 'Custom color' ) )
-		).toHaveLength( 1 );
 	} );
 
 	it( 'renders the gradient picker and does not render tabs if it is only possible to select a gradient', async () => {
diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
index c3e503edd58dd..098d8c979171e 100644
--- a/packages/components/src/color-palette/index.js
+++ b/packages/components/src/color-palette/index.js
@@ -15,8 +15,10 @@ import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
 import CircularOptionPicker from '../circular-option-picker';
+import { VStack } from '../v-stack';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
@@ -76,33 +78,37 @@ export default function ColorPalette( {
 	);
 
 	return (
-		<CircularOptionPicker
-			className={ className }
-			options={ colorOptions }
-			actions={
-				<>
-					{ ! disableCustomColors && (
-						<CircularOptionPicker.DropdownLinkAction
-							dropdownProps={ {
-								renderContent: renderCustomColorPicker,
-								contentClassName:
-									'components-color-palette__picker',
-							} }
-							buttonProps={ {
-								'aria-label': __( 'Custom color picker' ),
-							} }
-							linkText={ __( 'Custom color' ) }
-						/>
+		<VStack spacing={ 3 }>
+			{ ! disableCustomColors && (
+				<Dropdown
+					renderContent={ renderCustomColorPicker }
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<button
+							className="components-color-palette__custom-color"
+							aria-expanded={ isOpen }
+							aria-haspopup="true"
+							onClick={ onToggle }
+							aria-label={ __( 'Custom color picker' ) }
+							style={ { background: value } }
+						>
+							{ value }
+						</button>
 					) }
-					{ !! clearable && (
+				/>
+			) }
+			<CircularOptionPicker
+				className={ className }
+				options={ colorOptions }
+				actions={
+					!! clearable && (
 						<CircularOptionPicker.ButtonAction
 							onClick={ clearColor }
 						>
 							{ __( 'Clear' ) }
 						</CircularOptionPicker.ButtonAction>
-					) }
-				</>
-			}
-		/>
+					)
+				}
+			/>
+		</VStack>
 	);
 }
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
new file mode 100644
index 0000000000000..e245457754132
--- /dev/null
+++ b/packages/components/src/color-palette/style.scss
@@ -0,0 +1,18 @@
+.components-color-palette__custom-color {
+	border: none;
+	background: none;
+	outline: 0;
+	display: block;
+	border-radius: $radius-block-ui;
+	height: $grid-unit-60;
+	text-align: right;
+	width: 100%;
+	background-image:
+		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
+		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
+	background-position: 0 0, 25px 25px;
+	background-size: calc(2 * 25px) calc(2 * 25px);
+	box-sizing: border-box;
+	color: $white;
+	cursor: pointer;
+}
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 fa0b4d2f0f7cd..e131b8cf5802a 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -16,160 +16,61 @@ exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`]
 `;
 
 exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`] = `
-<Fragment>
-  <button
-    aria-describedby={null}
-    aria-expanded={true}
-    aria-haspopup="true"
-    aria-label="Custom color picker"
-    className="components-button is-link"
-    onClick={[MockFunction]}
-    type="button"
-  >
-    Custom color
-  </button>
-</Fragment>
+<button
+  aria-expanded={true}
+  aria-haspopup="true"
+  aria-label="Custom color picker"
+  className="components-color-palette__custom-color"
+  onClick={[MockFunction]}
+  style={
+    Object {
+      "background": "#f00",
+    }
+  }
+>
+  #f00
+</button>
 `;
 
 exports[`ColorPalette Dropdown should render it correctly 1`] = `
 <Dropdown
-  className="components-circular-option-picker__dropdown-link-action"
-  contentClassName="components-color-palette__picker"
+  key=".0"
   renderContent={[Function]}
   renderToggle={[Function]}
 >
   <div
-    className="components-dropdown components-circular-option-picker__dropdown-link-action"
+    className="components-dropdown"
     tabIndex="-1"
   >
-    <ForwardRef(Button)
+    <button
       aria-expanded={false}
       aria-haspopup="true"
       aria-label="Custom color picker"
+      className="components-color-palette__custom-color"
       onClick={[Function]}
-      variant="link"
+      style={
+        Object {
+          "background": "#f00",
+        }
+      }
     >
-      <button
-        aria-describedby={null}
-        aria-expanded={false}
-        aria-haspopup="true"
-        aria-label="Custom color picker"
-        className="components-button is-link"
-        onClick={[Function]}
-        type="button"
-      >
-        Custom color
-      </button>
-    </ForwardRef(Button)>
+      #f00
+    </button>
   </div>
 </Dropdown>
 `;
 
 exports[`ColorPalette should allow disabling custom color picker 1`] = `
-<CircularOptionPicker
-  actions={
-    <React.Fragment>
+<VStack
+  spacing={3}
+>
+  <CircularOptionPicker
+    actions={
       <ButtonAction
         onClick={[Function]}
       >
         Clear
       </ButtonAction>
-    </React.Fragment>
-  }
-  options={
-    Array [
-      <Option
-        aria-label="Color: red"
-        isSelected={true}
-        onClick={[Function]}
-        selectedIconProps={
-          Object {
-            "fill": "#000",
-          }
-        }
-        style={
-          Object {
-            "backgroundColor": "#f00",
-            "color": "#f00",
-          }
-        }
-        tooltipText="red"
-      />,
-      <Option
-        aria-label="Color: white"
-        isSelected={false}
-        onClick={[Function]}
-        selectedIconProps={Object {}}
-        style={
-          Object {
-            "backgroundColor": "#fff",
-            "color": "#fff",
-          }
-        }
-        tooltipText="white"
-      />,
-      <Option
-        aria-label="Color: blue"
-        isSelected={false}
-        onClick={[Function]}
-        selectedIconProps={Object {}}
-        style={
-          Object {
-            "backgroundColor": "#00f",
-            "color": "#00f",
-          }
-        }
-        tooltipText="blue"
-      />,
-    ]
-  }
-/>
-`;
-
-exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
-<ColorPalette
-  colors={
-    Array [
-      Object {
-        "color": "#f00",
-        "name": "red",
-      },
-      Object {
-        "color": "#fff",
-        "name": "white",
-      },
-      Object {
-        "color": "#00f",
-        "name": "blue",
-      },
-    ]
-  }
-  onChange={[MockFunction]}
-  value="#f00"
->
-  <CircularOptionPicker
-    actions={
-      <React.Fragment>
-        <DropdownLinkAction
-          buttonProps={
-            Object {
-              "aria-label": "Custom color picker",
-            }
-          }
-          dropdownProps={
-            Object {
-              "contentClassName": "components-color-palette__picker",
-              "renderContent": [Function],
-            }
-          }
-          linkText="Custom color"
-        />
-        <ButtonAction
-          onClick={[Function]}
-        >
-          Clear
-        </ButtonAction>
-      </React.Fragment>
     }
     options={
       Array [
@@ -218,308 +119,438 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         />,
       ]
     }
+  />
+</VStack>
+`;
+
+exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-1 {
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-2>*+*:not( marquee ) {
+  margin-top: calc(4px * 3);
+}
+
+.emotion-3>* {
+  min-height: 0;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-4>*+*:not( marquee ) {
+  margin-top: calc(4px * 3);
+}
+
+.emotion-4>* {
+  min-height: 0;
+}
+
+<ColorPalette
+  colors={
+    Array [
+      Object {
+        "color": "#f00",
+        "name": "red",
+      },
+      Object {
+        "color": "#fff",
+        "name": "white",
+      },
+      Object {
+        "color": "#00f",
+        "name": "blue",
+      },
+    ]
+  }
+  onChange={[MockFunction]}
+  value="#f00"
+>
+  <VStack
+    spacing={3}
   >
-    <div
-      className="components-circular-option-picker"
+    <View
+      className="emotion-0 emotion-1 emotion-2 emotion-3 components-flex components-h-stack components-v-stack"
+      data-wp-c16t={true}
+      data-wp-component="VStack"
+      isColumn={true}
     >
       <div
-        className="components-circular-option-picker__swatches"
+        className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
+        data-wp-c16t={true}
+        data-wp-component="VStack"
       >
-        <Option
-          aria-label="Color: red"
-          isSelected={true}
-          key="#f00"
-          onClick={[Function]}
-          selectedIconProps={
-            Object {
-              "fill": "#000",
-            }
-          }
-          style={
-            Object {
-              "backgroundColor": "#f00",
-              "color": "#f00",
-            }
-          }
-          tooltipText="red"
+        <Dropdown
+          key=".0"
+          renderContent={[Function]}
+          renderToggle={[Function]}
         >
           <div
-            className="components-circular-option-picker__option-wrapper"
+            className="components-dropdown"
+            tabIndex="-1"
           >
-            <Tooltip
-              text="red"
+            <button
+              aria-expanded={false}
+              aria-haspopup="true"
+              aria-label="Custom color picker"
+              className="components-color-palette__custom-color"
+              onClick={[Function]}
+              style={
+                Object {
+                  "background": "#f00",
+                }
+              }
+            >
+              #f00
+            </button>
+          </div>
+        </Dropdown>
+        <CircularOptionPicker
+          actions={
+            <ButtonAction
+              onClick={[Function]}
             >
-              <ForwardRef(Button)
+              Clear
+            </ButtonAction>
+          }
+          key=".1"
+          options={
+            Array [
+              <Option
                 aria-label="Color: red"
-                className="components-circular-option-picker__option"
-                isPressed={true}
-                onBlur={[Function]}
+                isSelected={true}
                 onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
+                selectedIconProps={
+                  Object {
+                    "fill": "#000",
+                  }
+                }
                 style={
                   Object {
                     "backgroundColor": "#f00",
                     "color": "#f00",
                   }
                 }
-              >
-                <button
-                  aria-describedby={null}
-                  aria-label="Color: red"
-                  aria-pressed={true}
-                  className="components-button components-circular-option-picker__option is-pressed"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  style={
-                    Object {
-                      "backgroundColor": "#f00",
-                      "color": "#f00",
-                    }
+                tooltipText="red"
+              />,
+              <Option
+                aria-label="Color: white"
+                isSelected={false}
+                onClick={[Function]}
+                selectedIconProps={Object {}}
+                style={
+                  Object {
+                    "backgroundColor": "#fff",
+                    "color": "#fff",
                   }
-                  type="button"
-                />
-              </ForwardRef(Button)>
-            </Tooltip>
-            <Icon
-              fill="#000"
-              icon={
-                <SVG
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <Path
-                    d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-                  />
-                </SVG>
-              }
-            >
-              <SVG
-                fill="#000"
-                height={24}
-                viewBox="0 0 24 24"
-                width={24}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <svg
-                  aria-hidden={true}
-                  fill="#000"
-                  focusable={false}
-                  height={24}
-                  role="img"
-                  viewBox="0 0 24 24"
-                  width={24}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <Path
-                    d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-                  >
-                    <path
-                      d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-                    />
-                  </Path>
-                </svg>
-              </SVG>
-            </Icon>
-          </div>
-        </Option>
-        <Option
-          aria-label="Color: white"
-          isSelected={false}
-          key="#fff"
-          onClick={[Function]}
-          selectedIconProps={Object {}}
-          style={
-            Object {
-              "backgroundColor": "#fff",
-              "color": "#fff",
-            }
+                }
+                tooltipText="white"
+              />,
+              <Option
+                aria-label="Color: blue"
+                isSelected={false}
+                onClick={[Function]}
+                selectedIconProps={Object {}}
+                style={
+                  Object {
+                    "backgroundColor": "#00f",
+                    "color": "#00f",
+                  }
+                }
+                tooltipText="blue"
+              />,
+            ]
           }
-          tooltipText="white"
         >
           <div
-            className="components-circular-option-picker__option-wrapper"
+            className="components-circular-option-picker"
           >
-            <Tooltip
-              text="white"
+            <div
+              className="components-circular-option-picker__swatches"
             >
-              <ForwardRef(Button)
+              <Option
+                aria-label="Color: red"
+                isSelected={true}
+                key="#f00"
+                onClick={[Function]}
+                selectedIconProps={
+                  Object {
+                    "fill": "#000",
+                  }
+                }
+                style={
+                  Object {
+                    "backgroundColor": "#f00",
+                    "color": "#f00",
+                  }
+                }
+                tooltipText="red"
+              >
+                <div
+                  className="components-circular-option-picker__option-wrapper"
+                >
+                  <Tooltip
+                    text="red"
+                  >
+                    <ForwardRef(Button)
+                      aria-label="Color: red"
+                      className="components-circular-option-picker__option"
+                      isPressed={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      style={
+                        Object {
+                          "backgroundColor": "#f00",
+                          "color": "#f00",
+                        }
+                      }
+                    >
+                      <button
+                        aria-describedby={null}
+                        aria-label="Color: red"
+                        aria-pressed={true}
+                        className="components-button components-circular-option-picker__option is-pressed"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
+                        style={
+                          Object {
+                            "backgroundColor": "#f00",
+                            "color": "#f00",
+                          }
+                        }
+                        type="button"
+                      />
+                    </ForwardRef(Button)>
+                  </Tooltip>
+                  <Icon
+                    fill="#000"
+                    icon={
+                      <SVG
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <Path
+                          d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                        />
+                      </SVG>
+                    }
+                  >
+                    <SVG
+                      fill="#000"
+                      height={24}
+                      viewBox="0 0 24 24"
+                      width={24}
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <svg
+                        aria-hidden={true}
+                        fill="#000"
+                        focusable={false}
+                        height={24}
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width={24}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <Path
+                          d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                        >
+                          <path
+                            d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                          />
+                        </Path>
+                      </svg>
+                    </SVG>
+                  </Icon>
+                </div>
+              </Option>
+              <Option
                 aria-label="Color: white"
-                className="components-circular-option-picker__option"
-                isPressed={false}
-                onBlur={[Function]}
+                isSelected={false}
+                key="#fff"
                 onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
+                selectedIconProps={Object {}}
                 style={
                   Object {
                     "backgroundColor": "#fff",
                     "color": "#fff",
                   }
                 }
+                tooltipText="white"
               >
-                <button
-                  aria-describedby={null}
-                  aria-label="Color: white"
-                  aria-pressed={false}
-                  className="components-button components-circular-option-picker__option"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  style={
-                    Object {
-                      "backgroundColor": "#fff",
-                      "color": "#fff",
-                    }
-                  }
-                  type="button"
-                />
-              </ForwardRef(Button)>
-            </Tooltip>
-          </div>
-        </Option>
-        <Option
-          aria-label="Color: blue"
-          isSelected={false}
-          key="#00f"
-          onClick={[Function]}
-          selectedIconProps={Object {}}
-          style={
-            Object {
-              "backgroundColor": "#00f",
-              "color": "#00f",
-            }
-          }
-          tooltipText="blue"
-        >
-          <div
-            className="components-circular-option-picker__option-wrapper"
-          >
-            <Tooltip
-              text="blue"
-            >
-              <ForwardRef(Button)
+                <div
+                  className="components-circular-option-picker__option-wrapper"
+                >
+                  <Tooltip
+                    text="white"
+                  >
+                    <ForwardRef(Button)
+                      aria-label="Color: white"
+                      className="components-circular-option-picker__option"
+                      isPressed={false}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      style={
+                        Object {
+                          "backgroundColor": "#fff",
+                          "color": "#fff",
+                        }
+                      }
+                    >
+                      <button
+                        aria-describedby={null}
+                        aria-label="Color: white"
+                        aria-pressed={false}
+                        className="components-button components-circular-option-picker__option"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
+                        style={
+                          Object {
+                            "backgroundColor": "#fff",
+                            "color": "#fff",
+                          }
+                        }
+                        type="button"
+                      />
+                    </ForwardRef(Button)>
+                  </Tooltip>
+                </div>
+              </Option>
+              <Option
                 aria-label="Color: blue"
-                className="components-circular-option-picker__option"
-                isPressed={false}
-                onBlur={[Function]}
+                isSelected={false}
+                key="#00f"
                 onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
+                selectedIconProps={Object {}}
                 style={
                   Object {
                     "backgroundColor": "#00f",
                     "color": "#00f",
                   }
                 }
+                tooltipText="blue"
               >
-                <button
-                  aria-describedby={null}
-                  aria-label="Color: blue"
-                  aria-pressed={false}
-                  className="components-button components-circular-option-picker__option"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  style={
-                    Object {
-                      "backgroundColor": "#00f",
-                      "color": "#00f",
-                    }
-                  }
-                  type="button"
-                />
-              </ForwardRef(Button)>
-            </Tooltip>
-          </div>
-        </Option>
-      </div>
-      <div
-        className="components-circular-option-picker__custom-clear-wrapper"
-      >
-        <DropdownLinkAction
-          buttonProps={
-            Object {
-              "aria-label": "Custom color picker",
-            }
-          }
-          dropdownProps={
-            Object {
-              "contentClassName": "components-color-palette__picker",
-              "renderContent": [Function],
-            }
-          }
-          linkText="Custom color"
-        >
-          <Dropdown
-            className="components-circular-option-picker__dropdown-link-action"
-            contentClassName="components-color-palette__picker"
-            renderContent={[Function]}
-            renderToggle={[Function]}
-          >
+                <div
+                  className="components-circular-option-picker__option-wrapper"
+                >
+                  <Tooltip
+                    text="blue"
+                  >
+                    <ForwardRef(Button)
+                      aria-label="Color: blue"
+                      className="components-circular-option-picker__option"
+                      isPressed={false}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      style={
+                        Object {
+                          "backgroundColor": "#00f",
+                          "color": "#00f",
+                        }
+                      }
+                    >
+                      <button
+                        aria-describedby={null}
+                        aria-label="Color: blue"
+                        aria-pressed={false}
+                        className="components-button components-circular-option-picker__option"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
+                        style={
+                          Object {
+                            "backgroundColor": "#00f",
+                            "color": "#00f",
+                          }
+                        }
+                        type="button"
+                      />
+                    </ForwardRef(Button)>
+                  </Tooltip>
+                </div>
+              </Option>
+            </div>
             <div
-              className="components-dropdown components-circular-option-picker__dropdown-link-action"
-              tabIndex="-1"
+              className="components-circular-option-picker__custom-clear-wrapper"
             >
-              <ForwardRef(Button)
-                aria-expanded={false}
-                aria-haspopup="true"
-                aria-label="Custom color picker"
+              <ButtonAction
                 onClick={[Function]}
-                variant="link"
               >
-                <button
-                  aria-describedby={null}
-                  aria-expanded={false}
-                  aria-haspopup="true"
-                  aria-label="Custom color picker"
-                  className="components-button is-link"
+                <ForwardRef(Button)
+                  className="components-circular-option-picker__clear"
+                  isSmall={true}
                   onClick={[Function]}
-                  type="button"
+                  variant="secondary"
                 >
-                  Custom color
-                </button>
-              </ForwardRef(Button)>
+                  <button
+                    aria-describedby={null}
+                    className="components-button components-circular-option-picker__clear is-secondary is-small"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    Clear
+                  </button>
+                </ForwardRef(Button)>
+              </ButtonAction>
             </div>
-          </Dropdown>
-        </DropdownLinkAction>
-        <ButtonAction
-          onClick={[Function]}
-        >
-          <ForwardRef(Button)
-            className="components-circular-option-picker__clear"
-            isSmall={true}
-            onClick={[Function]}
-            variant="secondary"
-          >
-            <button
-              aria-describedby={null}
-              className="components-button components-circular-option-picker__clear is-secondary is-small"
-              onClick={[Function]}
-              type="button"
-            >
-              Clear
-            </button>
-          </ForwardRef(Button)>
-        </ButtonAction>
+          </div>
+        </CircularOptionPicker>
       </div>
-    </div>
-  </CircularOptionPicker>
+    </View>
+  </VStack>
 </ColorPalette>
 `;
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 01231952a2cc0..e5bf92c27e845 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -8,6 +8,7 @@
 @import "./color-indicator/style.scss";
 @import "./combobox-control/style.scss";
 @import "./color-list-picker/style.scss";
+@import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
 @import "./custom-select-control/style.scss";
 @import "./date-time/style.scss";
diff --git a/packages/e2e-tests/specs/editor/blocks/heading.test.js b/packages/e2e-tests/specs/editor/blocks/heading.test.js
index 02781002dcd5c..bdb2b625380ed 100644
--- a/packages/e2e-tests/specs/editor/blocks/heading.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/heading.test.js
@@ -9,8 +9,7 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Heading', () => {
-	const CUSTOM_COLOR_TEXT = 'Custom color';
-	const CUSTOM_COLOR_BUTTON_X_SELECTOR = `//button[contains(text(),'${ CUSTOM_COLOR_TEXT }')]`;
+	const CUSTOM_COLOR_BUTTON_X_SELECTOR = `.components-color-palette__custom-color`;
 	const CUSTOM_COLOR_DETAILS_BUTTON_SELECTOR =
 		'.components-color-picker button[aria-label="Show detailed inputs"]';
 	const COLOR_INPUT_FIELD_SELECTOR =
@@ -77,7 +76,7 @@ describe( 'Heading', () => {
 		);
 		await colorPanelToggle.click();
 
-		const customTextColorButton = await page.waitForXPath(
+		const customTextColorButton = await page.waitForSelector(
 			CUSTOM_COLOR_BUTTON_X_SELECTOR
 		);
 
@@ -88,9 +87,7 @@ describe( 'Heading', () => {
 		await pressKeyWithModifier( 'primary', 'A' );
 		await page.keyboard.type( '7700ff' );
 		await page.click( 'h3[data-type="core/heading"]' );
-		await page.waitForSelector(
-			'.component-color-indicator[aria-label="(Color: #7700ff)"]'
-		);
+		await page.waitForXPath( '//button[text()="#7700ff"]' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
diff --git a/packages/e2e-tests/specs/editor/various/rich-text.test.js b/packages/e2e-tests/specs/editor/various/rich-text.test.js
index 3e76fe5376f06..e56a5d3b34e00 100644
--- a/packages/e2e-tests/specs/editor/various/rich-text.test.js
+++ b/packages/e2e-tests/specs/editor/various/rich-text.test.js
@@ -397,6 +397,7 @@ describe( 'RichText', () => {
 		await page.keyboard.press( 'Tab' );
 		// Select color other than black.
 		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Enter' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index ebaae4a24a990..e92d9a832f6ff 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -19,13 +19,18 @@
 	margin: $grid-unit-20;
 
 	.component-color-indicator {
+		margin-left: 0;
 		display: block;
 		border-radius: 50%;
 		border: 0;
 		height: 24px;
 		width: 24px;
-		margin-left: 0;
 		padding: 0;
+		background-image:
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
+		background-position: 0 0, 25px 25px;
+		background-size: calc(2 * 5px) calc(2 * 5px);
 	}
 }