CSS lab() Function

Example

Define different lab() colors:

#p1 {background-color:lab(0 40% 20% / 0.5);}
#p2 {background-color:lab(30 -40% -20%);}
#p3 {background-color:lab(40 30% -20% / 20%);}
#p4 {background-color:lab(50 60% 20%);}
#p5 {background-color:lab(60 50% -10%);}
#p6 {background-color:lab(70 70% -80% / 0.3);}
#p7 {background-color:lab(80 70% 20% / 0.5);}
#p8 {background-color:lab(90 80% -20%);}
#p9 {background-color:lab(100 90% -100%);}

Try it Yourself »

Definition and Usage

The CSS lab() function specifies a color in the CIE L*a*b color space. This represent all the colors that are visible to human eyes.

Version:	CSS Color Module Level 4

Browser Support

The numbers in the table specify the first browser version that fully supports the function.

Function
lab()	111	111	113	15	97
Mix number and % in parameters	116	116	113	16.2	102

CSS Syntax

Absolute value syntax

lab(L a b / A)

Value	Description
L	Required. Defines the lightness of the color as a number or percent between 0 and 100. 0 (or 0%) is black and 100 (or 100%) is white. None can also be used (same as 0%)
a	Required. Defines a number between -125 and 125 or a percentage between -100% and 100%. Defines the distance of the color along the a axis, which defines how green or red the color is. -125 indicates green and 125 indicates red. None can also be used (same as 0%)
b	Required. Defines a number between -125 and 125 or a percentage between -100% and 100%. Defines the distance of the color along the b axis, which defines how blue or yellow the color is. -125 indicates blue and 125 indicates yellow. None can also be used (same as 0%)
/ A	Optional. Represents the alpha channel value of the color (from 0% (or 0) - fully transparent to 100% (or 100) - fully opaque). None can also be used (indicates no alpha channel). The default value is 100%

Relative value syntax

lab(from color L a b / A)

Value	Description
from color	Start with the keyword from, followed by a color value that represents the origin color. This is the original color that the relative color is based on
L	Required. Defines the lightness of the color as a number or percent between 0 and 100. 0 (or 0%) is black and 100 (or 100%) is white. None can also be used (same as 0%)
a	Required. Defines a number between -125 and 125 or a percentage between -100% and 100%. Defines the distance of the color along the a axis, which defines how green or red the color is. -125 indicates green and 125 indicates red. None can also be used (same as 0%)
b	Required. Defines a number between -125 and 125 or a percentage between -100% and 100%. Defines the distance of the color along the b axis, which defines how blue or yellow the color is. -125 indicates blue and 125 indicates yellow. None can also be used (same as 0%)
/ A	Optional. Represents the alpha channel value of the color (from 0% (or 0) - fully transparent to 100% (or 100) - fully opaque). None can also be used (indicates no alpha channel). The default value is 100%