Why We Chose OKLCH for Our Theme System
How we built a perceptually uniform color system for 12 themes using OKLCH — and why it matters for your UI.
The Color Problem
Most shadcn/ui themes use HSL colors. This works, but HSL has a fundamental flaw: equal steps in lightness don't look equal to the human eye. A 50% lightness blue looks dramatically different from a 50% lightness yellow.
Enter OKLCH
OKLCH (OK Lightness Chroma Hue) is a perceptually uniform color space. This means:
- L = 0.5 looks like "medium brightness" for every hue
- Equal chroma values produce equally vibrant colors across the spectrum
- Interpolation between colors looks natural
Our Token Architecture
Every UI Anvil theme defines 33 tokens per mode (light and dark):
- 20 core UI tokens — background, foreground, card, primary, secondary, muted, accent, destructive, border, input, ring
- 5 chart tokens — for data visualization consistency
- 8 sidebar tokens — for independent sidebar theming
Example: Obsidian Theme
/ Dark mode /
--background: oklch(0.07 0 0); / Near black /
--primary: oklch(0.76 0.12 80); / Warm gold /
--accent: oklch(0.62 0.11 75); / Deeper gold /
The gold accent at hue 80 with chroma 0.12 gives a warm, premium feel without being garish. Because OKLCH is perceptually uniform, the lightness difference between primary (0.76) and accent (0.62) is visually consistent.
Try the Themes
Browse all 12 themes in the Theme Vault and see OKLCH in action.