diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index f5d40ae8a2110..3b1f5fe8b380e 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -25,6 +25,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-grid-interactivity', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGridInteractivity = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-styles-inheritance-ui', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalStylesInheritanceUI = true', 'before' );
+	}
 	if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
 		wp_add_inline_script( 'wp-block-library', 'window.__experimentalDisableTinymce = true', 'before' );
 	}
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index f66e093219263..e4f4d691632bc 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -127,6 +127,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-styles-inheritance-ui',
+		__( 'Styles Inheritance UI', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Styles Inheritance UI', 'gutenberg' ),
+			'id'    => 'gutenberg-styles-inheritance-ui',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 13f61ec56a852..aaf354a43502b 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -154,7 +154,7 @@ const popoverProps = {
 	shift: true,
 };
 
-const LabeledColorIndicators = ( { indicators, label } ) => (
+const LabeledColorIndicators = ( { indicators, label, hasInheritedValue } ) => (
 	<HStack justify="flex-start">
 		<ZStack isLayered={ false } offset={ -8 }>
 			{ indicators.map( ( indicator, index ) => (
@@ -166,6 +166,18 @@ const LabeledColorIndicators = ( { indicators, label } ) => (
 		<FlexItem
 			className="block-editor-panel-color-gradient-settings__color-name"
 			title={ label }
+			// If it has an inherited value, we want to label with purple background
+			// and purple text.
+			style={
+				hasInheritedValue
+					? {
+							backgroundColor: '#FAF5FE',
+							color: '#7A00DF',
+							borderRadius: 3,
+							padding: '4px 3px',
+					  }
+					: undefined
+			}
 		>
 			{ label }
 		</FlexItem>
@@ -179,14 +191,15 @@ function ColorPanelTab( {
 	setValue,
 	colorGradientControlSettings,
 } ) {
+	const value = userValue || inheritedValue;
 	return (
 		<ColorGradientControl
 			{ ...colorGradientControlSettings }
 			showTitle={ false }
 			enableAlpha
 			__experimentalIsRenderedInSidebar
-			colorValue={ isGradient ? undefined : inheritedValue }
-			gradientValue={ isGradient ? inheritedValue : undefined }
+			colorValue={ isGradient ? undefined : value }
+			gradientValue={ isGradient ? value : undefined }
 			onColorChange={ isGradient ? undefined : setValue }
 			onGradientChange={ isGradient ? setValue : undefined }
 			clearable={ inheritedValue === userValue }
@@ -198,6 +211,7 @@ function ColorPanelTab( {
 function ColorPanelDropdown( {
 	label,
 	hasValue,
+	hasInheritedValue,
 	resetValue,
 	isShownByDefault,
 	indicators,
@@ -243,6 +257,7 @@ function ColorPanelDropdown( {
 							<LabeledColorIndicators
 								indicators={ indicators }
 								label={ label }
+								hasInheritedValue={ hasInheritedValue }
 							/>
 						</Button>
 					);
@@ -522,8 +537,9 @@ export default function ColorPanel( {
 			label: __( 'Text' ),
 			hasValue: hasTextColor,
 			resetValue: resetTextColor,
+			hasInheritedValue: !! textColor && ! userTextColor,
 			isShownByDefault: defaultControls.text,
-			indicators: [ textColor ],
+			indicators: [ userTextColor || textColor ],
 			tabs: [
 				{
 					key: 'text',
@@ -538,6 +554,10 @@ export default function ColorPanel( {
 			key: 'background',
 			label: __( 'Background' ),
 			hasValue: hasBackground,
+			hasInheritedValue:
+				( !! backgroundColor || !! gradient ) &&
+				! userBackgroundColor &&
+				! userGradient,
 			resetValue: resetBackground,
 			isShownByDefault: defaultControls.background,
 			indicators: [ gradient ?? backgroundColor ],
@@ -563,6 +583,10 @@ export default function ColorPanel( {
 			key: 'link',
 			label: __( 'Link' ),
 			hasValue: hasLink,
+			hasInheritedValue:
+				( !! linkColor || !! hoverLinkColor ) &&
+				! userLinkColor &&
+				! userHoverLinkColor,
 			resetValue: resetLink,
 			isShownByDefault: defaultControls.link,
 			indicators: [ linkColor, hoverLinkColor ],
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 0995f877309cc..ab74e6dfb2397 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -32,6 +32,7 @@ import {
 	default as StylesColorPanel,
 } from '../components/global-styles/color-panel';
 import BlockColorContrastChecker from './contrast-checker';
+import { useGlobalStyle } from '../components/global-styles';
 import { store as blockEditorStore } from '../store';
 
 export const COLOR_SUPPORT_KEY = 'color';
@@ -269,6 +270,9 @@ function ColorInspectorControl( { children, resetAllFilter } ) {
 
 export function ColorEdit( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasColorPanel( settings );
+
+	const [ userValue ] = useGlobalStyle( '', name, 'user' );
+
 	function selector( select ) {
 		const { style, textColor, backgroundColor, gradient } =
 			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
@@ -317,6 +321,7 @@ export function ColorEdit( { clientId, name, setAttributes, settings } ) {
 		<StylesColorPanel
 			as={ ColorInspectorControl }
 			panelId={ clientId }
+			inheritedValue={ userValue }
 			settings={ settings }
 			value={ value }
 			onChange={ onChange }
diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
index fd44d3dae4ca4..208a58b444c1f 100644
--- a/packages/edit-post/src/editor.js
+++ b/packages/edit-post/src/editor.js
@@ -12,6 +12,7 @@ import { useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { CommandMenu } from '@wordpress/commands';
+import { GlobalStylesProvider } from '@wordpress/edit-site';
 
 /**
  * Internal dependencies
@@ -86,21 +87,23 @@ function Editor( {
 
 	return (
 		<SlotFillProvider>
-			<ExperimentalEditorProvider
-				settings={ editorSettings }
-				post={ post }
-				initialEdits={ initialEdits }
-				useSubRegistry={ false }
-				__unstableTemplate={ template }
-				{ ...props }
-			>
-				<ErrorBoundary>
-					<CommandMenu />
-					<EditorInitialization />
-					<Layout initialPost={ initialPost } />
-				</ErrorBoundary>
-				<PostLockedModal />
-			</ExperimentalEditorProvider>
+			<GlobalStylesProvider>
+				<ExperimentalEditorProvider
+					settings={ editorSettings }
+					post={ post }
+					initialEdits={ initialEdits }
+					useSubRegistry={ false }
+					__unstableTemplate={ template }
+					{ ...props }
+				>
+					<ErrorBoundary>
+						<CommandMenu />
+						<EditorInitialization />
+						<Layout initialPost={ initialPost } />
+					</ErrorBoundary>
+					<PostLockedModal />
+				</ExperimentalEditorProvider>
+			</GlobalStylesProvider>
 		</SlotFillProvider>
 	);
 }
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index fccf8cb02bc54..2873547b217ee 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -108,3 +108,4 @@ export { default as PluginSidebarMoreMenuItem } from './components/header-edit-m
 export { default as PluginMoreMenuItem } from './components/header-edit-mode/plugin-more-menu-item';
 export { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel';
 export { store } from './store';
+export { GlobalStylesProvider } from './components/global-styles/global-styles-provider';