The problem with HSL
If you've built design systems, you've probably reached for HSL. It feels intuitive: hue, saturation, lightness — like a natural language for color. And for simple things, it works fine.
But here's the catch: HSL's lightness values are not perceptually uniform. Set two colors to the exact same saturation and lightness — say, hsl(60, 100%, 50%) for yellow and hsl(240, 100%, 50%) for blue — and look at them side by side. The yellow blazes. The blue sits quietly. They are mathematically identical, but your eyes process them as completely different weights.
This becomes a real problem when you're building color scales, generating harmonies, or interpolating gradients. The output looks inconsistent, and the only fix is fiddling with values by eye until it feels right — a process that breaks every time the design changes.
What OKLCH actually is
OKLCH is a polar form of the Oklab color space, which was designed from the ground up to match how human vision perceives color. The three values are:
- L — Perceived lightness, from 0 (black) to 1 (white)
- C — Chroma (colorfulness), from 0 (grey) upward
- H — Hue angle, 0–360°
The key word is perceived. OKLCH L 0.7 actually looks equally bright regardless of which hue you're using. Yellow at 0.7, blue at 0.7, red at 0.7 — your eye reads them as the same visual weight. This is not true of HSL, RGB, or most other color spaces.
What this means for design systems
Perceptual uniformity changes what's possible:
- Color scales that hold — Generate a 50–950 scale in OKLCH and the steps genuinely progress evenly. No more manually nudging individual steps until they look right.
- Harmonies that match — A complementary pair in OKLCH has matched visual weight by default. You're not fighting the math to get balance.
- Gradients without grey muddle — RGB and HSL gradients often develop grey, desaturated midpoints (the "grey corridor" problem). OKLCH interpolation stays vibrant all the way through.
- Dark mode that actually works — Same hue, adjusted L and C. The relationship between your colors is preserved, not scrambled.
How to use it in CSS today
OKLCH has been supported in all major browsers since mid-2023. You can use it directly in CSS without any tooling:
/* A vibrant indigo */
color: oklch(0.55 0.22 264);
/* A soft tint of the same hue */
background: oklch(0.95 0.04 264);
/* A dark variant */
border-color: oklch(0.30 0.15 264);The hue stays constant at 264 across all three. Only L and C change. This means you can build an entire design system's color ramp by just varying two values, knowing the hue will stay consistent.
How we use it at kuler.ai
Every tool on kuler.ai operates in OKLCH. When you generate color harmonies with the Palette Generator, the complementary pair is rotated exactly 180° on the OKLCH hue wheel — so the two colors have genuinely matched chroma and lightness, not just numerically but perceptually. When you build a gradient with the Gradient Maker and switch interpolation to OKLCH, you get a gradient that stays vivid from stop to stop.
When you download a palette as CSS custom properties, the values are ready to use as OKLCH in modern CSS — or as hex for tools that don't support it yet.
The irony of HSL is that it was invented to be intuitive. OKLCH is the version that actually delivers on that promise.
If you're starting a new design system, project, or color palette in 2026, OKLCH is where to start. The browsers are there. The spec is stable. And the results are noticeably better.