diff --git a/packages/style-guide/package.json b/packages/style-guide/package.json
index 0e1ee48e9..d57244beb 100644
--- a/packages/style-guide/package.json
+++ b/packages/style-guide/package.json
@@ -11,6 +11,7 @@
   "scripts": {},
   "dependencies": {
     "@theme-ui/presets": "workspace:^",
+    "@theme-ui/color": "workspace:^",
     "@types/color": "^3.0.3",
     "color": "^3.1.2",
     "lodash.get": "^4.4.2"
diff --git a/packages/style-guide/src/ColorSwatch.tsx b/packages/style-guide/src/ColorSwatch.tsx
index 0577755d6..544f6d7ea 100644
--- a/packages/style-guide/src/ColorSwatch.tsx
+++ b/packages/style-guide/src/ColorSwatch.tsx
@@ -1,6 +1,7 @@
 /** @jsx jsx */
+import { getColor } from '@theme-ui/color'
 import { ComponentProps } from 'react'
-import { jsx, get, ResponsiveStyleValue } from 'theme-ui'
+import { jsx, ResponsiveStyleValue } from 'theme-ui'
 import { toHex } from './color'
 import { useTheme } from './context'
 
@@ -17,8 +18,8 @@ export const ColorSwatch = ({
   label = true,
   ...props
 }: ColorSwatchProps) => {
-  const { colors } = useTheme()!
-  const value = get(colors!, color)
+  const theme = useTheme()!
+  const value = getColor(theme, color)
   return (
     <div {...props} title={`${toHex(value)}`}>
       <div
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a20034293..d8cf44465 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -844,6 +844,7 @@ importers:
 
   packages/style-guide:
     specifiers:
+      '@theme-ui/color': workspace:^
       '@theme-ui/presets': workspace:^
       '@types/color': ^3.0.3
       '@types/react': ^18.0.8
@@ -852,6 +853,7 @@ importers:
       react: ^18
       theme-ui: workspace:^
     dependencies:
+      '@theme-ui/color': link:../color
       '@theme-ui/presets': link:../presets
       '@types/color': 3.0.3
       color: 3.2.1