diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md
index 4a217a3c4d3ca..343f712cf372a 100644
--- a/docs/how-to-guides/themes/theme-json.md
+++ b/docs/how-to-guides/themes/theme-json.md
@@ -170,6 +170,7 @@ The settings section has the following structure:
 		},
 		"color": {
 			"custom": true,
+			"customDuotone": true,
 			"customGradient": true,
 			"duotone": [],
 			"gradients": [],
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index feb39b5c1cb79..292f50f514596 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -94,6 +94,7 @@ class WP_Theme_JSON_Gutenberg {
 		),
 		'color'      => array(
 			'custom'         => null,
+			'customDuotone'  => null,
 			'customGradient' => null,
 			'duotone'        => null,
 			'gradients'      => null,
diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
index d92547a146895..72ca42dbaa968 100644
--- a/lib/experimental-default-theme.json
+++ b/lib/experimental-default-theme.json
@@ -169,8 +169,9 @@
 				}
 			],
 			"custom": true,
-			"link": false,
-			"customGradient": true
+			"customDuotone": true,
+			"customGradient": true,
+			"link": false
 		},
 		"typography": {
 			"dropCap": true,
diff --git a/packages/block-editor/src/components/duotone-control/duotone-picker-popover.js b/packages/block-editor/src/components/duotone-control/duotone-picker-popover.js
index c277b07ad1487..64f4c1cf225c2 100644
--- a/packages/block-editor/src/components/duotone-control/duotone-picker-popover.js
+++ b/packages/block-editor/src/components/duotone-control/duotone-picker-popover.js
@@ -11,6 +11,7 @@ function DuotonePickerPopover( {
 	duotonePalette,
 	colorPalette,
 	disableCustomColors,
+	disableCustomDuotone,
 } ) {
 	return (
 		<Popover
@@ -23,6 +24,7 @@ function DuotonePickerPopover( {
 					colorPalette={ colorPalette }
 					duotonePalette={ duotonePalette }
 					disableCustomColors={ disableCustomColors }
+					disableCustomDuotone={ disableCustomDuotone }
 					value={ value }
 					onChange={ onChange }
 				/>
diff --git a/packages/block-editor/src/components/duotone-control/index.js b/packages/block-editor/src/components/duotone-control/index.js
index eb675639a5f14..757e83803e86b 100644
--- a/packages/block-editor/src/components/duotone-control/index.js
+++ b/packages/block-editor/src/components/duotone-control/index.js
@@ -15,15 +15,12 @@ function DuotoneControl( {
 	colorPalette,
 	duotonePalette,
 	disableCustomColors,
+	disableCustomDuotone,
 	value,
 	onChange,
 } ) {
 	const [ isOpen, setIsOpen ] = useState( false );
 
-	if ( ! duotonePalette ) {
-		return null;
-	}
-
 	const onToggle = () => {
 		setIsOpen( ( prev ) => ! prev );
 	};
@@ -55,6 +52,7 @@ function DuotoneControl( {
 					duotonePalette={ duotonePalette }
 					colorPalette={ colorPalette }
 					disableCustomColors={ disableCustomColors }
+					disableCustomDuotone={ disableCustomDuotone }
 				/>
 			) }
 		</>
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index c4845b34b49f8..3cb05246306b5 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.
  *
@@ -123,15 +125,23 @@ function DuotonePanel( { 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' );
+	const disableCustomDuotone =
+		! useSetting( 'color.customDuotone' ) ||
+		( colorPalette?.length === 0 && disableCustomColors );
+
+	if ( duotonePalette?.length === 0 && disableCustomDuotone ) {
+		return null;
+	}
 
 	return (
 		<BlockControls group="block">
 			<DuotoneControl
 				duotonePalette={ duotonePalette }
 				colorPalette={ colorPalette }
+				disableCustomDuotone={ disableCustomDuotone }
 				disableCustomColors={ disableCustomColors }
 				value={ duotone }
 				onChange={ ( newDuotone ) => {
diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js
index bbc546acec1c4..fa01fd8270767 100644
--- a/packages/components/src/duotone-picker/duotone-picker.js
+++ b/packages/components/src/duotone-picker/duotone-picker.js
@@ -22,6 +22,7 @@ function DuotonePicker( {
 	colorPalette,
 	duotonePalette,
 	disableCustomColors,
+	disableCustomDuotone,
 	value,
 	onChange,
 } ) {
@@ -29,6 +30,7 @@ function DuotonePicker( {
 		() => getDefaultColors( colorPalette ),
 		[ colorPalette ]
 	);
+
 	return (
 		<CircularOptionPicker
 			options={ duotonePalette.map( ( { colors, slug, name } ) => {
@@ -74,10 +76,10 @@ function DuotonePicker( {
 				</CircularOptionPicker.ButtonAction>
 			}
 		>
-			{ ! disableCustomColors && (
+			{ ! disableCustomColors && ! disableCustomDuotone && (
 				<CustomDuotoneBar value={ value } onChange={ onChange } />
 			) }
-			{ colorPalette && (
+			{ ! disableCustomDuotone && (
 				<ColorListPicker
 					labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
 					colors={ colorPalette }