diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index ce33265427dcf..57435a3f62ad2 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -187,8 +187,7 @@
 		color: $gray-600;
 
 		&.is-selected {
-			color: $gray-100; // fallback
-			color: rgba(255, 255, 255, 0.5);
+			background-color: $components-color-accent-transparent-40;
 		}
 	}
 }
diff --git a/packages/components/src/utils/theme-variables.scss b/packages/components/src/utils/theme-variables.scss
index 14e44f3ddc7d2..8c8c2d8a5633f 100644
--- a/packages/components/src/utils/theme-variables.scss
+++ b/packages/components/src/utils/theme-variables.scss
@@ -4,6 +4,10 @@
 // `--wp-admin-theme-color`. If the `--wp-admin-theme-color` variable is not
 // defined, fallback to the default theme color (WP blueberry).
 $components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+
+// Define accent color transparent variants.
+$components-color-accent-transparent-40: rgba(var(--wp-components-color-accent--rgb, var(--wp-admin-theme-color--rgb)), 0.04);
+
 $components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
 $components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));