diff --git a/packages/edit-site/src/components/sidebar/color-palette-panel.js b/packages/edit-site/src/components/sidebar/color-palette-panel.js
index 5de6cab52addae..ec25b819b1f4f3 100644
--- a/packages/edit-site/src/components/sidebar/color-palette-panel.js
+++ b/packages/edit-site/src/components/sidebar/color-palette-panel.js
@@ -1,44 +1,25 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	__experimentalColorEdit as ColorEdit,
-} from '@wordpress/components';
+import { __experimentalColorEdit as ColorEdit } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function ColorPalettePanel( {
-	contextName,
-	getSetting,
-	setSetting,
-} ) {
-	const colors = getSetting( contextName, 'color.palette' );
-	let emptyUI;
-	if ( colors === undefined ) {
-		emptyUI = __(
-			'Using theme or core default colors. Add some colors to create your own color palette instead.'
-		);
-	} else if ( colors && colors.length === 0 ) {
-		emptyUI = (
-			<>
-				<p>{ __( 'Using an empty color palette.' ) }</p>
-				<Button
-					isSmall
-					isSecondary
-					onClick={ () => setSetting( contextName, 'color.palette' ) }
-				>
-					{ __( 'Reset to theme/core defaults' ) }
-				</Button>
-			</>
-		);
-	}
+/**
+ * Internal dependencies
+ */
+import { useEditorFeature } from '../editor/utils';
+
+export default function ColorPalettePanel( { contextName, setSetting } ) {
+	const colors = useEditorFeature( 'color.palette', contextName );
 	return (
 		<ColorEdit
 			colors={ colors }
 			onChange={ ( newColors ) => {
 				setSetting( contextName, 'color.palette', newColors );
 			} }
-			emptyUI={ emptyUI }
+			emptyUI={ __(
+				'Colors are empty! Add some colors to create your own color palette.'
+			) }
 		/>
 	);
 }