Συνάρτηση lch() του CSS

Χρήση και ορισμός

Ορισμός και χρήση του CSS lch() Η συνάρτηση στη διάσταση του χρώματος LCH (φωτεινότητα-χρωματικότητα-χρώμα) καθορίζει το χρώμα.

παραδειγμάτων

Ορισμός διαφορετικών lch() Χρώμα:

#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(90% 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.

You can also use none (equivalent to 0%).
C

lch(

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

You can also use none (equivalent to 0%).
H

Required. Defines the hue angle of the color, which can be a number or an angle value.

You can also use none (equivalent to 0deg).
/ A

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

You can also use none (representing no transparency channel).

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

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.

You can also use none (equivalent to 0%).
C

Required. Defines a number or percentage between -125 and 125 or between -100% and 100%.

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

-125 represents green, 125 represents red.

You can also use none (equivalent to 0%).
H

Required. Defines the hue angle of the color, which can be a number or an angle value.

You can also use none (equivalent to 0deg).
/ A

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

You can also use none (representing 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
lch()
111 111 113 15 97
Mixing numbers and percentages in parameters
116 116 113 16.2 102

Related pages

Αναφορά:Χρώματα CSS

Αναφορά:CSS hsl() function

Αναφορά:Λειτουργία CSS hwb()

Αναφορά:Λειτουργία CSS lab()

Αναφορά:Λειτουργία CSS oklab()

Αναφορά:Λειτουργία CSS oklch()