diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php
index 1f45d897a77cc0..8a29b7e969ec2f 100644
--- a/lib/class-wp-theme-json-resolver-gutenberg.php
+++ b/lib/class-wp-theme-json-resolver-gutenberg.php
@@ -563,6 +563,21 @@ public static function get_user_data() {
 			}
 		}
 
+		/*
+		 * The Separator block uses different CSS properties for its color depending
+		 * on how it is being rendered e.g. as "content" for the Dots style, or
+		 * as a border etc.
+		 * 
+		 * Uses are only presented with a single color control for background. Any
+		 * selection of a background color should be applied to the other paths
+		 * so it can be honoured.
+		 */
+		$separator_color =  $config['styles']['blocks']['core/separator']['color']['background'] ?? null;
+		if ( $separator_color ) {
+			_wp_array_set( $config, array( 'styles', 'blocks', 'core/separator', 'color', 'text' ), $separator_color );
+			_wp_array_set( $config, array( 'styles', 'blocks', 'core/separator', 'border', 'color' ), $separator_color );
+		}
+
 		/** This filter is documented in wp-includes/class-wp-theme-json-resolver.php */
 		$theme_json   = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
 		static::$user = $theme_json->get_theme_json();
diff --git a/packages/editor/src/components/global-styles-provider/index.js b/packages/editor/src/components/global-styles-provider/index.js
index 74fbed5f000624..c47ebc91f9495f 100644
--- a/packages/editor/src/components/global-styles-provider/index.js
+++ b/packages/editor/src/components/global-styles-provider/index.js
@@ -22,7 +22,7 @@ const { GlobalStylesContext, cleanEmptyObject } = unlock(
 );
 
 export function mergeBaseAndUserConfigs( base, user ) {
-	return deepmerge( base, user, {
+	const mergedConfig = deepmerge( base, user, {
 		/*
 		 * We only pass as arrays the presets,
 		 * in which case we want the new array of values
@@ -41,6 +41,28 @@ export function mergeBaseAndUserConfigs( base, user ) {
 			return undefined;
 		},
 	} );
+
+	/*
+	 * The Separator block uses different CSS properties for its color depending
+	 * on how it is being rendered e.g. as "content" for the Dots style, or
+	 * as a border etc.
+	 *
+	 * Uses are only presented with a single color control for background. Any
+	 * selection of a background color should be applied to the other paths
+	 * so it can be honoured.
+	 */
+	const separatorColor =
+		user.styles?.blocks?.[ 'core/separator' ]?.color?.background;
+	if ( separatorColor ) {
+		mergedConfig.styles.blocks[ 'core/separator' ].color.text =
+			separatorColor;
+		mergedConfig.styles.blocks[ 'core/separator' ].border = {
+			...mergedConfig.styles.blocks[ 'core/separator' ].border,
+			color: separatorColor,
+		};
+	}
+
+	return mergedConfig;
 }
 
 function useGlobalStylesUserConfig() {