CSS lab() function

Definition and usage

CSS lab() The function specifies colors in the CIE Lab color space. This color space represents all the colors visible to the human eye.

instances

Define different lab() Color:

#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

CSS syntax

Absolute value syntax

lab(L a b / A)
Value Description
L

Required. Define the brightness of the color, which can be a number or percentage between 0 and 100.

0 (or 0%) represents black, 100 (or 100%) represents white.

none (equivalent to 0%) can also be used.
a

Required. Define a number between -125 and 125 or a percentage between -100% and 100%.

Define the distance of the color along the a-axis, indicating the degree of the color's red-green nature. -125 represents green, 125 represents red.

none (equivalent to 0%) can also be used.
b

Required. Define a number between -125 and 125 or a percentage between -100% and 100%.

Define the distance of the color along the b-axis, indicating the degree of the color's yellow-blue nature.

none (equivalent to 0%) can also be used.
/ A

Optional. Represents the transparency channel value of the color (0% or 0 represents fully transparent, 100% or 100 represents fully opaque).

none (representing no transparency channel) can also be used.

The default value is 100%.

Relative value syntax

lab(from color L a b / A)
Value Description
from color

Starts with the keyword 'from', followed by the color value representing the original color.

This is the original color based on which the relative color is based.
L

Required. Define the brightness of the color, which can be a number or percentage between 0 and 100.

0 (or 0%) represents black, 100 (or 100%) represents white.

none (equivalent to 0%) can also be used.
a

Required. Define a number between -125 and 125 or a percentage between -100% and 100%.

Define the distance of the color along the a-axis, indicating the degree of the color's red-green nature.

none (equivalent to 0%) can also be used.
b

Required. Define a number between -125 and 125 or a percentage between -100% and 100%.

Define the distance of the color along the b-axis, indicating the degree of the color's yellow-blue nature.

none (equivalent to 0%) can also be used.
/ A

Optional. Represents the transparency channel value of the color (0% or 0 represents fully transparent, 100% or 100 represents fully opaque).

none (representing no transparency channel) can also be used.

The default value is 100%.

Technical details

Version: CSS Color Module Level 4

Browser support

The numbers in the table represent the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
lab()
111 111 113 15 97
Mixing numbers and percentages in the parameters
116 116 113 16.2 102

Related pages

Reference:CSS Colors

Reference:CSS hsl() function

Reference:CSS hwb() function

Reference:CSS lch() function

Reference:CSS oklab() function

Reference:CSS oklch() function