OKLCH: A New Color Model That Sees Like You Do
OKLCH is a modern color model designed to match how the human eye perceives color. Unlike RGB or HSL, it creates smoother gradients, more vivid colors, and better accessibility by controlling lightness, chroma, and hue independently. It’s now used by teams like Tailwind CSS and Evil Martians for more natural and consistent design.
David KososhviliJune 12, 2024
Productivity
OKLCH: A New Color Model That Sees Like You Do
Lately, there’s been a lot of buzz in the digital design world about a fascinating new color model — with a name that sounds a bit odd at first: OKLCH. You might wonder how to pronounce it (don’t worry, it’s not that hard), but what really matters is what it does.
Unlike older models like RGB or HSL, which often produce weird transitions and unexpected results, OKLCH was designed based on how the human eye actually perceives color. That’s what makes it a game-changer.
What Is OKLCH?
The OKLCH model breaks color into three main components:
L (Lightness): This defines how light or dark a color is. Think of it as a range from 0% (black) to 100% (white).
C (Chroma): This refers to the intensity or vividness of a color. Want bold colors? Increase the C value. Want something closer to gray? Lower it.
H (Hue): This is the actual color on the color wheel — for example, 0° is red, 90° is yellow, and so on.
Why Designers Are Loving OKLCH
1. Colors that look natural to the human eye
When you adjust colors in OKLCH, they shift the way your eyes expect them to. Unlike RGB where you often get strange results, OKLCH feels predictable and intuitive.
2. Smoother gradients
Creating gradients can be frustrating with traditional models. They might look muddy or uneven. OKLCH produces smooth, clean, natural gradients — more like soft light than murky paint.
3. More color possibilities
OKLCH supports a wider gamut of colors, meaning more options for designers — especially on modern screens.
4. Better accessibility
Because OKLCH controls lightness and contrast more precisely, it’s easier to design interfaces that are readable and accessible to all users.
Who’s Using It?
Some of the most forward-thinking design teams have already adopted OKLCH:
Tailwind CSS — Version 4 uses OKLCH for color tokens.
Evil Martians — They’ve fully transitioned from RGB/HSL and even built their own color tools around OKLCH.
Uploadcare — Another active user of the OKLCH model.
What Are the Downsides?
Like any new technology, OKLCH isn’t without its limitations:
Browser and tool support is still catching up. You might need workarounds or polyfills for full compatibility.
Some screens might not render OKLCH colors perfectly, especially older or low-end displays.
Final Thoughts
The OKLCH color model is a major step forward for digital design. It gives you control, consistency, and beauty — all while aligning with how people actually see color. As support grows, more designers will find themselves reaching for OKLCH when they want their work to truly shine.
So if you’re ready to “see color the way your eyes do,” it’s time to get familiar with OKLCH. But don’t throw out your RGB swatches just yet — they might still come in handy.
Sources:
Uploadcare, CSS-Tricks, Evil Martians, Tailwind CSS, MDN Web Docs, Chris Coyier, LogRocket