What are OKLCH colors?
What are OKLCH colors?
OKLCH is a newer color model designed to be perceptually uniform, making colors more accurate to human perception and easier to work with. It consists of Lightness, Chroma, and Hue, differing from LCH in its use of the OKLab color space. Key advantages include consistent brightness across different hues and predictable shades without hue or saturation drift. Gradients in OKLCH are calculated based on lightness, chroma, and hue, often resulting in smoother transitions. It also supports wider color gamuts like Display-P3, enabling more vivid colors on modern screens. While widely supported, fallbacks for older browsers can be implemented using CSS `@supports` directive.
Note
this is a fun color space to work with
Published
2025
Summary
OKLCH is a newer color model designed to be perceptually uniform, making colors more accurate to human perception and easier to work with. It consists of Lightness, Chroma, and Hue, differing from LCH in its use of the OKLab color space. Key advantages include consistent brightness across different hues and predictable shades without hue or saturation drift. Gradients in OKLCH are calculated based on lightness, chroma, and hue, often resulting in smoother transitions. It also supports wider color gamuts like Display-P3, enabling more vivid colors on modern screens. While widely supported, fallbacks for older browsers can be implemented using CSS `@supports` directive.
Image
