To put it (relatively) simply LCH (Luminance, Chroma, Hue) is a color space that is designed to be perceptually accurate. This means that by only changing, for instance, a color’s luminance, you will not impact its saturation or its tone. I wrote this JavaScript color library to handle the conversions reactively. After instantiating a Color object with an RGB, HEX, HSL, XYZ, LAB, or LCHab color, it will automatically update all its properties to reflect the proper conversions. Plus it offers some other useful features like random color generation and contrast ratio calculations. But regardless of how you do it, I hope making the switch to LCH helps ease some of the issues you can run into when designing your components.

Vinay Pillai

Web developer exploring internet infrastructure