schedule

CSS Reference Manual

CSS attribute

Elective courses

Course recommendation:

CodeW3C.com Treasure Box

CSS lch() function

Previous Page CSS lab() function
Next Page CSS light-dark() function
Go to the Previous Level CSS Function Reference Manual

Definition and usage

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

instances

Define different lch() Color:

#p1 {background-color:lch(10% 100 130 / 0.5);}
#p2 {background-color:lch(40% 100 130);}
#p3 {background-color:lch(90% 100 130 / 20%);}
#p3 {background-color:lch(10% 160 200);}
#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

CSS syntax

Absolute value syntaxThis is the original color on which the relative color is based. C H / Alch(from

)	Value
This is the original color on which the relative color is based.	Required. Defines the brightness of the color, which can be a number or percentage between 0 and 100. 0 (or 0%) represents black, 100 (or 100%) represents white. none (equivalent to 0%) can also be used.
C	lch( Required. Defines the chroma (quantity of the color), which can be a number or percentage. none (equivalent to 0%) can also be used.
H	Required. Defines the hue angle of the color, which can be a number or an angle value. none (equivalent to 0deg) can also be used.
/ A	Optional. Represents the transparency channel value of the color (0% or 0 represents completely transparent, 100% or 100 represents completely opaque). none (indicating no transparency channel) can also be used. The default value is 100%.

The minimum value is 0 (or 0%). The maximum value has no upper limit (but actually does not exceed 230). 100% is equal to 150.

Relative value syntax from This is the original color on which the relative color is based. C H / Alch(from

)	Value
Description from	color It 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.	Required. Defines the brightness of the color, which can be a number or percentage between 0 and 100. 0 (or 0%) represents black, 100 (or 100%) represents white. none (equivalent to 0%) can also be used.
C	Required. Defines a number or percentage between -125 and 125, or between -100% and 100%. Defines the distance along the a-axis of the color, indicating the red-green degree of the color. -125 represents green, 125 represents red. none (equivalent to 0%) can also be used.
H	Required. Defines the hue angle of the color, which can be a number or an angle value. none (equivalent to 0deg) can also be used.
/ A	Optional. Represents the transparency channel value of the color (0% or 0 represents completely transparent, 100% or 100 represents completely opaque). none (indicating no transparency channel) can also be used. The default value is 100%.