Dielch() Funktionalnotation gibt eine Farbe im LCH-Farbraum an, der Helligkeit, Chroma und Farbton repräsentiert. Sie verwendet die gleicheL-Achse wie dielab() Farbfunktion desCIELab-Farbraums, jedoch werden die PolarkoordinatenC (Chroma) undH (Farbton) verwendet.

Syntax

/* Absolute values */lch(29.2345% 44.2 27);lch(52.2345% 72.2 56.2);lch(52.2345% 72.2 56.2 / .5);/* Relative values */lch(from green l c h / 0.5)lch(from #123456 calc(l + 10) c h)lch(from hsl(180 100% 50%) calc(l - 10) c h)lch(from var(--color-value) l c h / calc(alpha - 0.1))

Werte

Nachfolgend finden Sie Beschreibungen der zulässigen Werte sowohl für absolute als auch fürrelative Farben.

Absolute Wertsyntax

lch(L C H[ / A])

Die Parameter sind wie folgt:

L

Eine<number> zwischen0 und100, eine<percentage> zwischen0% und100% oder das Schlüsselwortnone (entspricht0%). Die Zahl0 entspricht0% (schwarz), und die Zahl100 entspricht100% (weiß). Dieser Wert gibt die Helligkeit der Farbe imCIELab-Farbraum an.

Hinweis:DasL inlch() ist die wahrgenommene Helligkeit, die sich auf die "Helligkeit" bezieht, die wir mit unseren Augen wahrnehmen. Dies unterscheidet sich vomL inhsl(), wo es die Helligkeit im Vergleich zu anderen Farben darstellt.

C

Eine<number>, eine<percentage> oder das Schlüsselwortnone (in diesem Fall entspricht dies0%). Dieser Wert ist ein Maß für das Chroma der Farbe (entspricht ungefähr der "Menge an Farbe"). Sein minimaler nützlicher Wert ist0% oder0, während sein Maximalwert theoretisch unbegrenzt ist (in der Praxis jedoch nicht über230 hinausgeht), wobei100%150 entspricht.

H

Eine<number>, ein<angle> oder das Schlüsselwortnone (entspricht0deg), das den<hue> Winkel der Farbe darstellt.

Hinweis:Die Winkel, die bestimmten Farbtonen entsprechen, unterscheiden sich über die Farbräume sRGB (verwendet vonhsl() undhwb()), CIELAB (verwendet vonlch()) und Oklab (verwendet vonoklch()). Siehe das BeispielHues in LCH unten und die<hue> Referenzseite für weitere Details und Beispiele.

AOptional

Ein<alpha-value> das den Alpha-Kanal-Wert der Farbe darstellt, wobei die Zahl00% (vollständig transparent) und1100% (vollständig deckend) entspricht. Zusätzlich kann das Schlüsselwortnone verwendet werden, um explizit keinen Alpha-Kanal anzugeben. Wenn derA-Kanal-Wert nicht explizit angegeben ist, wird er standardmäßig auf 100% gesetzt. Wenn er enthalten ist, wird der Wert von einem Schrägstrich (/) vorangestellt.

Relative Wertsyntax

lch(from <color> L C H[ / A])

Die Parameter sind wie folgt:

from <color>

Das Schlüsselwortfrom wird immer eingeschlossen, wenn eine relative Farbe definiert wird, gefolgt von einem<color> Wert, der dieUrsprungsfarbe darstellt. Dies ist die ursprüngliche Farbe, auf der die relative Farbe basiert. Die Ursprungsfarbe kannjede gültige<color> Syntax sein, einschließlich einer anderen relativen Farbe.

L

Eine<number> zwischen0 und100, eine<percentage> zwischen0% und100%, oder das Schlüsselwortnone (entspricht0%). Die Zahl0 entspricht0% (schwarz), und die Zahl100 entspricht100% (weiß). Dieser Wert gibt die Helligkeit der Farbe im CIELab-Farbraum an.

C

Eine<number>, eine<percentage>, oder das Schlüsselwortnone (entspricht in diesem Fall0%). Dieser Wert repräsentiert den Chroma-Wert der Ausgabefarbe (entspricht ungefähr der "Menge an Farbe"). Sein minimaler nützlicher Wert ist0%, oder0, während sein Maximalwert theoretisch unbegrenzt ist (aber in der Praxis nicht über230 hinausgeht), wobei100%150 entspricht.

H

Eine<number>, ein<angle>, oder das Schlüsselwortnone (entspricht0deg) repräsentiert den<hue> Winkel der Ausgabefarbe. Siehe dasHue-Beispiel unten.

AOptional

Ein<alpha-value> das den Alpha-Kanal-Wert der Ausgabefarbe darstellt, wobei die Zahl00% (vollständig transparent) und1100% (vollständig deckend) entspricht. Zusätzlich kann das Schlüsselwortnone verwendet werden, um explizit keinen Alpha-Kanal anzugeben. Wenn derA-Kanal-Wert nicht explizit angegeben wird, übernimmt er standardmäßig den Alpha-Kanal-Wert der Ursprungsfarbe. Wenn enthalten, wird dem Wert ein Schrägstrich (/) vorangestellt.

Definieren der relativen Farbausgabenkanalkomponenten

Wenn Sie die relative Farbsyntax innerhalb einerlch()-Funktion verwenden, konvertiert der Browser die Ursprungsfarbe in eine äquivalente Lch-Farbe (wenn sie nicht bereits als solche angegeben ist). Die Farbe wird als drei separate Farbkanalwerte —l (Helligkeit),c (Chroma) undh (Farbton) — plus ein Alpha-Kanalwert (alpha) definiert. Diese Kanalwerte sind innerhalb der Funktion verfügbar, um beim Definieren der Ausgabefarbkanalwerte verwendet zu werden:

• Derl-Kanalwert wird auf einen<number> zwischen0 und100 aufgelöst, einschließlich.
• Derc-Kanalwert wird auf einen<number> zwischen0 und150 aufgelöst, einschließlich.
• Derh-Kanalwert wird auf einen<number> zwischen0 und360 aufgelöst, einschließlich.
• Deralpha-Kanal wird auf einen<number> zwischen0 und1 aufgelöst, einschließlich.

Beim Definieren einer relativen Farbe können die verschiedenen Kanäle der Ausgabefarbe auf verschiedene Arten ausgedrückt werden. Im Folgenden werden wir einige Beispiele betrachten, um diese zu veranschaulichen.

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Allerdings gibt das erste Beispiel die gleiche Farbe wie die Ursprungsfarbe aus und das zweite erzeugt eine Farbe, die gar nicht auf der Ursprungsfarbe basiert. Sie erstellen also keine echten relativen Farben! Sie würden diese wahrscheinlich niemals in einem echten Codebase verwenden und stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt zum Lernen der relativenlch()-Syntax aufgenommen.

Beginnen wir mit einer Ursprungsfarbe vonhsl(0 100% 50%) (entsprichtrot). Die folgende Funktion gibt die gleiche Farbe wie die Ursprungsfarbe aus — sie verwendet diel,c undh Kanalwerte der Ursprungsfarbe (54.29,106.854 und40.856) als Ausgabekanalwerte:

lch(from hsl(0 100% 50%) l c h)

Die Ausgabe dieser Funktion istlch(54.29 106.854 40.856).

Die nächste Funktion verwendet absolute Werte für die Ausgabefarbkanalwerte und gibt eine völlig andere Farbe aus, die nicht auf der Ursprungsfarbe basiert:

lch(from hsl(0 100% 50%) 29.6871% 66.83 327.109)

In diesem Fall ist die Ausgabefarbelch(29.6871 66.83 327.109).

Die folgende Funktion erstellt eine relative Farbe basierend auf der Ursprungsfarbe:

lch(from hsl(0 100% 50%) 70 150 h)

Dieses Beispiel:

• Konvertiert die Ursprungsfarbehsl() in eine äquivalentelch()-Farbe —lch(54.29 106.854 40.856).
• Setzt denH-Kanalwert für die Ausgabefarbe auf denH-Kanalwert der äquivalentenlch()-Ursprungsfarbe —40.856.
• Setzt dieL- undC-Kanalwerte der Ausgabefarbe auf neue Werte, die nicht auf der Ursprungsfarbe basieren:70 und150 bzw.

Die endgültige Ausgabefarbe istlch(70 150 40.856).

In den bisher in diesem Abschnitt gesehenen Beispielen wurden die Alpha-Kanäle weder für die Ursprungs- noch für die Ausgabefarben explizit angegeben. Wenn der Alpha-Kanal der Ausgabefarbe nicht angegeben ist, wird er standardmäßig auf denselben Wert wie der Alpha-Kanal der Ursprungsfarbe gesetzt. Wenn der Alpha-Kanal der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), wird er standardmäßig auf1 gesetzt. Daher sind die Alpha-Kanalwerte der Ursprungs- und Ausgabefarbe in den obigen Beispielen1.

Schauen wir uns nun einige Beispiele an, die Alpha-Kanalwerte für Ursprungs- und Ausgabefarben angeben. Das erste spezifiziert den Alpha-Kanalwert der Ausgabe als denselben wie den der Ursprungsfarbe, während das zweite einen anderen Alpha-Kanalwert der Ausgabe spezifiziert, der mit dem der Ursprungsfarbe nichts zu tun hat.

lch(from hsl(0 100% 50% / 0.8) l c h / alpha)/* Computed output color: lch(54.29 106.854 40.856 / 0.8) */lch(from hsl(0 100% 50% / 0.8) l c h / 0.5)/* Computed output color: lch(54.29 106.854 40.856 / 0.5) */

Im folgenden Beispiel wird die Ursprungsfarbehsl() erneut in das äquivalentelch() konvertiert —lch(54.29 106.854 40.856).calc() Berechnungen werden auf dieL-,C-,H- undA-Werte angewendet, was zu einer Ausgabefarbe vonlch(74.29 86.8541 0.856018 / 0.9) führt:

lch(from hsl(0 100% 50%) calc(l + 20) calc(c - 20) calc(h - 40) / calc(alpha - 0.1))

Formale Syntax

<lch()> =
lch([from<color>]?[<percentage>|<number>|none][<percentage>|<number>|none][<hue>|none][ /[<alpha-value>|none]]?)

<hue> =
<number>|
<angle>

<alpha-value> =
<number>|
<percentage>

Beispiele

Anpassung der Helligkeit einer Farbe

Dieses Beispiel zeigt die Wirkung, wenn derL (Helligkeits-)Wert derlch()-Funktionalnotation variiert wird.

HTML

<div data-color="blue-dark"></div><div data-color="blue"></div><div data-color="blue-light"></div><div data-color="red-dark"></div><div data-color="red"></div><div data-color="red-light"></div><div data-color="green-dark"></div><div data-color="green"></div><div data-color="green-light"></div>

CSS

body {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  gap: 20px;}div {  height: 50px;  border: 1px solid black;}

[data-color="blue-dark"] {  background-color: lch(10% 100 240);}[data-color="blue"] {  background-color: lch(50% 100 240);}[data-color="blue-light"] {  background-color: lch(90% 100 240);}[data-color="red-dark"] {  background-color: lch(10% 130 20);}[data-color="red"] {  background-color: lch(50% 130 20);}[data-color="red-light"] {  background-color: lch(90% 130 20);}[data-color="green-dark"] {  background-color: lch(10% 132 130);}[data-color="green"] {  background-color: lch(50% 132 130);}[data-color="green-light"] {  background-color: lch(90% 132 130);}

Ergebnis

Anpassung der Farbstärke durch Chroma

Das folgende Beispiel zeigt die Wirkung, wenn derC (Chroma-)Wert derlch()-Funktionalnotation variiert wird, wobei die Farben in der Intensität abnehmen, wenn derC-Wert von vollständig gesättigt auf fast Grau abnimmt.

HTML

<div data-color="blue"></div><div data-color="blue-chroma1"></div><div data-color="blue-chroma2"></div><div data-color="blue-chroma3"></div><div data-color="red"></div><div data-color="red-chroma1"></div><div data-color="red-chroma2"></div><div data-color="red-chroma3"></div><div data-color="green"></div><div data-color="green-chroma1"></div><div data-color="green-chroma2"></div><div data-color="green-chroma3"></div>

CSS

Mit den anfänglichen Grundfarben Blau, Rot und Grün deklarieren wir schrittweise kleinere Werte für Chroma: beginnend bei voller Farbsättigung mit dem höchsten Wert von150 (entspricht100%) bis zu3 (entspricht2%), was für alle Farben fast grau ist.

body {  display: grid;  grid-template-columns: 1fr 1fr 1fr 1fr;  gap: 20px;}div {  height: 50px;  border: 1px solid black;}

[data-color="blue"] {  background-color: lch(50% 150 240);}[data-color="blue-chroma1"] {  background-color: lch(50% 105 240);}[data-color="blue-chroma2"] {  background-color: lch(50% 54 240);}[data-color="blue-chroma3"] {  background-color: lch(50% 3 240);}[data-color="red"] {  background-color: lch(50% 100% 20deg);}[data-color="red-chroma1"] {  background-color: lch(50% 70% 20deg);}[data-color="red-chroma2"] {  background-color: lch(50% 36% 20deg);}[data-color="red-chroma3"] {  background-color: lch(50% 2% 20deg);}[data-color="green"] {  background-color: lch(50% 150 130);}[data-color="green-chroma1"] {  background-color: lch(50% 105 130);}[data-color="green-chroma2"] {  background-color: lch(50% 54 130);}[data-color="green-chroma3"] {  background-color: lch(50% 3 130);}

Ergebnis

Wenn wir0 anstelle von3 und2% verwendet hätten, mit den gleichen Helligkeitswerten, wären die Farben alle im gleichen Grauton. In diesem Beispiel sind sie fast grau.

Farbtöne in LCH

Das folgende Beispiel zeigt Farbplatten mit unterschiedlichenH (Farbton-)Werten derlch()-Funktionalnotation.

HTML

<div data-color="0">0deg</div><div data-color="20">20deg</div><div data-color="40">40deg</div><div data-color="60">60deg</div>

und so weiter.

<div data-color="80">80deg</div><div data-color="100">100deg</div><div data-color="120">120deg</div><div data-color="140">140deg</div><div data-color="160">160deg</div><div data-color="180">180deg</div><div data-color="200">200deg</div><div data-color="220">220deg</div><div data-color="240">240deg</div><div data-color="260">260deg</div><div data-color="280">280deg</div><div data-color="300">300deg</div><div data-color="320">320deg</div><div data-color="340">340deg</div><div data-color="360">360deg</div>

CSS

body {  display: flex;  flex-wrap: wrap;  gap: 3px;}div {  flex: 0 0 4em;  text-align: center;  line-height: 4em;  display: inline-block;  border: 1px solid black;  color: white;  font-family: monospace;}

[data-color="0"] {  background-color: lch(50% 150 0deg);}[data-color="20"] {  background-color: lch(50% 150 20deg);}[data-color="40"] {  background-color: lch(50% 150 40deg);}[data-color="60"] {  background-color: lch(50% 150 60deg);}

und so weiter.

[data-color="80"] {  background-color: lch(50% 150 80deg);}[data-color="100"] {  background-color: lch(50% 150 100deg);}[data-color="120"] {  background-color: lch(50% 150 120deg);}[data-color="140"] {  background-color: lch(50% 150 140deg);}[data-color="160"] {  background-color: lch(50% 150 160deg);}[data-color="180"] {  background-color: lch(50% 150 180deg);}[data-color="200"] {  background-color: lch(50% 150 200deg);}[data-color="220"] {  background-color: lch(50% 150 220deg);}[data-color="240"] {  background-color: lch(50% 150 240deg);}[data-color="260"] {  background-color: lch(50% 150 260deg);}[data-color="280"] {  background-color: lch(50% 150 280deg);}[data-color="300"] {  background-color: lch(50% 150 300deg);}[data-color="320"] {  background-color: lch(50% 150 320deg);}[data-color="340"] {  background-color: lch(50% 150 340deg);}[data-color="360"] {  background-color: lch(50% 150 360deg);}

Ergebnis

Die Farbtonwinkel inlch() unterscheiden sich von denen inhsl(). Weitere Informationen finden Sie unter<hue>. Inhsl() repräsentiert die sRGB-Farbe0deg Rot. Im CIELab-Farbraum entspricht0deg jedoch Magenta, während Rot etwa41deg ist.

Anpassung der Deckkraft mit lch()

Das folgende Beispiel zeigt die Wirkung, wenn derA (Alpha-)Wert derlch()-Funktionalnotation variiert wird. Die Elementered undred-alpha überlappen das#background-div-Element, um die Wirkung der Deckkraft zu demonstrieren. WennA einen Wert von0.4 hat, macht dies die Farbe zu 40% deckend.

HTML

<div>  <div data-color="red"></div>  <div data-color="red-alpha"></div></div>

CSS

div {  width: 50px;  height: 50px;  padding: 5px;  margin: 5px;  display: inline-block;  border: 1px solid black;}#background-div {  background-color: lch(100% 100 240);  width: 150px;  height: 40px;}

[data-color="red"] {  background-color: lch(50% 130 20);}[data-color="red-alpha"] {  background-color: lch(50% 130 20 / 0.4);}

Ergebnis

Verwenden relativer Farben mit lch()

Dieses Beispiel stylt drei<div>-Elemente mit unterschiedlichen Hintergrundfarben und demonstriert die Verwendung relativer Farben, um die Helligkeit einer Farbe mit derlch()-Funktion zu ändern. Das mittlere<div> behält die ursprüngliche--base-color, während die linken und rechten<div>s aufgehellte und abgedunkelte Varianten der--base-color erhalten.

Diese Varianten werden mit relativen Farben definiert – diebenutzerdefinierte Eigenschaft--base-color wird in einelch()-Funktion übergeben, und die Ausgabefarben haben ihren Helligkeitskanal modifiziert, um den gewünschten Effekt über einecalc()-Funktion zu erreichen. Bei der aufgehellten Farbe wird dem Helligkeitskanal 15% hinzugefügt, und bei der abgedunkelten Farbe werden 15% vom Helligkeitskanal abgezogen.

<div>  <div></div>  <div></div>  <div></div></div>

CSS

#container {  display: flex;  width: 100vw;  height: 100vh;  box-sizing: border-box;}.item {  flex: 1;  margin: 20px;}

:root {  --base-color: orange;}#one {  background-color: lch(from var(--base-color) calc(l + 15) c h);}#two {  background-color: var(--base-color);}#three {  background-color: lch(from var(--base-color) calc(l - 15) c h);}

Ergebnis

Das Ergebnis ist wie folgt:

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Liste aller Farbnotationen
• Verwenden relativer Farben
• CSS-Farben Modul
• <hue> Datentyp
• LCH colors in CSS: what, why, and how? von Lea Verou (2020)