Oklch, LCH, Oklab, Lab support

New color spaces have landed in major browsers. Do you have any plans to add support? OKLCH is especially useful for its perceptual lightness, so that we can generate palettes that have to deal with WCAG contrast criteria.

The news had passed me by, but that looks interesting. If I understand, these are new ways to describe colors more intuitively, not new color profiles that actually allow you to address a wider set of colors?
Anyway, we’ll take a look, thanks.

They really are new color profiles that actually allow you to address a wider set of colors. You can play with it here by moving Chroma slider. As you can see, some colors in OKLCH/LCH are not available in RGB/HEX/HSL. But these colors could be represented by some fallback.

@pieteromvlee OKLCH & OKLAB colour space would be nice!
We´ve started keeping our token source in OKLCH. We render them out in different formats using Style Dictionary.

The nice thing about these colour spaces is that they keep “perceptual lightness”.

They come with a lot of benefits:

  • you can change a colour´s hue while keeping its perceived lightness. Great for creating an accessible set of colours. Think of a whole range of colours using the same lightness value. Basically, you can check accessibility just by the numbers.
  • OKLAB is are also amazing for all things gradients because it copes with the “grey dead zone”

With OKLCH and OKLAB being supported in latest browsers it sounds like a great addition. Especially since you guys started to support P3 profiles.

Fingers crossed that you guys are adding an ability to copy colors from Display P3 documents in their native format suitable for web — color(display-p3 .232 .977 .361);

1 Like