A modern, perceptually uniform color space that represents colors using lightness, chroma, and hue, offering more accurate and predictable color manipulation than HSL or RGB.
OKLCH is a modern color space designed for perceptual uniformity, meaning that equal numerical changes in any of its three values (Lightness, Chroma, Hue) produce equal perceived changes in the color, regardless of hue. The name comes from OKLab (Björn Ottosson's perceptual color model) converted to polar coordinates (L = lightness, C = chroma, H = hue).
OKLCH became natively supported in CSS in 2023 and is now available in all modern browsers. Its syntax is oklch(L C H), for example oklch(0.63 0.17 245).
The core problem with older color models (HSL, RGB, HEX) is that they aren't perceptually uniform. In HSL, a 10% lightness increase looks much larger for dark colors than for light ones. Colors at the same HSL chroma look very different in vividness across hues. This makes it difficult to generate consistent, predictable shade scales. You have to manually tune values because the math doesn't reflect what you see.
OKLCH solves this. Its lightness channel is based on measured human visual response, so a change of 0.1 lightness looks consistent whether you're adjusting a dark navy or a light yellow. Its chroma channel is also perceptually uniform, making it easier to maintain consistent vividness across a palette.
Additionally, OKLCH can represent colors outside the sRGB gamut (including the wider Display P3 gamut used by modern Mac and iPhone screens), which is not possible with HEX, RGB, or HSL.
Syntax: oklch(L C H) or oklch(L C H / alpha)
Example values:
oklch(0.5 0.2 265): medium blueoklch(0.8 0.15 142): light greenoklch(0.2 0.0 0): very dark gray (chroma 0 = no color)Generating shade scales: Keep hue and chroma fixed, vary lightness in equal steps. The result is a perceptually uniform scale.
A complete button palette using OKLCH:
oklch(0.55 0.22 265): vivid blueoklch(0.50 0.22 265): darker by 0.05 lightnessoklch(0.75 0.05 265): lighter, desaturatedAll three steps feel perceptually consistent because OKLCH lightness is uniform.
Both are polar color models with Lightness, Chroma, and Hue. LCH is based on the older CIELAB color space; OKLCH is based on OKLab, a newer model by Björn Ottosson that improves on LCH in perceptual uniformity, particularly for hue accuracy in blues and purples, and for consistent chroma perception at different lightness levels. OKLCH is the currently recommended choice for new CSS work.
Yes, as of 2023. OKLCH is supported in Chrome 111+, Firefox 113+, and Safari 15.4+. Global browser support is above 90%. For older browser support, you can provide HEX or RGB fallbacks alongside OKLCH values using the CSS cascade, or use PostCSS plugins to transform OKLCH to sRGB equivalents at build time.
For new projects targeting modern browsers, yes. OKLCH is strictly more capable: it can represent all sRGB colors plus wide-gamut colors, and it's more intuitive for programmatic manipulation. HEX and HSL remain useful for tool interoperability and as fallback formats. In practice, many design systems are migrating to OKLCH for their source-of-truth values while keeping HEX as an export format for compatibility.