Day 93: the lch() color function

posted on February 1., 2023

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

---

The lch() color function allows you to pick colors from the CIELAB color space, which is device-independant and covers the entire gamut (range) of human color perception.

Currently, the CSS colors we can define are in the sRGB color space. For the longest time, professional monitors weren’t able to display all possible colors in this range. So, using sRGB colors was absolutely sufficient, but that’s not true anymore. Nowadays, monitors can display much more colors than exist in the sRGB color space. With lch() we get access to these colors (currently Safari 15+ only).

The function takes 3 space-separated values.

div {
  background-color: lch(78% 172.33 248.2);
}

l - lightness

The first value defines the lightness. It's typically a number between 0% (representing black) and 100% (representing white). It's typically a number between 0% and 100% because the value can exceed 100% up to 400% representing extra-bright whites on some systems. It's the same lightness as in the lab() color function.

div {
  background-color: lch(0% 0 0);
}

c - chroma

The second argument is the chroma (roughly representing the “amount of color”). Its a value between 0 and 230.

div {
  background-color: lch(100% 180 0)
}

h - hue

The third argument is the hue angle. 0deg points along the positive “a” axis (toward purplish red). 90deg points along the positive “b” axis (toward mustard yellow), 180deg points along the negative “a” axis (toward greenish cyan), and 270deg points along the negative “b” axis (toward sky blue).

div {
  background-color: lch(100% 180 90);
}

See on CodePen.

Further reading

Want more?

1. Previous post: Day 92: relative color syntax

Overview: 100 Days Of More Or Less Modern CSS

My blog doesn't support comments yet, but you can reply via e-mail.