OKLCH

OKLCH is the first color format CSS shipped that actually matches how human eyes perceive brightness and color. It gives you three clean axes. L for perceived lightness from 0 to 1. C for chroma or color intensity. H for hue in degrees. Björn Ottosson released it in 2020 to kill the perceptual lies baked into every prior system. Designers can now set numbers and trust that equal L values look equally bright across hues.

The entire system sits on top of the OKLab color space which fixed hue linearity problems that plagued CIELAB. This is not theory. It is production-ready math that Tailwind v4 adopted for its default palette in 2024. Your palettes stop fighting you.

OKLCH is not HSL with a fresh coat of paint. It is not another serialization format like hex. Plenty of teams treat it like a drop-in syntax swap and then wonder why their gradients still look off. HSL lightness is still rooted in sRGB math so yellow at 50 percent lightness reads much brighter than blue at the same value. That is not a skill issue. It is a coordinate system that was never built for eyes.

It is also not complicated to learn. The first hour feels strange because L actually means something now. After that it clicks harder than HSL ever did. You stop compensating for bad tools and start designing.

Tailwind v4 rebuilt every color scale in OKLCH so blue-500 and orange-500 finally carry the same visual weight. Radix UI scales follow the same perceptual rules even when the word OKLCH stays in the background. The practical ramp in the article uses fixed L steps from 0.97 down to 0.13 with only C and H changing per hue. Drop those custom properties into a project and dark mode contrast just works. No more one-off tweaks at 2 a.m. before launch.

Apple hardware has supported P3 since 2016. OKLCH lets you name those vivid colors directly instead of leaving saturation on the table. Chrome 111, Safari 15.4, Firefox 113 and Edge 111 all shipped full support by mid-2023. Global coverage crossed 93 percent in 2025. The migration window is not coming. It is open right now.

Reach for OKLCH when you are building a design system that must survive dark mode, component states, and multiple display types. It earns its keep in token architectures, gradient transitions, and any palette that ships to real users on real devices. Skip it on throwaway marketing pages where five static hex values will never be maintained. The fallback line is trivial but the upside only compounds at scale. Starting with chroma under 0.20 keeps you safe on sRGB screens while you layer P3 values behind media queries.

The re-audit step after migration always surfaces fewer surprises because lightness now predicts contrast instead of lying about it. WCAG still measures in sRGB but your priors are suddenly accurate. Teams that finish this migration stop having the same stupid argument about why blue-300 looks heavier than orange-300.

OKLCH is the coordinate system that ends the lightness arguments because the numbers finally mean what your eyes already knew.