Article summary
RGB has been the standard color model on the web for decades. It’s widely supported and works well. But it wasn’t designed to replicate the way humans perceive color. oklch() models lightness, chroma, and hue in a way that mirrors human vision. That makes color manipulation more predictable, accessible, and expressive than RGB allows.
What is it?
oklch() is a functional notation of color in the Oklab color space. Oklab is a model that represents color the way human vision perceives it. It’s based on lightness and hue, rather than how screens mix light. oklch() has only been widely supported in browsers since 2023, but I can see it becoming the new color standard since it gives users more consistent results when adjusting contrast and shade.
Advantages
oklch() has more readable syntax and can easily adjust the brightness of a color by changing the L (the perceived lightness) value. For RGB colors, changing the brightness means changing the red, green, and blue values simultaneously to achieve similar results. This makes color changes feel less intuitive and more like guesswork every time. The improved readability and predictability of oklch also means that color themes provide better support for web accessibility tools. You can also create more diverse color palettes than RGB: a wider gamut, more saturated colors, access to P3 hues, etc.
A Pro and a Con
Both a benefit and a downside to oklch() is that it can create colors “that are only possible to render on a screen that supports Display-P3 colors”. Many monitors as well as Apple and high-end Windows devices have supported P3 since 2016, but it is not the standard color gamut for modern devices like sRGB is. This means many users with older equipment will not benefit from switching to this notation. Fortunately, “if your display only supports sRGB, the colors should look nearly identical.” In other words, it’s backwards compatible in modern browsers.
Disadvantages
Though it is praised for being intuitive when adjusting colors, the converse is true when it comes to creating gradients. This is because oklch() adds the hue dimension, which is polar, while other color models like oklab and sRGB are linear, producing smoother, more predictable gradient transitions.
oklch CSS Color
Until high-end screens and devices become more widely affordable for users, I don’t see oklch() replacing the RGB standard, but it doesn’t need to. It is a useful tool for designers and UI/UX engineers when prototyping components and layouts. For those who want more predictable, accessible color systems, it seems like a better tool for the job.