You may know RGB (Red Green Blue) or CMYK (cyan, magenta, yellow, and key), or maybe some other colour spaces like HSL (Hue, Saturation, Luminance) and HSV (Hue, Saturation, Value). But what about HCL?
What is HCL?
HCL (Hue-Chroma-Luminance) is a colour space that tries to behave according to how our we perceive colour. It does this using three factors:
- Hue – how we see colour as a variation of red, yellow, green, and blue.
- Chroma – the colourfulness of a colour
- Luminance – the brightness of a colour
Note: HCL is also known as LCH (or LCh).
Vojtěch Vidra and Ondřej Pešička wrote an ode to HCL for Atmos, offering reasons why it’s the best colour space for UI (user interfaces), including accessibility benefits:
Because of how the lightness values work in LCH different colors with the same lightness will have almost identical contrast ratios. This makes ensuring accessibility so much easier. […] Because of the perceptual uniformity of the color space, you can easily swap colors knowing that they’ll have the same contrast ratio. This makes experimenting with different colors in UI so much easier.