diff --git a/bin/ret.d.ts b/bin/ret.d.ts
index 5acec92a..400388a2 100644
--- a/bin/ret.d.ts
+++ b/bin/ret.d.ts
@@ -1,6 +1,6 @@
 
 
-import type { RadiiValue, SizesValue, SpaceValue } from './Token';
+import type { ColorsValue, RadiiValue, SizesValue, SpaceValue } from './Token';
 
 export interface ThemedTypings {
   
@@ -8,7 +8,7 @@ export interface ThemedTypings {
 
 
 
-colors: "white" | "black" | "transparent" | "gray50" | "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "violet50" | "violet100" | "violet200" | "violet300" | "violet400" | "violet500" | "violet600" | "violet700" | "violet800" | "violet900" | "green50" | "green100" | "green200" | "green300" | "green400" | "green500" | "green600" | "yellow50" | "yellow100" | "yellow200" | "yellow300" | "yellow400" | "yellow500" | "yellow600" | "red50" | "red100" | "red200" | "red300" | "red400" | "red500" | "red600" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | "blue800" | "blue900" 
+colors: ColorsValue |  "white" | "black" | "transparent" | "gray50" | "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "violet50" | "violet100" | "violet200" | "violet300" | "violet400" | "violet500" | "violet600" | "violet700" | "violet800" | "violet900" | "green50" | "green100" | "green200" | "green300" | "green400" | "green500" | "green600" | "yellow50" | "yellow100" | "yellow200" | "yellow300" | "yellow400" | "yellow500" | "yellow600" | "red50" | "red100" | "red200" | "red300" | "red400" | "red500" | "red600" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | "blue800" | "blue900" 
 
 
 
diff --git a/bin/theme-gen.mjs b/bin/theme-gen.mjs
index ee0c3d4d..45ca5758 100755
--- a/bin/theme-gen.mjs
+++ b/bin/theme-gen.mjs
@@ -147,7 +147,7 @@ try {
   let result = read(tmpFile);
   result = result.replace(
     /import.*/,
-    "import type { RadiiValue, SizesValue, SpaceValue } from './Token';\n",
+    "import type { ColorsValue, RadiiValue, SizesValue, SpaceValue } from './Token';\n",
   );
   result = result.replace(/export.*/, 'export interface ThemedTypings {');
   result = result.replace(/\/\/.*/g, '');
@@ -185,6 +185,11 @@ try {
     'radii:',
     'radii: RadiiValue | `${number}` | `${number}px` | `${any}px` | ',
   );
+  
+  result = result.replace(
+    'colors:',
+    'colors: ColorsValue | ',
+  );
 
   result = result.replace(/\|[\s ]*\n/g, ';');
 
diff --git a/src/hook/useSx.test.ts b/src/hook/useSx.test.ts
index ddbf6f03..bfb8b2fd 100644
--- a/src/hook/useSx.test.ts
+++ b/src/hook/useSx.test.ts
@@ -51,6 +51,7 @@ describe('simple usages', () => {
 
   it('color', () => {
     expectResult(baseTheme, { bg: 'red' }, { backgroundColor: 'red' });
+    expectResult(baseTheme, { bg: '#ffffff' }, { backgroundColor: '#ffffff' });
   });
 });
 
@@ -140,6 +141,11 @@ describe('sizes parsing', () => {
 describe('shortcut priority', () => {
   it('bg', () => {
     expectResult(baseTheme, { bg: 'red', backgroundColor: 'blue' }, { backgroundColor: 'blue' });
+    expectResult(
+      baseTheme,
+      { bg: 'red', backgroundColor: '#ffffff' },
+      { backgroundColor: '#ffffff' },
+    );
   });
 
   it('w', () => {
diff --git a/src/util/propsToThemedStyle.ts b/src/util/propsToThemedStyle.ts
index 41817f30..972439bb 100644
--- a/src/util/propsToThemedStyle.ts
+++ b/src/util/propsToThemedStyle.ts
@@ -35,7 +35,11 @@ export const propsToThemedStyle = ({
       return;
     }
 
-    return theme.colors[token];
+    if (token in theme.colors) {
+      return theme.colors[token];
+    } else {
+      return token;
+    }
   };
 
   /**