This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
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);
}
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-02-01T00:00:00+00:00) Day 93: the lch() color function. Retrieved from https://www.scien.cx/2023/02/01/day-93-the-lch-color-function-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.