diff --git a/packages/studio/src/components/semantic-color.tsx b/packages/studio/src/components/semantic-color.tsx
index ea8ce5d57..73863cd8d 100644
--- a/packages/studio/src/components/semantic-color.tsx
+++ b/packages/studio/src/components/semantic-color.tsx
@@ -4,7 +4,7 @@ import { ColorWrapper } from './color-wrapper'
 import * as context from '../lib/panda-context'
 
 const getSemanticColorValue = (variable: string): string => {
-  const _name = variable.match(/var\(\s*--(.*?)\s*\)/)
+  const _name = variable?.match(/var\(\s*--(.*?)\s*\)/)
   if (!_name) return variable
 
   const name = _name[1].replaceAll('-', '.')