diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index 5847a66f8b2435..2ce58b64e43b8c 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -26,8 +26,3 @@ $light-gray-placeholder: rgba($white, 0.65);
 $alert-yellow: #f0b849;
 $alert-red: #cc1818;
 $alert-green: #4ab866;
-
-:root {
-	--wp-block-synced-color: #7a00df;
-	--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
-}
diff --git a/packages/base-styles/_default-custom-properties.scss b/packages/base-styles/_default-custom-properties.scss
index 9f2979ea039bbb..52dfeb3899d772 100644
--- a/packages/base-styles/_default-custom-properties.scss
+++ b/packages/base-styles/_default-custom-properties.scss
@@ -4,4 +4,6 @@
 // It also provides default CSS variables for npm package consumers.
 :root {
 	@include admin-scheme(#007cba);
+	--wp-block-synced-color: #7a00df;
+	--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
 }