diff --git a/packages/shared/src/createInterpolator.test.ts b/packages/shared/src/createInterpolator.test.ts
index a7744a0112..88fa645833 100644
--- a/packages/shared/src/createInterpolator.test.ts
+++ b/packages/shared/src/createInterpolator.test.ts
@@ -149,4 +149,13 @@ describe('Interpolation', () => {
 
     expect(interpolation(0.5)).toBe('rgba(2, 2, 2, 0.5)')
   })
+
+  it('should not match partial color names', () => {
+    const interpolation = createInterpolator({
+      range: [0, 1],
+      output: ['grayscale(0%)', 'grayscale(100%)'],
+    })
+
+    expect(interpolation(0.5)).toBe('grayscale(50%)')
+  })
 })
diff --git a/packages/shared/src/stringInterpolation.ts b/packages/shared/src/stringInterpolation.ts
index 7c54b18458..73104513b7 100644
--- a/packages/shared/src/stringInterpolation.ts
+++ b/packages/shared/src/stringInterpolation.ts
@@ -36,8 +36,10 @@ export const createStringInterpolator = (
 ) => {
   if (!namedColorRegex)
     namedColorRegex = G.colors
-      ? new RegExp(`(${Object.keys(G.colors).join('|')})`, 'g')
-      : /^\b$/ // never match
+      ? // match color names, ignore partial matches
+        new RegExp(`(${Object.keys(G.colors).join('|')})(?!\\w)`, 'g')
+      : // never match
+        /^\b$/
 
   // Convert colors to rgba(...)
   const output = config.output.map(value =>