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% |
Related Pages
CSS reference: CSS colors.
CSS reference: CSS hsl() function.
CSS reference: CSS hwb() function.
CSS reference: CSS lch() function.
