LCH

Warning: This color format is not widely supported at the moment. Be cautious when using it, and avoid relying on it in production environments.

LCH stands for Lightness-Chroma-Hue. It is related to Lab (it has the same L value), but instead of using the coordinates a* and b*, it uses the C (Chroma) and H (Hue).

Although LCH and HSL share two letters (Lightness and Hue), it is important to differentiate them and clarify that the L in HSL and the one from LCH do not match. Also, even when the Hue is interpreted similarly in HSL and LCH, the angles are not mapped in the same way.

This is the syntax for the lch() function:

As mentioned above, the Lightness is similar to the one from Lab. The Chroma could take any numeric value, but in practice, the minimum useful value will be 0 and the maximum useful value will be 230.

The third argument is the hue angle that can be represented as a number or as an angle (in degrees), and optionally the fourth argument will be the alpha. This is a newly added function so its syntax will follow the space-separated notation (with a forward slash for the alpha).

A color can be written in six different ways using lch():

color: lch(67.5345% 42.5 258.2);
color: lch(67.5345% 42.5 258.2 / 1);
color: lch(67.5345% 42.5 258.2 / 100%);
color: lch(67.5345% 42.5 258.2deg);
color: lch(67.5345% 42.5 258.2deg / 1);
color: lch(67.5345% 42.5 258.2deg / 100%);

None of the tested browsers supported the lch() function for colors.