LCH FTW

Using hsl() in CSS is fairly popular because of how sensical it is. Hue, saturation, and lightness.

hsl(260, 85%, 50%)

260 is bluey-purple territory. 85% means pretty thickly saturated. 50% is right in the middle of lightness, not toward a blackening or whitening.

And with sensible numbers like that, you can perform math the color and feel good about it. Change the hue to find a green that feels related to this purple. Make a lighter version by changing the lightness. Nice.

But there is trouble.

In HSL, lightness is meaningless. Colors can have the same lightness value, with wildly different perceptual lightness.

Lea Verou, co-creator of the new Color.js library, explaining the main problem with HSL and introducing LCH.

LCH is just one of many new color features that have made way to the web recently. They are all neat, but it feels to me LCH is the biggest winner.

Look how similar it is to HSL. Feels like basically the same thing to me, except:

1. It’s one of the new color space thingies that unlocks colors we haven’t been able to show on the web before. Score!
2. Interpolating between colors (i.e. gradients) yields nicer results. No gray dead zone! Score!
3. It has consistent perceptual lightness, meaning colors with the same lightness actually feel like the same lightness. Score!

The image above is from the article LCH is the best color space! by Vojtěch Vidra and Ondřej Pešička who say LCH is the best for color palletes. I tend to agree. None of the other formats that have similar benefits have that human-readable syntax or open the same doors for very simple code-powered manipulation.