What Is OKLCH? The Modern CSS Color Format Explained
OKLCH is the color format modern design systems are moving to. It looks like HSL but fixes HSL’s biggest flaw: equal numbers don’t mean equal-looking colors. Here’s what that means in practice.
- OKLCH = Lightness, Chroma, Hue — like HSL but perceptually uniform
- Equal lightness steps in OKLCH look equally spaced to the eye; in HSL they don’t
- It can describe wide-gamut (P3) colors that HEX/RGB can’t
- Supported in all modern browsers via the oklch() CSS function
What OKLCH Stands For
OKLCH has three components: L (lightness, 0–100%), C (chroma — roughly saturation/colorfulness), and H (hue, 0–360°). If that sounds like HSL reordered, it almost is — the difference is in the math underneath. OKLCH is built on the OKLab color space, which is designed to match human vision.
The Key Idea: Perceptual Uniformity
In HSL, lightness 50% yellow looks far brighter than lightness 50% blue — equal numbers, very unequal brightness. This breaks color scales: a HSL ramp has uneven jumps. In OKLCH, lightness is calibrated to perceived brightness, so equal steps look equal. That’s why design systems use it to generate clean, even 50–950 scales.
Wider Gamut (P3)
HEX and rgb() are limited to the sRGB gamut. OKLCH can address colors in wider gamuts like Display P3 — the more vivid colors modern phones and laptops can show. Browsers automatically fall back to the closest sRGB color on older displays, so it’s safe to adopt.
When to Use It
Reach for OKLCH when you’re generating color scales, building a design-system palette, or want predictable lightness when adjusting a brand color. For a one-off background color, HEX is still fine. The syntax: oklch(62% 0.19 256) — lightness, chroma, hue.
Frequently asked questions
What is OKLCH in CSS?
OKLCH is a CSS color function — oklch(lightness chroma hue) — built on the perceptually uniform OKLab color space. It lets you specify colors so that equal numeric steps look equally spaced to the eye.
What is the difference between OKLCH and HSL?
Both use lightness, a saturation-like value, and hue. But HSL’s lightness doesn’t match perceived brightness, so scales come out uneven. OKLCH is perceptually uniform and can also reach wider P3 colors.
Is OKLCH supported in browsers?
Yes — all current major browsers support the oklch() function, and they fall back gracefully to the nearest sRGB color on older displays, so it is safe to use in production.
Build perceptually even scales
Generate OKLCH color ramps that step evenly to the eye