Day 93: the lch() color function

posted on

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);
bright light blue color

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)
dark green color

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);
dark green color

See on CodePen

Further reading

Do you want to learn even more awesome CSS?

I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.

Learn more about the workshop!

Overview: 100 Days Of More Or Less Modern CSS