Exploring CIE lab/LCH Colors

Demos:

Note that hsl and lch map hues differently, so they aren't going to line up exactly here.

Other Resources:

Notes:

The CIE Lab/LCH color space -- coming to CSS in Color Module Level 4 -- is device-independent and perceptually uniform.

While we wait for browser implementations, Sass could provide basic Lab/LCH tools inside a module, to avoid naming conflicts with the eventual CSS functions. The Sass functions would pre-compile into an rgb() format for output, making them usable right away.

That's great in theory, but the CIE & sRGB color spaces don't align cleanly. Color conversion will need to follow the relative-colorimetric rendering intent: resolving out-of-gamut colors to the nearest available sRGB color, without altering in-gamut values.

I make an attempt at that in my demos -- locking both hue and lightness values, while lowering the chroma value until the color is in-gamut. That seems to be the accepted solution, rather thanclipping RGB channels like chroma.js, which can end up altering the hue in unpredicatble ways.

You can toggle between the two options in the demo "settings" menu, or hide out-of-gamut-colors entirely. You can also change the overall chroma or hue) value -- depending on the demo. Just give it time to update. This isn't optimized for performance, and the adjustments take more time at higher saturation levels.