OKLCH is the right color space for design systems in 2026.

If you've ever built a design system that needed a tint scale — primary-50, primary-100, … primary-900 — you've probably hit the same wall we did: the scale looks great for one hue and falls apart for the others.

The problem with sRGB and HSL

sRGB is the space your browser ships, your design tool exports, and your CSS variable likely holds. It's the lingua franca of the web — but it's perceptually nonlinear. Moving from #fafafa to #f0f0f0 reads as a clear step. Moving from #fa0000 to #f00000 reads as no step at all. HSL helps a bit, but its lightness axis is the worst of both worlds: L in HSL is bounded by gamut, not perception, so a 50% lightness blue and a 50% lightness yellow are wildly different perceived brightnesses.

Why OKLCH is different

OKLCH is a perceptually uniform color space defined in CSS Color Level 4 and supported in every modern browser since early 2024. Three components: L for lightness (0–1, perceptually linear), C for chroma (0–0.4 in practice), and H for hue (0–360°).

What this buys you in a design system:

• Tint scales that work for every hue. A 100-step lightness ramp produces visually identical perceived spacing for blue, red, and yellow.
• Predictable contrast. "Lightness 0.6" reliably gives you a color that meets AA contrast against a light-mode background, regardless of hue.
• Gamut-mapped fallbacks. Wide-gamut displays render closer to the spec value; sRGB displays gracefully clip.

What it doesn't fix

OKLCH is a coordinate system, not a magic wand. You still need to pick the colors. You still need to test for contrast in dark mode separately. Designers used to thinking in HSL will spend a week feeling lost.

But for any system shipping multiple themes — or for any palette-generator like the one in this studio — OKLCH is the right substrate.

How we use it

Our palette generator takes a brand hex, converts it to OKLCH, then walks the L axis to produce an eleven-step scale with hand-tuned chroma drift to keep the steps in gamut. The result is the palettes you see in /palettes, all of which pass AAA contrast for foreground/background pairs.