diff --git a/packages/block-editor/src/components/duotone-control/index.js b/packages/block-editor/src/components/duotone-control/index.js
index d27e6863fe0df..fdfbefc472309 100644
--- a/packages/block-editor/src/components/duotone-control/index.js
+++ b/packages/block-editor/src/components/duotone-control/index.js
@@ -16,6 +16,7 @@ import { Icon, filter } from '@wordpress/icons';
 function DuotoneControl( {
 	colorPalette,
 	duotonePalette,
+	duotonePaletteByOrigin,
 	disableCustomColors,
 	disableCustomDuotone,
 	value,
@@ -67,6 +68,7 @@ function DuotoneControl( {
 					<DuotonePicker
 						colorPalette={ colorPalette }
 						duotonePalette={ duotonePalette }
+						duotonePaletteByOrigin={ duotonePaletteByOrigin }
 						disableCustomColors={ disableCustomColors }
 						disableCustomDuotone={ disableCustomDuotone }
 						value={ value }
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
index 3a7f625d10de2..c901e9cddbe14 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
@@ -32,6 +32,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 				label={ __( 'Color' ) }
 				className="color-block-support-panel__inner-wrapper"
 			/>
+			<InspectorControls.Slot group="filter" label={ __( 'Filter' ) } />
 			<InspectorControls.Slot
 				group="typography"
 				label={ __( 'Typography' ) }
diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
index f1adbb66252b5..c59795c41351e 100644
--- a/packages/block-editor/src/components/inspector-controls/groups.js
+++ b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -7,6 +7,7 @@ const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
 const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
 const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
+const InspectorControlsFilter = createSlotFill( 'InspectorControlsFilter' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
@@ -22,6 +23,7 @@ const groups = {
 	advanced: InspectorControlsAdvanced,
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
+	filter: InspectorControlsFilter,
 	dimensions: InspectorControlsDimensions,
 	list: InspectorControlsListView,
 	settings: InspectorControlsDefault, // Alias for default.
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index c3aac777a396b..22c0414b9ac61 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -23,6 +23,7 @@ import { useSelect } from '@wordpress/data';
  */
 import {
 	BlockControls,
+	InspectorControls,
 	__experimentalDuotoneControl as DuotoneControl,
 	useSetting,
 } from '../components';
@@ -71,6 +72,7 @@ function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
 		useSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;
 	const defaultPresets =
 		useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;
+
 	return useMemo(
 		() => [
 			...userPresets,
@@ -81,6 +83,33 @@ function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
 	);
 }
 
+function useGroupedPresets( { presetSetting, defaultSetting } ) {
+	const disableDefault = ! useSetting( defaultSetting );
+	const userPresets =
+		useSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY;
+	const themePresets =
+		useSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;
+	const defaultPresets =
+		useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;
+
+	return useMemo( () => {
+		return [
+			{
+				name: 'User',
+				palettes: userPresets,
+			},
+			{
+				name: 'Theme',
+				palettes: themePresets,
+			},
+			{
+				name: 'Default',
+				palettes: disableDefault ? EMPTY_ARRAY : defaultPresets,
+			},
+		];
+	}, [ disableDefault, userPresets, themePresets, defaultPresets ] );
+}
+
 export function getColorsFromDuotonePreset( duotone, duotonePalette ) {
 	if ( ! duotone ) {
 		return;
@@ -114,6 +143,10 @@ function DuotonePanel( { attributes, setAttributes } ) {
 		presetSetting: 'color.duotone',
 		defaultSetting: 'color.defaultDuotone',
 	} );
+	const duotonePaletteByOrigin = useGroupedPresets( {
+		presetSetting: 'color.duotone',
+		defaultSetting: 'color.defaultDuotone',
+	} );
 	const colorPalette = useMultiOriginPresets( {
 		presetSetting: 'color.palette',
 		defaultSetting: 'color.defaultPalette',
@@ -132,30 +165,59 @@ function DuotonePanel( { attributes, setAttributes } ) {
 		: duotoneStyle;
 
 	return (
-		<BlockControls group="block" __experimentalShareWithChildBlocks>
-			<DuotoneControl
-				duotonePalette={ duotonePalette }
-				colorPalette={ colorPalette }
-				disableCustomDuotone={ disableCustomDuotone }
-				disableCustomColors={ disableCustomColors }
-				value={ duotonePresetOrColors }
-				onChange={ ( newDuotone ) => {
-					const maybePreset = getDuotonePresetFromColors(
-						newDuotone,
-						duotonePalette
-					);
-
-					const newStyle = {
-						...style,
-						color: {
-							...style?.color,
-							duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
-						},
-					};
-					setAttributes( { style: newStyle } );
-				} }
-			/>
-		</BlockControls>
+		<>
+			<InspectorControls
+				group="filter"
+				__experimentalShareWithChildBlocks
+			>
+				<DuotoneControl
+					duotonePaletteByOrigin={ duotonePaletteByOrigin }
+					colorPalette={ colorPalette }
+					disableCustomDuotone={ disableCustomDuotone }
+					disableCustomColors={ disableCustomColors }
+					value={ duotonePresetOrColors }
+					onChange={ ( newDuotone ) => {
+						const maybePreset = getDuotonePresetFromColors(
+							newDuotone,
+							duotonePalette
+						);
+
+						const newStyle = {
+							...style,
+							color: {
+								...style?.color,
+								duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
+							},
+						};
+						setAttributes( { style: newStyle } );
+					} }
+				/>
+			</InspectorControls>
+			<BlockControls group="block" __experimentalShareWithChildBlocks>
+				<DuotoneControl
+					duotonePalette={ duotonePalette }
+					colorPalette={ colorPalette }
+					disableCustomDuotone={ true }
+					disableCustomColors={ true }
+					value={ duotonePresetOrColors }
+					onChange={ ( newDuotone ) => {
+						const maybePreset = getDuotonePresetFromColors(
+							newDuotone,
+							duotonePalette
+						);
+
+						const newStyle = {
+							...style,
+							color: {
+								...style?.color,
+								duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
+							},
+						};
+						setAttributes( { style: newStyle } );
+					} }
+				/>
+			</BlockControls>
+		</>
 	);
 }
 
diff --git a/packages/components/src/duotone-picker/duotone-picker.tsx b/packages/components/src/duotone-picker/duotone-picker.tsx
index 2daacb15c9159..663ebde0ac3c6 100644
--- a/packages/components/src/duotone-picker/duotone-picker.tsx
+++ b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -12,6 +12,7 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { ColorHeading } from '../color-palette/styles';
 import ColorListPicker from './color-list-picker';
 import CircularOptionPicker from '../circular-option-picker';
 import { VStack } from '../v-stack';
@@ -19,72 +20,15 @@ import { VStack } from '../v-stack';
 import CustomDuotoneBar from './custom-duotone-bar';
 import { getDefaultColors, getGradientFromCSSColors } from './utils';
 import { Spacer } from '../spacer';
-import type { DuotonePickerProps } from './types';
+import type {
+	DuotonePickerProps,
+	SinglePaletteProps,
+	MultiplePalettesProps,
+	paletteOptionsProps,
+} from './types';
 
-/**
- * ```jsx
- * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const DUOTONE_PALETTE = [
- * 	{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
- * 	{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
- * ];
- *
- * const COLOR_PALETTE = [
- * 	{ color: '#ff4747', name: 'Red', slug: 'red' },
- * 	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
- * 	{ color: '#000097', name: 'Blue', slug: 'blue' },
- * 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
- * ];
- *
- * const Example = () => {
- * 	const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
- * 	return (
- * 		<>
- * 			<DuotonePicker
- * 				duotonePalette={ DUOTONE_PALETTE }
- * 				colorPalette={ COLOR_PALETTE }
- * 				value={ duotone }
- * 				onChange={ setDuotone }
- * 			/>
- * 			<DuotoneSwatch values={ duotone } />
- * 		</>
- * 	);
- * };
- * ```
- */
-function DuotonePicker( {
-	clearable = true,
-	unsetable = true,
-	colorPalette,
-	duotonePalette,
-	disableCustomColors,
-	disableCustomDuotone,
-	value,
-	onChange,
-}: DuotonePickerProps ) {
-	const [ defaultDark, defaultLight ] = useMemo(
-		() => getDefaultColors( colorPalette ),
-		[ colorPalette ]
-	);
-
-	const isUnset = value === 'unset';
-
-	const unsetOption = (
-		<CircularOptionPicker.Option
-			key="unset"
-			value="unset"
-			isSelected={ isUnset }
-			tooltipText={ __( 'Unset' ) }
-			className="components-duotone-picker__color-indicator"
-			onClick={ () => {
-				onChange( isUnset ? undefined : 'unset' );
-			} }
-		/>
-	);
-
-	const options = duotonePalette.map( ( { colors, slug, name } ) => {
+function paletteOptions( { palette, value, onChange }: paletteOptionsProps ) {
+	return palette.map( ( { colors, slug, name } ) => {
 		const style = {
 			background: getGradientFromCSSColors( colors, '135deg' ),
 			color: 'transparent',
@@ -119,6 +63,27 @@ function DuotonePicker( {
 			/>
 		);
 	} );
+}
+
+function SinglePalette( {
+	defaultDark,
+	defaultLight,
+	clearable,
+	unsetable,
+	colorPalette,
+	duotonePalette,
+	disableCustomColors,
+	disableCustomDuotone,
+	value,
+	unsetOption,
+	onChange,
+}: SinglePaletteProps ) {
+	const colorValue = value && value !== 'unset' ? value : undefined;
+	const options = paletteOptions( {
+		palette: duotonePalette,
+		value,
+		onChange,
+	} );
 
 	return (
 		<CircularOptionPicker
@@ -137,7 +102,7 @@ function DuotonePicker( {
 				<VStack spacing={ 3 }>
 					{ ! disableCustomColors && ! disableCustomDuotone && (
 						<CustomDuotoneBar
-							value={ isUnset ? undefined : value }
+							value={ colorValue }
 							onChange={ onChange }
 						/>
 					) }
@@ -145,7 +110,7 @@ function DuotonePicker( {
 						<ColorListPicker
 							labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
 							colors={ colorPalette }
-							value={ isUnset ? undefined : value }
+							value={ colorValue }
 							disableCustomColors={ disableCustomColors }
 							enableAlpha
 							onChange={ ( newColors ) => {
@@ -172,4 +137,154 @@ function DuotonePicker( {
 	);
 }
 
+function MultiplePalettes( {
+	defaultDark,
+	defaultLight,
+	unsetable,
+	colorPalette,
+	duotonePaletteByOrigin,
+	disableCustomColors,
+	disableCustomDuotone,
+	value,
+	unsetOption,
+	onChange,
+}: MultiplePalettesProps ) {
+	if ( ! duotonePaletteByOrigin ) {
+		return null;
+	}
+
+	const paletteProps = {
+		defaultDark,
+		defaultLight,
+		clearable: false,
+		unsetable,
+		colorPalette,
+		disableCustomColors,
+		disableCustomDuotone,
+		value,
+		unsetOption,
+		onChange,
+	};
+
+	return (
+		<>
+			{ duotonePaletteByOrigin
+				.filter( ( { palettes } ) => palettes.length > 0 )
+				.map( ( { name, palettes }, index, array ) => {
+					if ( index > 0 ) {
+						paletteProps.unsetable = false;
+					}
+					if ( index === array.length - 1 ) {
+						paletteProps.clearable = true;
+					}
+					return (
+						<VStack spacing={ 2 } key={ index }>
+							<ColorHeading level={ 3 }>{ name }</ColorHeading>
+							<SinglePalette
+								{ ...paletteProps }
+								duotonePalette={ palettes }
+							/>
+						</VStack>
+					);
+				} ) }
+		</>
+	);
+}
+
+/**
+ * ```jsx
+ * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const DUOTONE_PALETTE = [
+ * 	{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
+ * 	{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
+ * ];
+ *
+ * const COLOR_PALETTE = [
+ * 	{ color: '#ff4747', name: 'Red', slug: 'red' },
+ * 	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
+ * 	{ color: '#000097', name: 'Blue', slug: 'blue' },
+ * 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
+ * ];
+ *
+ * const Example = () => {
+ * 	const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
+ * 	return (
+ * 		<>
+ * 			<DuotonePicker
+ * 				duotonePalette={ DUOTONE_PALETTE }
+ * 				colorPalette={ COLOR_PALETTE }
+ * 				value={ duotone }
+ * 				onChange={ setDuotone }
+ * 			/>
+ * 			<DuotoneSwatch values={ duotone } />
+ * 		</>
+ * 	);
+ * };
+ * ```
+ */
+function DuotonePicker( {
+	clearable = true,
+	unsetable = true,
+	colorPalette,
+	duotonePalette,
+	duotonePaletteByOrigin,
+	disableCustomColors,
+	disableCustomDuotone,
+	value,
+	onChange,
+}: DuotonePickerProps ) {
+	const [ defaultDark, defaultLight ] = useMemo(
+		() => getDefaultColors( colorPalette ),
+		[ colorPalette ]
+	);
+
+	const isUnset = value === 'unset';
+
+	const unsetOption = (
+		<CircularOptionPicker.Option
+			key="unset"
+			value="unset"
+			isSelected={ isUnset }
+			tooltipText={ __( 'Unset' ) }
+			className="components-duotone-picker__color-indicator"
+			onClick={ () => {
+				onChange( isUnset ? undefined : 'unset' );
+			} }
+		/>
+	);
+
+	const paletteCommonProps = {
+		defaultDark,
+		defaultLight,
+		unsetable,
+		colorPalette,
+		disableCustomColors,
+		disableCustomDuotone,
+		value,
+		unsetOption,
+		onChange,
+	};
+
+	return (
+		<>
+			{ duotonePaletteByOrigin ? (
+				<>
+					<MultiplePalettes
+						{ ...paletteCommonProps }
+						duotonePaletteByOrigin={ duotonePaletteByOrigin }
+					/>
+				</>
+			) : (
+				<SinglePalette
+					{ ...paletteCommonProps }
+					clearable={ clearable }
+					duotonePalette={ duotonePalette }
+				/>
+			) }
+		</>
+	);
+}
+
 export default DuotonePicker;
diff --git a/packages/components/src/duotone-picker/types.ts b/packages/components/src/duotone-picker/types.ts
index 3d5927675f542..18bb5607a9bcf 100644
--- a/packages/components/src/duotone-picker/types.ts
+++ b/packages/components/src/duotone-picker/types.ts
@@ -19,6 +19,10 @@ export type DuotonePickerProps = {
 	 * Array of duotone presets of the form `{ colors: [ '#000000', '#ffffff' ], name: 'Grayscale', slug: 'grayscale' }`.
 	 */
 	duotonePalette: DuotoneColor[];
+	/**
+	 * Array of duotone presets of the form `{ colors: [ '#000000', '#ffffff' ], name: 'Grayscale', slug: 'grayscale' } grouped by origin`.
+	 */
+	duotonePaletteByOrigin?: duotonePaletteByOrigin;
 	/**
 	 * Whether custom colors should be disabled.
 	 *
@@ -47,6 +51,11 @@ type Color = {
 	slug: string;
 };
 
+type duotonePaletteByOrigin = Array< {
+	name: string;
+	palettes: DuotoneColor[];
+} >;
+
 type DuotoneColor = {
 	colors: string[];
 	name: string;
@@ -59,3 +68,36 @@ export type DuotoneSwatchProps = {
 	 */
 	values?: string[] | null;
 };
+
+export type SinglePaletteProps = {
+	defaultDark: string;
+	defaultLight: string;
+	unsetable?: boolean;
+	colorPalette: Color[];
+	disableCustomColors?: boolean;
+	disableCustomDuotone?: boolean;
+	value?: string[] | 'unset';
+	unsetOption: React.ReactElement;
+	onChange: ( value: DuotonePickerProps[ 'value' ] | undefined ) => void;
+	clearable?: boolean;
+	duotonePalette: DuotoneColor[];
+};
+
+export type MultiplePalettesProps = {
+	defaultDark: string;
+	defaultLight: string;
+	unsetable?: boolean;
+	colorPalette: Color[];
+	disableCustomColors?: boolean;
+	disableCustomDuotone?: boolean;
+	value?: string[] | 'unset';
+	unsetOption: React.ReactElement;
+	onChange: ( value: DuotonePickerProps[ 'value' ] | undefined ) => void;
+	duotonePaletteByOrigin: duotonePaletteByOrigin;
+};
+
+export type paletteOptionsProps = {
+	palette: DuotoneColor[];
+	value?: string[] | 'unset';
+	onChange: ( value: DuotonePickerProps[ 'value' ] | undefined ) => void;
+};