diff --git a/.changeset/silly-years-search.md b/.changeset/silly-years-search.md
new file mode 100644
index 00000000000..013a6e4abe2
--- /dev/null
+++ b/.changeset/silly-years-search.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Updated logic for rendering `color` custom property previews in `TokenList`
diff --git a/polaris.shopify.com/src/components/TokenList/TokenList.tsx b/polaris.shopify.com/src/components/TokenList/TokenList.tsx
index 65878bb082f..fdf435dbf71 100644
--- a/polaris.shopify.com/src/components/TokenList/TokenList.tsx
+++ b/polaris.shopify.com/src/components/TokenList/TokenList.tsx
@@ -232,7 +232,7 @@ function TokenPreview({name, value}: TokenPreviewProps) {
   };
 
   // Colors
-  if (value.startsWith('rgba')) {
+  if (value.startsWith('rgba') || value.includes('color-')) {
     return (
       <div
         {...previewDivAttributes}