CSS oklch() function

CSS

Definition and usage in oklch() The function is used to specify colors in the OKLCH color space.

oklch() The function is very intuitive: you need to consider the amount of brightness/lightness (L) you want to use, the strength of the hue (gray), and the color itself (H). In addition, you can also choose to add an alpha channel value (A) to represent the opacity of the color.

examples

Define different oklch() Color:

/* Different brightness levels of green /
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ Different shades of yellow /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ Different shades of red */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

Try it yourself

CSS syntax

Absolute value syntax

oklch(L C H / A)
Value Description
L

Required. Defines 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%) represents black, 1 (or 100%) represents white.

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

Required. Defines the chroma (the quantity of the color), which can be a number or a percentage.

It must be a number between -0.4 and 0.4 or a percentage between -100% and 100%.

At the minimum value (0% or -0.4), the color is closer to gray.

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

Required. Defines the color itself, which can be a number or an angle (0 to 360).

Also, you can use none (equivalent to 0deg).
/ A

Optional. Represents the opacity 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

oklch(from color L C H / A)
Value Description
from color

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

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

Required. Defines 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%) represents black, 1 (or 100%) represents white.

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

Required. Defines the chroma (the quantity of the color), which can be a number or a percentage.

It must be a number between -0.4 and 0.4 or a percentage between -100% and 100%.

At the minimum value (0% or -0.4), the color is closer to gray.

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

Required. Defines the color itself, which can be a number or an angle (0 to 360).

Also, you can use none (equivalent to 0deg).
/ A

Optional. Represents the opacity 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
oklch()
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 lab() function

Reference:CSS lch() function

Reference:CSS oklab() function