CSS oklch() Function

Example

Define different oklch() colors:

/* green color with different amount of lightness */
#p1 {background-color:oklch(30% 0.4 150);}
#p2 {background-color:oklch(60% 0.4 150);}
#p3 {background-color:oklch(100% 0.4 150);}
/* yellow color with different amount of lightness */
#p4 {background-color:oklch(30% 0.4 100);}
#p5 {background-color:oklch(60% 0.4 100);}
#p6 {background-color:oklch(100% 0.4 100);}
/* red color with different amount of lightness */
#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 »

Definition and Usage

The CSS oklch() function specifies a color in the OKLCH color space.

The oklch() function is intuitive: You consider the amount of lightness/brightness (L) to use, the intensity of the shade (gray) (C), and the color itself (H). In addition, you have an optional alpha channel value (A), which represents the opacity of the color.

Version:	CSS Color Module Level 4

Browser Support

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

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

CSS Syntax

Absolute value syntax

oklch(L C H / 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%)
C	Required. Defines the color's chroma (the amount of color) as a number or percent. 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. None can also be used (same as 0%)
H	Required. Defines the color itself, as a number or an angle (from 0 to 360). None can also be used (same as 0deg)
/ 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

oklch(from color L C H / 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%)
C	Required. Defines the color's chroma (the amount of color) as a number or percent. 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. None can also be used (same as 0%)
H	Required. Defines the color itself, as a number or an angle (from 0 to 360). None can also be used (same as 0deg)
/ 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%