The benefits of OKLCH:
hsl()
, OKLCH is better for color modifications and palette generation. It uses perceptual lightness, so no more unexpected results, like we had with darken()
in Sass.rgb()
or hex (#ca0000
), OKLCH is human readable. You can quickly and easily know which color an OKLCH value represents
simply by looking at the numbers. OKLCH works like HSL, but it encodes
lightness better than HSL.[data:image/svg+xml;charset=utf-8,%3Csvg%20height='160'%20width='192'%20xmlns='http://www.w3.org/2000/svg' version='1.1'></svg>](data:image/svg+xml;charset=utf-8,<svg height='160' width='192' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E)
But, that being said, OKLCH comes with two challenges:
L
, C
, and H
will result in colors that are supported by every monitor. Although
browsers will try to find the closest supported color, it’s still safer
to check colors using our color picker.A perceptual color space for image processing
oklch() - CSS: Cascading Style Sheets | MDN
OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog