diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
index 553a59eca0c3e2..605f7cbb4a6404 100644
--- a/packages/block-editor/src/hooks/color-panel.js
+++ b/packages/block-editor/src/hooks/color-panel.js
@@ -16,6 +16,7 @@ export default function ColorPanel( {
 	settings,
 	clientId,
 	enableContrastChecking = true,
+	...props
 } ) {
 	const { getComputedStyle, Node } = window;
 
@@ -55,6 +56,7 @@ export default function ColorPanel( {
 				title={ __( 'Color settings' ) }
 				initialOpen={ false }
 				settings={ settings }
+				{ ...props }
 			>
 				{ enableContrastChecking && (
 					<ContrastChecker
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 19ed470c771d1a..73202e2d195977 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -17,6 +17,7 @@ import { useRef, useEffect, Platform } from '@wordpress/element';
  * Internal dependencies
  */
 import {
+	getColorClassName,
 	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 } from '../components/colors';
@@ -55,6 +56,24 @@ function addAttributes( settings ) {
 		return settings;
 	}
 
+	// Todo: Color attributes are added so we can support themes that use color classes.
+	// If later we remove support for color classes the attributes should be removed.
+	// allow blocks to specify their own attribute definition with default values if needed.
+	if ( ! settings.attributes.backgroundColor ) {
+		Object.assign( settings.attributes, {
+			backgroundColor: {
+				type: 'string',
+			},
+		} );
+	}
+	if ( ! settings.attributes.textColor ) {
+		Object.assign( settings.attributes, {
+			textColor: {
+				type: 'string',
+			},
+		} );
+	}
+
 	if ( hasGradientSupport( settings ) && ! settings.attributes.gradient ) {
 		Object.assign( settings.attributes, {
 			gradient: {
@@ -82,15 +101,30 @@ export function addSaveProps( props, blockType, attributes ) {
 	const hasGradient = hasGradientSupport( blockType );
 
 	// I'd have prefered to avoid the "style" attribute usage here
-	const { gradient, style } = attributes;
+	const { backgroundColor, textColor, gradient, style } = attributes;
 
+	const backgroundClass = getColorClassName(
+		'background-color',
+		backgroundColor
+	);
 	const gradientClass = __experimentalGetGradientClass( gradient );
-	const newClassName = classnames( props.className, gradientClass, {
-		'has-text-color': style?.color?.text,
-		'has-background':
-			style?.color?.background ||
-			( hasGradient && ( gradient || style?.color?.gradient ) ),
-	} );
+	const textClass = getColorClassName( 'color', textColor );
+	const newClassName = classnames(
+		props.className,
+		textClass,
+		gradientClass,
+		{
+			// Don't apply the background class if there's a custom gradient
+			[ backgroundClass ]:
+				( ! hasGradient || ! style?.color?.gradient ) &&
+				!! backgroundClass,
+			'has-text-color': textColor || style?.color?.text,
+			'has-background':
+				backgroundColor ||
+				style?.color?.background ||
+				( hasGradient && ( gradient || style?.color?.gradient ) ),
+		}
+	);
 	props.className = newClassName ? newClassName : undefined;
 
 	return props;
@@ -119,12 +153,16 @@ export function addEditProps( settings ) {
 	return settings;
 }
 
-const getColorFromAttributeValue = ( colors, attributeValue ) => {
-	const attributeParsed = /var\(--wp--colors--(.*)\)/.exec( attributeValue );
+const getColorFromAttributeValue = (
+	colors,
+	namedAttributeValue,
+	styleAttributeValue
+) => {
+	const attributeParsed = /var:colors\|(.+)/.exec( styleAttributeValue );
 	return getColorObjectByAttributeValues(
 		colors,
-		attributeParsed && attributeParsed[ 1 ],
-		attributeValue
+		namedAttributeValue || ( attributeParsed && attributeParsed[ 1 ] ),
+		styleAttributeValue
 	).color;
 };
 /**
@@ -136,9 +174,19 @@ const getColorFromAttributeValue = ( colors, attributeValue ) => {
  */
 export function ColorEdit( props ) {
 	const { name: blockName, attributes } = props;
-	const { colors, gradients } = useSelect( ( select ) => {
-		return select( 'core/block-editor' ).getSettings();
-	}, [] );
+	const { colorsSetting, colorsGlobalStyles, gradients } = useSelect(
+		( select ) => {
+			const settings = select( 'core/block-editor' ).getSettings();
+			return {
+				colorsSetting: settings.colors,
+				colorsGlobalStyles:
+					settings.__experimentalGlobalStylesBase?.colors,
+				gradients: settings.gradients,
+			};
+		},
+		[]
+	);
+	const colors = colorsGlobalStyles || colorsSetting;
 	// Shouldn't be needed but right now the ColorGradientsPanel
 	// can trigger both onChangeColor and onChangeBackground
 	// synchronously causing our two callbacks to override changes
@@ -154,7 +202,7 @@ export function ColorEdit( props ) {
 
 	const hasGradient = hasGradientSupport( blockName );
 
-	const { style, gradient } = attributes;
+	const { style, textColor, backgroundColor, gradient } = attributes;
 	let gradientValue;
 	if ( hasGradient && gradient ) {
 		gradientValue = getGradientValueBySlug( gradients, gradient );
@@ -164,18 +212,21 @@ export function ColorEdit( props ) {
 
 	const onChangeColor = ( name ) => ( value ) => {
 		const colorObject = getColorObjectByColorValue( colors, value );
+		const attributeName = name + 'Color';
 		const newStyle = {
 			...localAttributes.current.style,
 			color: {
 				...localAttributes.current?.style?.color,
 				[ name ]: colorObject?.slug
-					? `var(--wp--colors--${ colorObject?.slug })`
+					? colorsGlobalStyles && `var:colors|${ colorObject?.slug }`
 					: value,
 			},
 		};
 
+		const newNamedColor = colorObject?.slug ? colorObject.slug : undefined;
 		const newAttributes = {
 			style: cleanEmptyObject( newStyle ),
+			[ attributeName ]: colorsGlobalStyles ? undefined : newNamedColor,
 		};
 
 		props.setAttributes( newAttributes );
@@ -227,12 +278,14 @@ export function ColorEdit( props ) {
 				Platform.OS === 'web' && ! gradient && ! style?.color?.gradient
 			}
 			clientId={ props.clientId }
+			colors={ colors }
 			settings={ [
 				{
 					label: __( 'Text Color' ),
 					onColorChange: onChangeColor( 'text' ),
 					colorValue: getColorFromAttributeValue(
 						colors,
+						textColor,
 						style?.color?.text
 					),
 				},
@@ -241,6 +294,7 @@ export function ColorEdit( props ) {
 					onColorChange: onChangeColor( 'background' ),
 					colorValue: getColorFromAttributeValue(
 						colors,
+						backgroundColor,
 						style?.color?.background
 					),
 					gradientValue,
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index f23a5c2612e2bc..da109980d187b1 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { has, get } from 'lodash';
+import { has, get, startsWith } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,6 +35,22 @@ const typographySupportKeys = [
 const hasStyleSupport = ( blockType ) =>
 	styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) );
 
+const VARIABLE_REFERENCE_PREFIX = 'var:';
+const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
+const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
+function compileStyleValue( uncompiledValue ) {
+	if ( startsWith( uncompiledValue, VARIABLE_REFERENCE_PREFIX ) ) {
+		const variable = uncompiledValue
+			.slice( VARIABLE_REFERENCE_PREFIX.length )
+			.replace(
+				VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,
+				VARIABLE_PATH_SEPARATOR_TOKEN_STYLE
+			);
+		return `var(--wp--${ variable })`;
+	}
+	return uncompiledValue;
+}
+
 /**
  * Returns the inline styles to add depending on the style object
  *
@@ -53,7 +69,7 @@ export function getInlineStyles( styles = {} ) {
 	const output = {};
 	Object.entries( mappings ).forEach( ( [ styleKey, objectKey ] ) => {
 		if ( has( styles, objectKey ) ) {
-			output[ styleKey ] = get( styles, objectKey );
+			output[ styleKey ] = compileStyleValue( get( styles, objectKey ) );
 		}
 	} );
 
diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js
index 696df9e57bed43..34b3076904a63f 100644
--- a/packages/block-library/src/columns/deprecated.js
+++ b/packages/block-library/src/columns/deprecated.js
@@ -39,34 +39,18 @@ function getDeprecatedLayoutColumn( originalContent ) {
 }
 
 const migrateCustomColors = ( attributes ) => {
-	if (
-		! attributes.textColor &&
-		! attributes.backgroundColor &&
-		! attributes.customTextColor &&
-		! attributes.customBackgroundColor
-	) {
+	if ( ! attributes.customTextColor && ! attributes.customBackgroundColor ) {
 		return attributes;
 	}
 	const style = { color: {} };
-	if ( attributes.textColor ) {
-		style.color.text = `var(--wp--colors--${ attributes.textColor })`;
-	}
 	if ( attributes.customTextColor ) {
 		style.color.text = attributes.customTextColor;
 	}
-	if ( attributes.backgroundColor ) {
-		style.color.background = `var(--wp--colors--${ attributes.backgroundColor })`;
-	}
 	if ( attributes.customBackgroundColor ) {
 		style.color.background = attributes.customBackgroundColor;
 	}
 	return {
-		...omit( attributes, [
-			'textColor',
-			'backgroundColor',
-			'customTextColor',
-			'customBackgroundColor',
-		] ),
+		...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ),
 		style,
 	};
 };
@@ -91,14 +75,6 @@ export default [
 			},
 		},
 		migrate: migrateCustomColors,
-		isEligible( attribute ) {
-			return (
-				attribute.textColor ||
-				attribute.customTextColor ||
-				attribute.backgroundColor ||
-				attribute.customBackgroundColor
-			);
-		},
 		save( { attributes } ) {
 			const {
 				verticalAlignment,
diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js
index 033ffd9e4a9e10..3e6d394197ffd6 100644
--- a/packages/block-library/src/group/deprecated.js
+++ b/packages/block-library/src/group/deprecated.js
@@ -17,34 +17,18 @@ const migrateAttributes = ( attributes ) => {
 		};
 	}
 
-	if (
-		! attributes.textColor &&
-		! attributes.backgroundColor &&
-		! attributes.customTextColor &&
-		! attributes.customBackgroundColor
-	) {
+	if ( ! attributes.customTextColor && ! attributes.customBackgroundColor ) {
 		return attributes;
 	}
 	const style = { color: {} };
-	if ( attributes.textColor ) {
-		style.color.text = `var(--wp--colors--${ attributes.textColor })`;
-	}
 	if ( attributes.customTextColor ) {
 		style.color.text = attributes.customTextColor;
 	}
-	if ( attributes.backgroundColor ) {
-		style.color.background = `var(--wp--colors--${ attributes.backgroundColor })`;
-	}
 	if ( attributes.customBackgroundColor ) {
 		style.color.background = attributes.customBackgroundColor;
 	}
 	return {
-		...omit( attributes, [
-			'textColor',
-			'backgroundColor',
-			'customTextColor',
-			'customBackgroundColor',
-		] ),
+		...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ),
 		style,
 	};
 };
@@ -71,14 +55,6 @@ const deprecated = [
 			anchor: true,
 			html: false,
 		},
-		isEligible( attribute ) {
-			return (
-				attribute.textColor ||
-				attribute.customTextColor ||
-				attribute.backgroundColor ||
-				attribute.customBackgroundColor
-			);
-		},
 		migrate: migrateAttributes,
 		save( { attributes } ) {
 			const {
diff --git a/packages/block-library/src/heading/deprecated.js b/packages/block-library/src/heading/deprecated.js
index 05c6218f1186ab..7a43fc9d5b8689 100644
--- a/packages/block-library/src/heading/deprecated.js
+++ b/packages/block-library/src/heading/deprecated.js
@@ -34,19 +34,16 @@ const blockAttributes = {
 };
 
 const migrateCustomColors = ( attributes ) => {
-	if ( ! attributes.textColor && ! attributes.customTextColor ) {
+	if ( ! attributes.customTextColor ) {
 		return attributes;
 	}
 	const style = {
 		color: {
-			text: attributes.textColor
-				? `var(--wp--colors--${ attributes.textColor })`
-				: attributes.customTextColor,
+			text: attributes.customTextColor,
 		},
 	};
-
 	return {
-		...omit( attributes, [ 'textColor', 'customTextColor' ] ),
+		...omit( attributes, [ 'customTextColor' ] ),
 		style,
 	};
 };
@@ -64,9 +61,6 @@ const deprecated = [
 			},
 		},
 		migrate: migrateCustomColors,
-		isEligible( attribute ) {
-			return attribute.textColor || attribute.customTextColor;
-		},
 		save( { attributes } ) {
 			const {
 				align,
diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
index c509d89de3b1ed..cd06840df83df6 100644
--- a/packages/block-library/src/media-text/deprecated.js
+++ b/packages/block-library/src/media-text/deprecated.js
@@ -17,18 +17,16 @@ import { imageFillStyles } from './media-container';
 const DEFAULT_MEDIA_WIDTH = 50;
 
 const migrateCustomColors = ( attributes ) => {
-	if ( ! attributes.backgroundColor && ! attributes.customBackgroundColor ) {
+	if ( ! attributes.customBackgroundColor ) {
 		return attributes;
 	}
 	const style = {
 		color: {
-			background: attributes.backgroundColor
-				? `var(--wp--colors--${ attributes.backgroundColor })`
-				: attributes.customBackgroundColor,
+			background: attributes.customBackgroundColor,
 		},
 	};
 	return {
-		...omit( attributes, [ 'backgroundColor', 'customBackgroundColor' ] ),
+		...omit( attributes, [ 'customBackgroundColor' ] ),
 		style,
 	};
 };
@@ -72,9 +70,6 @@ export default [
 	{
 		attributes: {
 			...baseAttributes,
-			backgroundColor: {
-				type: 'string',
-			},
 			customBackgroundColor: {
 				type: 'string',
 			},
@@ -119,9 +114,6 @@ export default [
 			},
 		},
 		migrate: migrateCustomColors,
-		isEligible( attribute ) {
-			return attribute.backgroundColor || attribute.customBackgroundColor;
-		},
 		save( { attributes } ) {
 			const {
 				backgroundColor,
diff --git a/packages/block-library/src/paragraph/deprecated.js b/packages/block-library/src/paragraph/deprecated.js
index 3590dd3efdee6e..24896a034207d0 100644
--- a/packages/block-library/src/paragraph/deprecated.js
+++ b/packages/block-library/src/paragraph/deprecated.js
@@ -55,8 +55,6 @@ const blockAttributes = {
 
 const migrateCustomColorsAndFontSizes = ( attributes ) => {
 	if (
-		! attributes.textColor &&
-		! attributes.backgroundColor &&
 		! attributes.customTextColor &&
 		! attributes.customBackgroundColor &&
 		! attributes.customFontSize
@@ -64,23 +62,12 @@ const migrateCustomColorsAndFontSizes = ( attributes ) => {
 		return attributes;
 	}
 	const style = {};
-	if (
-		attributes.textColor ||
-		attributes.backgroundColor ||
-		attributes.customTextColor ||
-		attributes.customBackgroundColor
-	) {
+	if ( attributes.customTextColor || attributes.customBackgroundColor ) {
 		style.color = {};
 	}
-	if ( attributes.textColor ) {
-		style.color.text = `var(--wp--colors--${ attributes.textColor })`;
-	}
 	if ( attributes.customTextColor ) {
 		style.color.text = attributes.customTextColor;
 	}
-	if ( attributes.backgroundColor ) {
-		style.color.background = `var(--wp--colors--${ attributes.backgroundColor })`;
-	}
 	if ( attributes.customBackgroundColor ) {
 		style.color.background = attributes.customBackgroundColor;
 	}
@@ -89,8 +76,6 @@ const migrateCustomColorsAndFontSizes = ( attributes ) => {
 	}
 	return {
 		...omit( attributes, [
-			'textColor',
-			'backgroundColor',
 			'customTextColor',
 			'customBackgroundColor',
 			'customFontSize',
@@ -104,15 +89,9 @@ const deprecated = [
 		supports,
 		attributes: {
 			...omit( blockAttributes, [ 'style' ] ),
-			textColor: {
-				type: 'string',
-			},
 			customTextColor: {
 				type: 'string',
 			},
-			backgroundColor: {
-				type: 'string',
-			},
 			customBackgroundColor: {
 				type: 'string',
 			},
@@ -121,15 +100,6 @@ const deprecated = [
 			},
 		},
 		migrate: migrateCustomColorsAndFontSizes,
-		isEligible( attribute ) {
-			return (
-				attribute.textColor ||
-				attribute.customTextColor ||
-				attribute.backgroundColor ||
-				attribute.customBackgroundColor ||
-				attribute.customFontSize
-			);
-		},
 		save( { attributes } ) {
 			const {
 				align,
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.json b/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.json
index 7a729f8554e6b7..7bfd9dafac7069 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.json
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.json
@@ -4,8 +4,8 @@
         "name": "core/group",
         "isValid": true,
         "attributes": {
-            "tagName": "div",
-            "className": "has-text-color"
+            "textColor": "accent",
+            "tagName": "div"
         },
         "innerBlocks": [
             {
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.serialized.html b/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.serialized.html
index 4b705631322654..cf7ebe4f5a05ec 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated-2.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:group {"className":"has-text-color"} -->
-<div class="wp-block-group has-text-color"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
+<!-- wp:group {"textColor":"accent"} -->
+<div class="wp-block-group has-accent-color has-text-color"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
 <p>My paragraph</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:group -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json
index ed7eae35f0032f..7f1f51c3644e40 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json
@@ -4,14 +4,10 @@
         "name": "core/group",
         "isValid": true,
         "attributes": {
+            "backgroundColor": "lighter-blue",
             "align": "full",
             "anchor": "test-id",
-            "tagName": "div",
-            "style": {
-                "color": {
-                    "background": "var(--wp--colors--lighter-blue)"
-                }
-            }
+            "tagName": "div"
         },
         "innerBlocks": [
             {
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html
index 2ac6b79311bd27..b9f1dc3ba37e12 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:group {"align":"full","style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dlighter-blue)"}}} -->
-<div class="wp-block-group alignfull has-background" id="test-id" style="background-color:var(--wp--colors--lighter-blue)"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
+<!-- wp:group {"align":"full","backgroundColor":"lighter-blue"} -->
+<div class="wp-block-group alignfull has-lighter-blue-background-color has-background" id="test-id"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
 <p>test</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:group -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.json b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.json
index 59c8a35752e0ac..ce277ddce36e74 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.json
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.json
@@ -6,7 +6,7 @@
         "attributes": {
             "content": "text",
             "level": 2,
-            "className": "has-accent-color"
+            "textColor": "accent"
         },
         "innerBlocks": [],
         "originalContent": "<h2 class=\"has-accent-color\">text</h2>"
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.serialized.html b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.serialized.html
index 4762f9c1175c0f..1dbaea2593eb91 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__deprecated-2.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:heading {"className":"has-accent-color"} -->
-<h2 class="has-accent-color">text</h2>
+<!-- wp:heading {"textColor":"accent"} -->
+<h2 class="has-accent-color has-text-color">text</h2>
 <!-- /wp:heading -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.html b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.html
index ac1ded6315b316..79413d0a2fec60 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.html
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.html
@@ -1,3 +1,3 @@
-<!-- wp:heading {"style":{"color":{"text":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002daccent)"}}} -->
+<!-- wp:heading {"style":{"color":{"text":"var:colors|accent"}}} -->
 <h2 class="has-text-color" style="color:var(--wp--colors--accent)">Text</h2>
 <!-- /wp:heading -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json
index f2dd74e7cce244..5315e15e759426 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json
@@ -8,7 +8,7 @@
             "level": 2,
             "style": {
                 "color": {
-                    "text": "var(--wp--colors--accent)"
+                    "text": "var:colors|accent"
                 }
             }
         },
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.parsed.json b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.parsed.json
index d68e52290c3715..6a8cc0735323ce 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.parsed.json
@@ -4,7 +4,7 @@
         "attrs": {
             "style": {
                 "color": {
-                    "text": "var(--wp--colors--accent)"
+                    "text": "var:colors|accent"
                 }
             }
         },
diff --git a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.serialized.html b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.serialized.html
index ac1ded6315b316..79413d0a2fec60 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:heading {"style":{"color":{"text":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002daccent)"}}} -->
+<!-- wp:heading {"style":{"color":{"text":"var:colors|accent"}}} -->
 <h2 class="has-text-color" style="color:var(--wp--colors--accent)">Text</h2>
 <!-- /wp:heading -->
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
index ec6e5091856e9a..c8edb2f56cf352 100644
--- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
+++ b/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
@@ -19,8 +19,8 @@ exports[`Heading it should correctly apply custom colors 1`] = `
 `;
 
 exports[`Heading it should correctly apply named colors 1`] = `
-"<!-- wp:heading {\\"style\\":{\\"color\\":{\\"text\\":\\"var(\\\\u002d\\\\u002dwp\\\\u002d\\\\u002dcolors\\\\u002d\\\\u002dluminous-vivid-orange)\\"}}} -->
-<h2 class=\\"has-text-color\\" style=\\"color:var(--wp--colors--luminous-vivid-orange)\\">Heading</h2>
+"<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
+<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
 <!-- /wp:heading -->"
 `;