CSS oklab() Function

Example

Define different oklab() colors:

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

Try it Yourself »

Definition and Usage

The CSS oklab() function specifies a color in the OKLAB color space. This color space attempts to mimic how color is perceived by the human eye.

Version:	CSS Color Module Level 4

Browser Support

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

Function
oklab()	111	111	113	15.4	97
Mix number and % in parameters	116	116	113	16.2	102

CSS Syntax

Absolute value syntax

oklab(L a b / A)

Value	Description
L	Required. Defines the perceived lightness of the color as a number between 0 and 1, or as a percent between 0% and 100%. 0 (or 0%) is black and 1 (or 100%) is white. None can also be used (same as 0%)
a	Required. Defines a number between -0.4 and 0.4 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. -0.4 indicates green and 0.4 indicates red. None can also be used (same as 0%)
b	Required. Defines a number between -0.4 and 0.4 or a percentage between -100% and 100%. Defines the distance of the color along the b axis, which defines how yellow or blue the color is. -0.4 indicates blue and 0.4 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

oklab(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 perceived lightness of the color as a number between 0 and 1, or as a percent between 0% and 100%. 0 (or 0%) is black and 1 (or 100%) is white. None can also be used (same as 0%)
a	Required. Defines a number between -0.4 and 0.4 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. -0.4 indicates green and 0.4 indicates red. None can also be used (same as 0%)
b	Required. Defines a number between -0.4 and 0.4 or a percentage between -100% and 100%. Defines the distance of the color along the b axis, which defines how yellow or blue the color is. -0.4 indicates blue and 0.4 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%