Designing with OKLCH: A Better Color System for the Web

The Problem with HSL

HSL (Hue, Saturation, Lightness) has been the go-to color model for web developers for years. It is intuitive — pick a hue, adjust saturation and lightness. But it has a fundamental flaw: perceptual non-uniformity. Two colors with the same L value in HSL can look dramatically different in perceived brightness. Yellow at 50% lightness looks much brighter than blue at 50% lightness.

Enter OKLCH

OKLCH (Lightness, Chroma, Hue) is a perceptually uniform color space. This means that if you set two colors to the same L value, they will actually look equally bright to the human eye. This is a game-changer for building color palettes.

Want a primary palette with 11 shades from light to dark? Set the lightness values from 0.97 down to 0.20, keep the chroma consistent, and you get a perfectly graduated scale. Change the hue from 250 (blue) to 150 (green), and you have a completely different color scheme with the same visual weight and contrast ratios.

Tailwind CSS v4 Integration

Tailwind CSS v4 embraces CSS-first configuration with the @theme directive. You define your color tokens as CSS custom properties using OKLCH values, and Tailwind generates utility classes from them. The result: a theming system where changing one hue value transforms the entire site palette.

Dark Mode Made Easy

OKLCH makes dark mode implementation straightforward. Your light theme uses high lightness values for backgrounds and low for text. Dark mode simply inverts this — low lightness backgrounds, high lightness text. The chroma and hue stay the same, so your brand colors remain recognizable in both modes.

Semantic tokens bridge the gap: –background, –foreground, –primary, –muted — each maps to different OKLCH values in light and dark mode, but your components only reference the semantic names. The visual theme is fully decoupled from the component code.