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 c4f80ff9c02ef0..73202e2d195977 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -56,6 +56,8 @@ 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, {
@@ -151,6 +153,18 @@ export function addEditProps( settings ) {
 	return settings;
 }
 
+const getColorFromAttributeValue = (
+	colors,
+	namedAttributeValue,
+	styleAttributeValue
+) => {
+	const attributeParsed = /var:colors\|(.+)/.exec( styleAttributeValue );
+	return getColorObjectByAttributeValues(
+		colors,
+		namedAttributeValue || ( attributeParsed && attributeParsed[ 1 ] ),
+		styleAttributeValue
+	).color;
+};
 /**
  * Inspector control panel containing the color related configuration
  *
@@ -160,9 +174,19 @@ export function addEditProps( settings ) {
  */
 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
@@ -193,14 +217,16 @@ export function ColorEdit( props ) {
 			...localAttributes.current.style,
 			color: {
 				...localAttributes.current?.style?.color,
-				[ name ]: colorObject?.slug ? undefined : value,
+				[ name ]: colorObject?.slug
+					? colorsGlobalStyles && `var:colors|${ colorObject?.slug }`
+					: value,
 			},
 		};
 
 		const newNamedColor = colorObject?.slug ? colorObject.slug : undefined;
 		const newAttributes = {
 			style: cleanEmptyObject( newStyle ),
-			[ attributeName ]: newNamedColor,
+			[ attributeName ]: colorsGlobalStyles ? undefined : newNamedColor,
 		};
 
 		props.setAttributes( newAttributes );
@@ -252,24 +278,25 @@ export function ColorEdit( props ) {
 				Platform.OS === 'web' && ! gradient && ! style?.color?.gradient
 			}
 			clientId={ props.clientId }
+			colors={ colors }
 			settings={ [
 				{
 					label: __( 'Text Color' ),
 					onColorChange: onChangeColor( 'text' ),
-					colorValue: getColorObjectByAttributeValues(
+					colorValue: getColorFromAttributeValue(
 						colors,
 						textColor,
 						style?.color?.text
-					).color,
+					),
 				},
 				{
 					label: __( 'Background Color' ),
 					onColorChange: onChangeColor( 'background' ),
-					colorValue: getColorObjectByAttributeValues(
+					colorValue: getColorFromAttributeValue(
 						colors,
 						backgroundColor,
 						style?.color?.background
-					).color,
+					),
 					gradientValue,
 					onGradientChange: hasGradient
 						? onChangeGradient
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/e2e-tests/fixtures/blocks/core__columns.html b/packages/e2e-tests/fixtures/blocks/core__columns.html
index 89383b93f3ad15..3572ed4bddc02f 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.html
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.html
@@ -1,20 +1,23 @@
-<!-- wp:columns {"backgroundColor":"secondary"} -->
-<div class="wp-block-columns has-background has-secondary-background-color">
+<!-- wp:columns {"style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dsecondary)"}}} -->
+<div class="wp-block-columns has-background" style="background-color:var(--wp--colors--secondary)">
 	<!-- wp:column -->
 	<div class="wp-block-column">
 		<!-- wp:paragraph -->
 		<p>Column One, Paragraph One</p>
 		<!-- /wp:paragraph -->
+
 		<!-- wp:paragraph -->
 		<p>Column One, Paragraph Two</p>
 		<!-- /wp:paragraph -->
 	</div>
 	<!-- /wp:column -->
+
 	<!-- wp:column -->
 	<div class="wp-block-column">
 		<!-- wp:paragraph -->
 		<p>Column Two, Paragraph One</p>
 		<!-- /wp:paragraph -->
+
 		<!-- wp:paragraph -->
 		<p>Column Three, Paragraph One</p>
 		<!-- /wp:paragraph -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.json b/packages/e2e-tests/fixtures/blocks/core__columns.json
index 9741c4ee472aa1..355ea63438e383 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.json
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.json
@@ -4,7 +4,11 @@
         "name": "core/columns",
         "isValid": true,
         "attributes": {
-            "backgroundColor": "secondary"
+            "style": {
+                "color": {
+                    "background": "var(--wp--colors--secondary)"
+                }
+            }
         },
         "innerBlocks": [
             {
@@ -36,7 +40,7 @@
                         "originalContent": "<p>Column One, Paragraph Two</p>"
                     }
                 ],
-                "originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>"
+                "originalContent": "<div class=\"wp-block-column\">\n\t\t\n\n\t\t\n\t</div>"
             },
             {
                 "clientId": "_clientId_1",
@@ -67,9 +71,9 @@
                         "originalContent": "<p>Column Three, Paragraph One</p>"
                     }
                 ],
-                "originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>"
+                "originalContent": "<div class=\"wp-block-column\">\n\t\t\n\n\t\t\n\t</div>"
             }
         ],
-        "originalContent": "<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t\n\t\n</div>"
+        "originalContent": "<div class=\"wp-block-columns has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t\n\n\t\n</div>"
     }
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json b/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json
index dec57c6e19e396..e79cccb23d257d 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json
@@ -2,7 +2,11 @@
     {
         "blockName": "core/columns",
         "attrs": {
-            "backgroundColor": "secondary"
+            "style": {
+                "color": {
+                    "background": "var(--wp--colors--secondary)"
+                }
+            }
         },
         "innerBlocks": [
             {
@@ -28,11 +32,11 @@
                         ]
                     }
                 ],
-                "innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>\n\t",
+                "innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\n\t\t\n\t</div>\n\t",
                 "innerContent": [
                     "\n\t<div class=\"wp-block-column\">\n\t\t",
                     null,
-                    "\n\t\t",
+                    "\n\n\t\t",
                     null,
                     "\n\t</div>\n\t"
                 ]
@@ -60,21 +64,21 @@
                         ]
                     }
                 ],
-                "innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>\n\t",
+                "innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\n\t\t\n\t</div>\n\t",
                 "innerContent": [
                     "\n\t<div class=\"wp-block-column\">\n\t\t",
                     null,
-                    "\n\t\t",
+                    "\n\n\t\t",
                     null,
                     "\n\t</div>\n\t"
                 ]
             }
         ],
-        "innerHTML": "\n<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t\n\t\n</div>\n",
+        "innerHTML": "\n<div class=\"wp-block-columns has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t\n\n\t\n</div>\n",
         "innerContent": [
-            "\n<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t",
+            "\n<div class=\"wp-block-columns has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t",
             null,
-            "\n\t",
+            "\n\n\t",
             null,
             "\n</div>\n"
         ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html b/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html
index 2b95373d1a7b83..2f5f2ed39e1309 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:columns {"backgroundColor":"secondary"} -->
-<div class="wp-block-columns has-secondary-background-color has-background"><!-- wp:column -->
+<!-- wp:columns {"style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dsecondary)"}}} -->
+<div class="wp-block-columns has-background" style="background-color:var(--wp--colors--secondary)"><!-- wp:column -->
 <div class="wp-block-column"><!-- wp:paragraph -->
 <p>Column One, Paragraph One</p>
 <!-- /wp:paragraph -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__group.html b/packages/e2e-tests/fixtures/blocks/core__group.html
index e5df0f2fce926a..0e09be9baf6bbe 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group.html
+++ b/packages/e2e-tests/fixtures/blocks/core__group.html
@@ -1,5 +1,5 @@
-<!-- wp:group {"align":"full","backgroundColor":"secondary"} -->
-<div class="wp-block-group alignfull has-secondary-background-color has-background">
+<!-- wp:group {"align":"full","style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dsecondary)"}}} -->
+<div class="wp-block-group alignfull has-background" style="background-color:var(--wp--colors--secondary)">
 	<div class="wp-block-group__inner-container">
 		<!-- wp:paragraph -->
 		<p>This is a group block.</p>
@@ -7,6 +7,7 @@
 
 		<!-- wp:paragraph -->
 		<p>Group block content.</p>
-		<!-- /wp:paragraph --></div>
+		<!-- /wp:paragraph -->
 	</div>
+</div>
 <!-- /wp:group -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__group.json b/packages/e2e-tests/fixtures/blocks/core__group.json
index 526a8d70fbcdfa..5d6961dab3f8d2 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group.json
+++ b/packages/e2e-tests/fixtures/blocks/core__group.json
@@ -6,7 +6,11 @@
         "attributes": {
             "tagName": "div",
             "align": "full",
-            "backgroundColor": "secondary"
+            "style": {
+                "color": {
+                    "background": "var(--wp--colors--secondary)"
+                }
+            }
         },
         "innerBlocks": [
             {
@@ -32,6 +36,6 @@
                 "originalContent": "<p>Group block content.</p>"
             }
         ],
-        "originalContent": "<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t\n\n\t\t</div>\n\t</div>"
+        "originalContent": "<div class=\"wp-block-group alignfull has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t\n\n\t\t\n\t</div>\n</div>"
     }
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__group.parsed.json b/packages/e2e-tests/fixtures/blocks/core__group.parsed.json
index ba86ac5a02d6bd..801d207fa08855 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__group.parsed.json
@@ -3,7 +3,11 @@
         "blockName": "core/group",
         "attrs": {
             "align": "full",
-            "backgroundColor": "secondary"
+            "style": {
+                "color": {
+                    "background": "var(--wp--colors--secondary)"
+                }
+            }
         },
         "innerBlocks": [
             {
@@ -25,13 +29,13 @@
                 ]
             }
         ],
-        "innerHTML": "\n<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t\n\n\t\t</div>\n\t</div>\n",
+        "innerHTML": "\n<div class=\"wp-block-group alignfull has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t\n\n\t\t\n\t</div>\n</div>\n",
         "innerContent": [
-            "\n<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t",
+            "\n<div class=\"wp-block-group alignfull has-background\" style=\"background-color:var(--wp--colors--secondary)\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t",
             null,
             "\n\n\t\t",
             null,
-            "</div>\n\t</div>\n"
+            "\n\t</div>\n</div>\n"
         ]
     },
     {
diff --git a/packages/e2e-tests/fixtures/blocks/core__group.serialized.html b/packages/e2e-tests/fixtures/blocks/core__group.serialized.html
index 8ac236255f9f61..fd196a7e180785 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__group.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:group {"align":"full","backgroundColor":"secondary"} -->
-<div class="wp-block-group alignfull has-secondary-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
+<!-- wp:group {"align":"full","style":{"color":{"background":"var(\u002d\u002dwp\u002d\u002dcolors\u002d\u002dsecondary)"}}} -->
+<div class="wp-block-group alignfull has-background" style="background-color:var(--wp--colors--secondary)"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
 <p>This is a group block.</p>
 <!-- /wp:paragraph -->
 
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 23c39f701c7651..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,4 +1,3 @@
-<!-- wp:heading {"textColor":"accent"} -->
-<h2 class="has-accent-color has-text-color">Text</h2>
+<!-- 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 6924638cf64666..5315e15e759426 100644
--- a/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json
+++ b/packages/e2e-tests/fixtures/blocks/core__heading__h2-color.json
@@ -6,9 +6,13 @@
         "attributes": {
             "content": "Text",
             "level": 2,
-            "textColor": "accent"
+            "style": {
+                "color": {
+                    "text": "var:colors|accent"
+                }
+            }
         },
         "innerBlocks": [],
-        "originalContent": "<h2 class=\"has-accent-color has-text-color\">Text</h2>"
+        "originalContent": "<h2 class=\"has-text-color\" style=\"color:var(--wp--colors--accent)\">Text</h2>"
     }
 ]
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 42bb5549b7cf72..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
@@ -2,21 +2,25 @@
     {
         "blockName": "core/heading",
         "attrs": {
-            "textColor": "accent"
+            "style": {
+                "color": {
+                    "text": "var:colors|accent"
+                }
+            }
         },
         "innerBlocks": [],
-        "innerHTML": "\n<h2 class=\"has-accent-color has-text-color\">Text</h2>\n",
+        "innerHTML": "\n<h2 class=\"has-text-color\" style=\"color:var(--wp--colors--accent)\">Text</h2>\n",
         "innerContent": [
-            "\n<h2 class=\"has-accent-color has-text-color\">Text</h2>\n"
+            "\n<h2 class=\"has-text-color\" style=\"color:var(--wp--colors--accent)\">Text</h2>\n"
         ]
     },
     {
         "blockName": null,
         "attrs": {},
         "innerBlocks": [],
-        "innerHTML": "\n\n",
+        "innerHTML": "\n",
         "innerContent": [
-            "\n\n"
+            "\n"
         ]
     }
 ]
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 862a62b2d79751..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 {"textColor":"accent"} -->
-<h2 class="has-accent-color has-text-color">Text</h2>
+<!-- wp:heading {"style":{"color":{"text":"var:colors|accent"}}} -->
+<h2 class="has-text-color" style="color:var(--wp--colors--accent)">Text</h2>
 <!-- /wp:heading -->