Warning: This color format is not widely supported at the moment. Be cautious when using it, and avoid relying on it in production environments.
Lab colors are expressed using three values:
- Lightness: from black to white. The lower the value, the darker it will be (closer to black).
- a*: from green to red. Lower values are closer to green, while higher values are closer to red.
- b*: from blue to yellow. Lower values represent blue, and moves to yellow the higher the value is.
The syntax of the Lab function is as follows:
The value for the lightness can be any percentage, not limited to 0% and 100%: if the value is lower than 0% (black), it will be clamped to 0%, but it can be higher than 100% (white), which would represent extra-bright whites on some systems.
The value for a* and b* can be any number, but it will generally go from -160 to 160. And finally, the optional alpha value that is common to every color function. All the parameters separated by spaces (new notation) except the alpha by a forward-slash.
Taking the possible values and formats, the same color could be written in three different ways in Lab:
color: lab(67.5345% -8.6911 -41.6019); color: lab(67.5345% -8.6911 -41.6019 / 1); color: lab(67.5345% -8.6911 -41.6019 / 100%);
At the moment of writing this post, none of the browsers supported the