Design Journal
OKLCH, explained for designers
OKLCH is a new color space that improves design and development with a wider color gamut. Learn why it's the new standard for web colors.
February 01, 2025
·4 min read
Last week, TailwindCSS released their v4 version with revamped color tokens using OKLCH. I forsee more web devs are going to adopt OKLCH as the new standard for color tokens. This might sound very technical, but it's actually a significant change UI/UX designer should be aware of. With major browsers now reaching 93.1% adoption rate, OKLCH is on track to be the new standard that bridges design and development.
Why should designers care about OKLCH?
Most designers are familiar with RGB and HSL color spaces, but OKLCH is a new way of thinking about color. Here's an example: Traditionally, RGB use hexcodes (e.g. #0077CC), which are not easy to understand for humans. HSL is a more human-readable format (e.g. hsl(205deg, 100%, 40%, 1) for the same color), but lightness in HSL have different contrast in different hues, ergo it's not perfect withaccessibility issues.
OKLCH is a new system that solves this by offering a color space that's closer to how we actually perceive colors with better ergonomics in design and development experience. It stands for Oklab Lightness, Chroma, and Hue, and it's written as oklch(56.01% 0.1577 249.8 / 50%).
3D render & syntax of OKLCH color space, illustration render from OKLCH.com
Additionally, have I mentioned that OKLCH supports a wider range of colors with P3 compatibility? It means 30% more new colors that you can use that are human perceivable comparing to RGB. There're more colors to choose from for your palette.
Applying OKLCH in design system
Think about the last time you tried to create a consistent color scale for your design system. With RGB or HSL, increasing brightness often leads to washed-out colors, and it's very time-consuming to tweak color for both light and dark mode, while maintaining accessible color contrast. OKLCH's perceptual uniformity ensures that color transitions feel natural. By deducting lightness and chroma without changing the hue. It's way easier to finetune the desire color scale. The value corresponds to how bright and how saturated we perceive the color, unlike HSL where yellow appears brighter than blue at the same lightness value.
By doing so, OKLCH also means devs can calculate color scale more efficiently by defining fewer color tokens. For example in disabled or hover state, you can simply set CSS calculating function oklch(from var(--color-blue) calc(l/2 + .2) c h); to darken the color. To explain this example in plain text, it means we're taking the lightness value of the defined blue variable, and then divide it by 2, and then add 20% to it, and then use the same chroma and hue value to calculate the new color.
OK, so what are we waiting for and why are we still using RGB?
- While modern browsers have embraced OKLCH with 93% adoption (industry standard is 98%), native app frameworks are still playing catch-up. This creates a fragmented ecosystem where web applications can leverage OKLCH's benefits, but native apps remain falling behind with RGB & HSL. This pose a challenge for designers to maintain consistency across platforms.
- While flagship smartphones received P3 color gamut support, offering richer color reproduction. Majority of home-use desktop monitors still only support sRGB color space by default. Only professional monitors support wider color gamuts. This gap means lower ROI for brands to invest in updating their color where only a few users can see the difference.
- Even design tools like Figma, Sketch has not natively support OKLCH yet. Third-party plugins are required to convert OKLCH to RGB.
Comprehensive color picker of OKLCH, with compatible color gamut range visualised
Looking forward
With great backward compatibility in modern CSS, You can still start using OKLCH today given all the mentioned limitation, as long as you as you set RGB as fallback. This will ensure widest adoption without breaking old devices and technologies. For designers getting started with OKLCH, I recommend experimenting with the color space in Chrome DevTools or color picker first, understand how OKLCH values translate to visual colors, making it easier to incorporate into your design process later.
With all being said, OKLCH is still subjectively better and I believe it's on track to be the new color standard that bridges design and development. Let me know what you think!
