CSS lch() Function

Example

Define different lch() colors:

#p1 {background-color:lch(10% 100 130 / 0.5);}
#p2 {background-color:lch(40% 100 130);}
#p3 {background-color:lch(90% 100 130 / 20%);}
#p4 {background-color:lch(10% 160 200);}
#p5 {background-color:lch(40% 160 200);}
#p6 {background-color:lch(90% 160 200 / 0.3);}
#p7 {background-color:lch(10% 130 70 / 0.5);}
#p8 {background-color:lch(40% 130 70);}
#p9 {background-color:lch(90% 130 70);}

Try it Yourself »

Definition and Usage

The CSS lch() function specifies a color in the LCH (Lightness-Chroma-Hue) color space.

Version:	CSS Color Module Level 4

Browser Support

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

Function
lch()	111	111	113	15	97
Mix number and % in parameters	116	116	113	16.2	102

CSS Syntax

Absolute value syntax

lch(L C H / 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%)
C	Required. Defines the color's chroma (the amount of color) as a number or percent. Minimum value is 0 (or 0%). Maximum value is unbounded (but in practice does not exceed 230). 100% is equal to 150. None can also be used (same as 0%)
H	Required. Defines the color's hue angle as a number or an angle. 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

lch(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 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%)
C	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%)
H	Required. Defines the color's hue angle as a number or an angle. 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%