diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index 625aa1283bd90b..9c82ffc970701f 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -65,6 +65,10 @@ function CustomColorValueInput( {
 	const inputRef = useRef< HTMLInputElement >( null );
 	const truncateRef = useRef< HTMLDivElement >( null );
 
+	useEffect( () => {
+		setInputValue( value );
+	}, [ value ] );
+
 	useEffect( () => {
 		if ( isEditing && inputRef.current ) {
 			inputRef.current.focus();
@@ -111,6 +115,7 @@ function CustomColorValueInput( {
 	if ( isEditing && isHex ) {
 		return (
 			<input
+				ref={ inputRef }
 				type="text"
 				value={ inputValue || '' }
 				onChange={ handleChange }