This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
The lab() 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 lab() we get access to these colors (currently Safari 15+ only).
The function takes 3 space-separated values.
div {
background-color: lab(78% -64 -160);
}
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.
div {
background-color: lab(0% 0 0);
}
a-axis and b-axis
The a and b axes convey hue. The value for each axis is theoretically unbounded, but in practice doesn't exceed -160 and 160.
Negative values along the a-axis are green. Positive values are red.
div {
background-color: lab(33% -123 0);
}
Negative values along the b-axis are blue. Positive values are yellow.
div {
background-color: lab(85% 0 114);
}
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 (2022-10-26T00:00:00+00:00) Day 23: the lab() color function. Retrieved from https://www.scien.cx/2022/10/26/day-23-the-lab-color-function-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.