The benefits of OKLCH:

  1. OKLCH frees designers from the need to manually choose every color. Designers can define a formula, choose a few colors, and an entire design system palette is automatically generated.
  2. OKLCH can be used for wide-gamut P3 colors. For instance, new devices (like those from Apple) can display more colors than old sRGB monitors, and we can use OKLCH to specify these new colors.
  3. Unlike 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.
  4. Further, with its predictable lightness, OKLCH provides better a11y.
  5. Unlike 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:

  1. With OKLCH and LCH, not all combinations of 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.
  2. OKLCH is a new color space. At the time of this writing in 2024, its ecosystem is still limited (for Figma we have the plugin but not official support), but we already have a palette generator, color picker, and many converters.

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

OKLCH Color Picker & Converter