Understanding next-gen color space that makes color scaling easier and future-proofs your designsystemLast 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 its 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 aboutOKLCH?Most designers are familiar with RGB and HSL color spaces, but OKLCH is a new way of thinking about color. Heres 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 with accessibility issues.OKLCH is a new system that solves this by offering a color space thats closer to how we actually perceive colors with better ergonomics in design and development experience. It stands for Oklab Lightness, Chroma, and Hue, and its written as oklch(56.01% 0.1577 249.8 /50%).3D render & syntax of OKLCH color space, illustration render from OKLCH.comAdditionally, 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 humanly perceivable compared to RGB. There are more colors to choose from for yourpalette.Applying OKLCH in a designsystemThink 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 its very time-consuming to tweak color for both light and dark mode, while maintaining accessible color contrast. OKLCHs perceptual uniformity ensures that color transitions feel natural. By deducting lightness and chroma without changing the hue. Its way easier to finetune the desired 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 newcolor.OK, so what are we waiting for, and why are we still usingRGB?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 OKLCHs benefits, but native apps remain falling behind with RGB & HSL. This poses 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 have not natively supported OKLCH yet. Third-party plugins are required to convert OKLCH toRGB.Comprehensive color picker of OKLCH, with compatible color gamut range visualisedLooking forwardWith 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 processlater.With all being said, OKLCH is still subjectively better and I believe its on track to be the new color standard that bridges design and development. Let me know what youthink!ResourcesTailwindCSS v4 DocumentationOKLCH Color PickerToolOKLCH Color Variations FigmaPluginOriginally published at https://desktopofsamuel.com on February 1,2025.OKLCH, explained for designers was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.