CSS oklab() function

Definition and usage

CSS oklab() The function is used to specify colors in the OKLAB color space. This color space is designed to simulate the way human eyes perceive colors.

instances

Define different oklab() Color:

#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

CSS Syntax

Absolute Value Syntax

oklab(L a b / A)
Value Description
L

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

0 (or 0%) indicates black, 1 (or 100%) indicates white.

Also, you can use None (equivalent to 0%).
a

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

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

-0.4 indicates green, 0.4 indicates red. Also, you can use none (equivalent to 0%).
b

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

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

-0.4 indicates blue, 0.4 indicates yellow. Also, you can use none (equivalent to 0%).
/ A

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

Also, you can use none (indicating no transparency channel). The default value is 100%.

Relative Value Syntax

oklab(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 relative colors are based.
L

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

0 (or 0%) indicates black, 1 (or 100%) indicates white.

Also, you can use none (equivalent to 0%).
a

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

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

-0.4 indicates green, 0.4 indicates red. Also, you can use none (equivalent to 0%).
b

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

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

-0.4 indicates blue, 0.4 indicates yellow. Also, you can use none (equivalent to 0%).
/ A

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

Also, you can use none (indicating no transparency channel). 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
oklab()
111 111 113 15.4 97
Mixing Numbers and Percentages in 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 lab() function

Reference:CSS oklch() function