diff --git a/src/components/color-palette-control/color-palette-popup.js b/src/components/color-palette-control/color-palette-popup.js
index 7b2334e0da..ad4bce9c8b 100644
--- a/src/components/color-palette-control/color-palette-popup.js
+++ b/src/components/color-palette-control/color-palette-popup.js
@@ -4,6 +4,7 @@
 
 import { AdvancedToolbarControl } from '..'
 import { i18n } from 'stackable'
+import { extractColor } from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -39,6 +40,8 @@ export const ColorPalettePopup = memo( props => {
 		isGradient,
 	} = props
 
+	const extractedValue = extractColor( value )
+
 	const [ tab, setTab ] = useState( value.startsWith( 'linear-' ) || value.startsWith( 'radial-' ) ? 'gradient' : '' )
 	const allColors = colors.reduce( ( colors, group ) => {
 		return [
@@ -87,7 +90,7 @@ export const ColorPalettePopup = memo( props => {
 					onChange={ newValue => {
 						onChange( preOnChange( newValue, value ) )
 					} }
-					color={ value }
+					color={ extractedValue }
 					enableAlpha={ true }
 				/>
 			}