CSS-Funktion lch()

Definition und Verwendung

CSS- lch() Funktionen, um Farben im LCH-(Helligkeit-Höhe-Farbe)-Farbraum zu spezifizieren.

Beispiele

Definieren Sie verschiedene lch() Farbe:

#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);}

Probieren Sie es selbst aus

CSS Syntax

Absoluter Wert GrammatikDas ist die ursprüngliche Farbe, auf der die relative Farbe basiert. C H / Alch(from
) Wert
Das ist die ursprüngliche Farbe, auf der die relative Farbe basiert.

Erforderlich. Definiert die Helligkeit der Farbe, kann eine Zahl oder ein Prozentsatz zwischen 0 und 100 sein.

0 (oder 0%) bedeutet Schwarz, 100 (oder 100%) bedeutet Weiß.

Man kann auch none (was 0% entspricht) verwenden.
C

lch(

Erforderlich. Definiert den Farbton (die Menge der Farbe), kann eine Zahl oder ein Prozentsatz sein.

Man kann auch none (was 0% entspricht) verwenden.
H

Erforderlich. Definiert den Farbtonwinkel der Farbe, kann eine Zahl oder ein Winkelwert sein.

Man kann auch none (was 0 Grad entspricht) verwenden.
/ A

Optional. Stellt den Transparenzkanal der Farbe dar (0% oder 0 bedeutet vollständig transparent, 100% oder 100 bedeutet vollständig undurchsichtig).

Man kann auch none (was für Transparenzkanal ohne) verwendet werden.

Standardwert ist 100%.

Der Mindestwert ist 0 (oder 0%). Der Höchstwert ist unbegrenzt (aber tatsächlich nicht mehr als 230). 100% entspricht 150.

Relative Wert Grammatik from Das ist die ursprüngliche Farbe, auf der die relative Farbe basiert. C H / Alch(from
) Wert
Beschreibung from

color

Beginnt mit dem Schlüsselwort from, gefolgt von dem Wert der ursprünglichen Farbe.
Das ist die ursprüngliche Farbe, auf der die relative Farbe basiert.

Erforderlich. Definiert die Helligkeit der Farbe, kann eine Zahl oder ein Prozentsatz zwischen 0 und 100 sein.

0 (oder 0%) bedeutet Schwarz, 100 (oder 100%) bedeutet Weiß.

Man kann auch none (was 0% entspricht) verwenden.
C

Erforderlich. Definiert eine Zahl oder einen Prozentsatz zwischen -125 und 125 oder -100% und 100%.

Definiert den Abstand der Farbe entlang der a-Achse, was die Rot-Grünigkeit der Farbe darstellt.

-125 bedeutet Grün, 125 bedeutet Rot.

Man kann auch none (was 0% entspricht) verwenden.
H

Erforderlich. Definiert den Farbtonwinkel der Farbe, kann eine Zahl oder ein Winkelwert sein.

Man kann auch none (was 0 Grad entspricht) verwenden.
/ A

Optional. Stellt den Transparenzkanal der Farbe dar (0% oder 0 bedeutet vollständig transparent, 100% oder 100 bedeutet vollständig undurchsichtig).

Man kann auch none (was für Transparenzkanal ohne) verwendet werden.

Standardwert ist 100%.

Technische Details

Version: CSS Color Module Level 4

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Funktion vollständig unterstützen.

Chrome Edge Firefox Safari Opera
lch()
111 111 113 15 97
Zahl und Prozentsatz in den Parametern mischen
116 116 113 16.2 102

Verwandte Seiten

Referenz:CSS-Farben

Referenz:CSS hsl() Funktion

Referenz:CSS hwb() Funktion

Referenz:CSS lab() Funktion

Referenz:CSS oklab() Funktion

Referenz:CSS oklch() Funktion