diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 18a56c2b5f149..e8069bafa21f9 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -21,6 +21,8 @@ import {
 	useSetting,
 } from '../components';
 
+const EMPTY_ARRAY = [];
+
 /**
  * Convert a list of colors to an object of R, G, and B values.
  *
@@ -124,14 +126,14 @@ function DuotonePanel( { name, attributes, setAttributes } ) {
 	const style = attributes?.style;
 	const duotone = style?.color?.duotone;
 
-	const duotonePalette = useSetting( 'color.duotone' );
-	const colorPalette = useSetting( 'color.palette' );
+	const duotonePalette = useSetting( 'color.duotone' ) || EMPTY_ARRAY;
+	const colorPalette = useSetting( 'color.palette' ) || EMPTY_ARRAY;
 	const disableCustomColors = ! useSetting( 'color.custom' );
 
 	if (
 		! hasBlockSupport( name, 'color.__experimentalDuotone' ) ||
-		( ( ! duotonePalette || duotonePalette?.length === 0 ) &&
-			( ! colorPalette || colorPalette?.length === 0 ) &&
+		( duotonePalette?.length === 0 &&
+			colorPalette?.length === 0 &&
 			disableCustomColors )
 	) {
 		return null;
diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js
index 2d5c51bb3d699..e0fbaa363bb38 100644
--- a/packages/components/src/duotone-picker/duotone-picker.js
+++ b/packages/components/src/duotone-picker/duotone-picker.js
@@ -30,47 +30,43 @@ function DuotonePicker( {
 		[ colorPalette ]
 	);
 
-	let duotonePresets = null;
-	if ( !! duotonePalette ) {
-		duotonePresets = duotonePalette.map( ( { colors, slug, name } ) => {
-			const style = {
-				background: getGradientFromCSSColors( colors, '135deg' ),
-				color: 'transparent',
-			};
-			const tooltipText =
-				name ??
-				sprintf(
-					// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
-					__( 'Duotone code: %s' ),
-					slug
-				);
-			const label = name
-				? sprintf(
-						// translators: %s: The name of the option e.g: "Dark grayscale".
-						__( 'Duotone: %s' ),
-						name
-				  )
-				: tooltipText;
-			const isSelected = isEqual( colors, value );
-
-			return (
-				<CircularOptionPicker.Option
-					key={ slug }
-					value={ colors }
-					isSelected={ isSelected }
-					aria-label={ label }
-					tooltipText={ tooltipText }
-					style={ style }
-					onClick={ () => {
-						onChange( isSelected ? undefined : colors );
-					} }
-				/>
-			);
-		} );
-	}
 	return (
 		<CircularOptionPicker
-			options={ duotonePresets }
+			options={ duotonePalette.map( ( { colors, slug, name } ) => {
+				const style = {
+					background: getGradientFromCSSColors( colors, '135deg' ),
+					color: 'transparent',
+				};
+				const tooltipText =
+					name ??
+					sprintf(
+						// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
+						__( 'Duotone code: %s' ),
+						slug
+					);
+				const label = name
+					? sprintf(
+							// translators: %s: The name of the option e.g: "Dark grayscale".
+							__( 'Duotone: %s' ),
+							name
+					  )
+					: tooltipText;
+				const isSelected = isEqual( colors, value );
+
+				return (
+					<CircularOptionPicker.Option
+						key={ slug }
+						value={ colors }
+						isSelected={ isSelected }
+						aria-label={ label }
+						tooltipText={ tooltipText }
+						style={ style }
+						onClick={ () => {
+							onChange( isSelected ? undefined : colors );
+						} }
+					/>
+				);
+			} ) }
 			actions={
 				<CircularOptionPicker.ButtonAction
 					onClick={ () => onChange( undefined ) }