
LCH colors in CSS: what, why, and how? - schroffl
http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
======
roryokane
(Reposting my comment from Lobsters)

Yeah, the LCH color space is much more useful than HSL. I wish more software
had color pickers that supported it.

Another useful color space, closely related to LCH, is HSLuv
([https://www.hsluv.org/](https://www.hsluv.org/)). Its only difference is
that instead of an absolute chroma (colorfulness) component, it has a relative
saturation component, scaled so that 100% saturation means the maximum
possible chroma sRGB allows for that hue and lightness.

HSLuv’s relative saturation makes it ideal for generating colors for today’s
sRGB-restricted CSS, because its colors are always displayable, no matter
their saturation value. This avoids LCH’s problem where a color with too high
a chroma value must be rounded to the nearest displayable color. The downside
of relative saturation is that two different colors with the same saturation
value might not look equally colorful.

HSLuv has a comparison page
([https://www.hsluv.org/comparison/](https://www.hsluv.org/comparison/)) that
compares HSLuv, CIELUV LCh, and other color models. The charts do a good job
of helping you understand how each color model works.

The home page for HSLuv also has a nice color picker that I sometimes use
instead of the color picker built into various graphics software. It’s good to
learn of the article author’s LCH Colour picker at
[https://css.land/lch/](https://css.land/lch/) – that’s a much easier-to-use
LCH color picker than the other one I’ve seen,
[http://davidjohnstone.net/pages/lch-lab-colour-gradient-
pick...](http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker). But
something I prefer about HSLuv’s color picker is that the sliders’ colors show
the final color you will get if you move that slider to that position, whereas
the article author’s LCH Colour picker seems to do some weird hybrid of that
behavior and making the sliders always show the same colors.

