diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index 95bed8d3370df..d2b5b383ddf68 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -8,8 +8,7 @@ import { every, isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import { PanelBody, ColorIndicator } from '@wordpress/components';
-import { sprintf, __, _x } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
+import { sprintf, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -18,6 +17,8 @@ import ColorGradientControl from './control';
 import { getColorObjectByColorValue } from '../colors';
 import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
+import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
+import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
 
 // translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
 const colorIndicatorAriaLabel = __( '(%s: color %s)' );
@@ -154,13 +155,6 @@ export const PanelColorGradientSettingsInner = ( {
 	);
 };
 
-function useCommonSingleMultipleSelects() {
-	return {
-		disableCustomColors: ! useSetting( 'color.custom' ),
-		disableCustomGradients: ! useSetting( 'color.customGradient' ),
-	};
-}
-
 const PanelColorGradientSettingsSingleSelect = ( props ) => {
 	const colorGradientSettings = useCommonSingleMultipleSelects();
 	colorGradientSettings.colors = useSetting( 'color.palette' );
@@ -173,89 +167,7 @@ const PanelColorGradientSettingsSingleSelect = ( props ) => {
 };
 
 const PanelColorGradientSettingsMultipleSelect = ( props ) => {
-	const colorGradientSettings = useCommonSingleMultipleSelects();
-	const customColors = useSetting( 'color.palette.custom' );
-	const themeColors = useSetting( 'color.palette.theme' );
-	const defaultColors = useSetting( 'color.palette.default' );
-	const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' );
-
-	colorGradientSettings.colors = useMemo( () => {
-		const result = [];
-		if ( themeColors && themeColors.length ) {
-			result.push( {
-				name: _x(
-					'Theme',
-					'Indicates this palette comes from the theme.'
-				),
-				colors: themeColors,
-			} );
-		}
-		if (
-			shouldDisplayDefaultColors &&
-			defaultColors &&
-			defaultColors.length
-		) {
-			result.push( {
-				name: _x(
-					'Default',
-					'Indicates this palette comes from WordPress.'
-				),
-				colors: defaultColors,
-			} );
-		}
-		if ( customColors && customColors.length ) {
-			result.push( {
-				name: _x(
-					'Custom',
-					'Indicates this palette comes from the theme.'
-				),
-				colors: customColors,
-			} );
-		}
-		return result;
-	}, [ defaultColors, themeColors, customColors ] );
-
-	const customGradients = useSetting( 'color.gradients.custom' );
-	const themeGradients = useSetting( 'color.gradients.theme' );
-	const defaultGradients = useSetting( 'color.gradients.default' );
-	const shouldDisplayDefaultGradients = useSetting(
-		'color.defaultGradients'
-	);
-	colorGradientSettings.gradients = useMemo( () => {
-		const result = [];
-		if ( themeGradients && themeGradients.length ) {
-			result.push( {
-				name: _x(
-					'Theme',
-					'Indicates this palette comes from the theme.'
-				),
-				gradients: themeGradients,
-			} );
-		}
-		if (
-			shouldDisplayDefaultGradients &&
-			defaultGradients &&
-			defaultGradients.length
-		) {
-			result.push( {
-				name: _x(
-					'Default',
-					'Indicates this palette comes from WordPress.'
-				),
-				gradients: defaultGradients,
-			} );
-		}
-		if ( customGradients && customGradients.length ) {
-			result.push( {
-				name: _x(
-					'Custom',
-					'Indicates this palette is created by the user.'
-				),
-				gradients: customGradients,
-			} );
-		}
-		return result;
-	}, [ customGradients, themeGradients, defaultGradients ] );
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 	return (
 		<PanelColorGradientSettingsInner
 			{ ...{ ...colorGradientSettings, ...props } }
diff --git a/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js b/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js
new file mode 100644
index 0000000000000..6a538a33de44e
--- /dev/null
+++ b/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js
@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import useSetting from '../use-setting';
+
+export default function useCommonSingleMultipleSelects() {
+	return {
+		disableCustomColors: ! useSetting( 'color.custom' ),
+		disableCustomGradients: ! useSetting( 'color.customGradient' ),
+	};
+}
diff --git a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
new file mode 100644
index 0000000000000..ca3ecc2644635
--- /dev/null
+++ b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
@@ -0,0 +1,107 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../use-setting';
+import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
+
+/**
+ * Retrieves color and gradient related settings.
+ *
+ * The arrays for colors and gradients are made up of color palettes from each
+ * origin i.e. "Core", "Theme", and "User".
+ *
+ * @return {Object} Color and gradient related settings.
+ */
+export default function useMultipleOriginColorsAndGradients() {
+	const colorGradientSettings = useCommonSingleMultipleSelects();
+	const customColors = useSetting( 'color.palette.custom' );
+	const themeColors = useSetting( 'color.palette.theme' );
+	const defaultColors = useSetting( 'color.palette.default' );
+	const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' );
+
+	colorGradientSettings.colors = useMemo( () => {
+		const result = [];
+		if ( themeColors && themeColors.length ) {
+			result.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: themeColors,
+			} );
+		}
+		if (
+			shouldDisplayDefaultColors &&
+			defaultColors &&
+			defaultColors.length
+		) {
+			result.push( {
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				colors: defaultColors,
+			} );
+		}
+		if ( customColors && customColors.length ) {
+			result.push( {
+				name: _x(
+					'Custom',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: customColors,
+			} );
+		}
+		return result;
+	}, [ defaultColors, themeColors, customColors ] );
+
+	const customGradients = useSetting( 'color.gradients.custom' );
+	const themeGradients = useSetting( 'color.gradients.theme' );
+	const defaultGradients = useSetting( 'color.gradients.default' );
+	const shouldDisplayDefaultGradients = useSetting(
+		'color.defaultGradients'
+	);
+	colorGradientSettings.gradients = useMemo( () => {
+		const result = [];
+		if ( themeGradients && themeGradients.length ) {
+			result.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				gradients: themeGradients,
+			} );
+		}
+		if (
+			shouldDisplayDefaultGradients &&
+			defaultGradients &&
+			defaultGradients.length
+		) {
+			result.push( {
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				gradients: defaultGradients,
+			} );
+		}
+		if ( customGradients && customGradients.length ) {
+			result.push( {
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				gradients: customGradients,
+			} );
+		}
+		return result;
+	}, [ customGradients, themeGradients, defaultGradients ] );
+
+	return colorGradientSettings;
+}
diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js
index 9060f21236d69..3b206c90df7e1 100644
--- a/packages/block-editor/src/hooks/border-color.js
+++ b/packages/block-editor/src/hooks/border-color.js
@@ -15,6 +15,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import ColorGradientControl from '../components/colors-gradients/control';
+import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
 import {
 	getColorClassName,
 	getColorObjectByColorValue,
@@ -46,13 +47,15 @@ export function BorderColorEdit( props ) {
 		attributes: { borderColor, style },
 		setAttributes,
 	} = props;
-	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
-	const disableCustomColors = ! useSetting( 'color.custom' );
-	const disableCustomGradients = ! useSetting( 'color.customGradient' );
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	const availableColors = colorGradientSettings.colors.reduce(
+		( colors, origin ) => colors.concat( origin.colors ),
+		[]
+	);
 	const [ colorValue, setColorValue ] = useState(
 		() =>
 			getColorObjectByAttributeValues(
-				colors,
+				availableColors,
 				borderColor,
 				style?.border?.color
 			)?.color
@@ -61,7 +64,10 @@ export function BorderColorEdit( props ) {
 	const onChangeColor = ( value ) => {
 		setColorValue( value );
 
-		const colorObject = getColorObjectByColorValue( colors, value );
+		const colorObject = getColorObjectByColorValue(
+			availableColors,
+			value
+		);
 		const newStyle = {
 			...style,
 			border: {
@@ -83,11 +89,10 @@ export function BorderColorEdit( props ) {
 		<ColorGradientControl
 			label={ __( 'Color' ) }
 			colorValue={ colorValue }
-			colors={ colors }
-			gradients={ undefined }
-			disableCustomColors={ disableCustomColors }
-			disableCustomGradients={ disableCustomGradients }
 			onColorChange={ onChangeColor }
+			clearable={ false }
+			__experimentalHasMultipleOrigins
+			{ ...colorGradientSettings }
 		/>
 	);
 }