Skip to main content
Photography of Alvaro Montoro being a doofus
Alvaro Montoro

CSS Wizard

paintbrushes

Lab

css html

Warning: This color format is not widely supported at the moment. Be cautious when using it, and avoid relying on it in production environments.

Defined by the CIE in 1976 after human vision experiments, the CIELAB colorspace (sometimes written CIE L*a*b* or simply Lab) represents the range of colors that humans can see.

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:

Lab syntax: lightness expressed in percentage. A-axis, a number between -160 and 160. B-axis a number between -160 and 160. Optionally, an Alpha value in number or percentage.

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 lab() function.

Article originally published on