Note that hsl
and lch
map hues differently,
so they aren't going to line up exactly here.
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.