lch()

Baseline 2023

Newly available

Since ⁨May 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die lch() Funktionsnotation drückt eine gegebene Farbe unter Verwendung des LCH-Farbraums aus, der Helligkeit, Chroma und Farbton darstellt. Sie verwendet die gleiche L-Achse wie die lab() Farb-Funktion des CIELab-Farbraums, jedoch werden die Polar-Koordinaten C (Chroma) und H (Farbton) genutzt.

Syntax

css

/* 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 sind Beschreibungen der erlaubten Werte sowohl für absolute als auch für relative Farben aufgeführt.

Hinweis: Üblicherweise, wenn Prozentwerte in CSS einen numerischen Äquivalent haben, entspricht 100% der Zahl 1. Das ist nicht der Fall für lch(). Hier ist 100% gleich der Zahl 100 für den L-Wert und 150 für den C-Wert.

Absolute Wert-Syntax

lch(L C H[ / A])

Die Parameter sind wie folgt:

L: Eine <number> zwischen 0 und 100, ein <percentage> zwischen 0% und 100% oder das Schlüsselwort none (entspricht 0%). Die Zahl 0 entspricht 0% (schwarz) und die Zahl 100 entspricht 100% (weiß). Dieser Wert gibt die Helligkeit der Farbe im CIELab-Farbraum an.

Hinweis: Das L in lch() steht für die wahrgenommene Helligkeit, die sich auf die "Helligkeit" bezieht, die wir mit unseren Augen visuell wahrnehmen. Dies ist anders als das L in hsl(), wo es die Helligkeit im Vergleich zu anderen Farben darstellt.
C: Eine <number>, ein <percentage>, oder das Schlüsselwort none (entspricht 0% in diesem Fall). Dieser Wert ist ein Maß für das Chroma der Farbe (ungefähr "Menge an Farbe"). Der minimal nützliche Wert ist 0% oder 0, während sein Maximum theoretisch unbegrenzt ist (praktisch jedoch nicht mehr als 230 überschreitet), wobei 100% 150 entspricht.
H: Eine <number>, ein <angle>, oder das Schlüsselwort none (entspricht 0deg) und stellt den Winkel des <hue> der Farbe dar.

Hinweis: Die Winkel, die bestimmten Farbtönen entsprechen, unterscheiden sich zwischen den Farbmodellen sRGB (verwendet von hsl() und hwb()), CIELAB (verwendet von lch()) und Oklab (verwendet von oklch()). Siehe das Farben in LCH Beispiel unten und die <hue> Referenzseite für mehr Details und Beispiele.
A Optional: Ein <alpha-value>, der den Alpha-Kanal-Wert der Farbe darstellt, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig undurchsichtig) entspricht. Außerdem kann das Schlüsselwort none verwendet werden, um keinen Alpha-Kanal explizit anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, ist der Standardwert 100%. Wenn eingeschlossen, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Hinweis: Siehe Fehlende Farbkomponenten für weitere Informationen über die Wirkung von none.

Relativ Wert-Syntax

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

Die Parameter sind wie folgt:

from <color>: Das Schlüsselwort from ist immer enthalten, wenn eine relative Farbe definiert wird, gefolgt von einem <color> Wert, der die Ursprungsfarbe darstellt. Dies ist die ursprüngliche Farbe, auf der die relative Farbe basiert. Die Ursprungsfarbe kann jede gültige <color>-Syntax sein, einschließlich einer anderen relativen Farbe.
L: Eine <number> zwischen 0 und 100, ein <percentage> zwischen 0% und 100%, oder das Schlüsselwort none (entspricht 0%). Die Zahl 0 entspricht 0% (schwarz), und die Zahl 100 entspricht 100% (weiß). Dieser Wert gibt die Helligkeit der Farbe im CIELab-Farbraum an.
C: Eine <number>, ein <percentage>, oder das Schlüsselwort none (entspricht 0% in diesem Fall). Dieser Wert repräsentiert den Chromawert der Ausgabe-Farbe (ungefähr die "Menge an Farbe"). Der minimal nützliche Wert ist 0%, oder 0, während sein Maximum theoretisch unbegrenzt ist (praktisch jedoch nicht mehr als 230), wobei 100% 150 entspricht.
H: Eine <number>, ein <angle>, oder das Schlüsselwort none (entspricht 0deg) und stellt den Winkel des <hue> der Ausgabe-Farbe dar. Siehe das Farbtöne-Beispiel unten.
A Optional: Ein <alpha-value>, der den Alpha-Kanal-Wert der Ausgabe-Farbe darstellt, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig undurchsichtig) entspricht. Außerdem kann das Schlüsselwort none verwendet werden, um keinen Alpha-Kanal explizit anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, entspricht er dem Alpha-Kanal-Wert der Ursprungsfarbe. Wenn eingeschlossen, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definieren von relativen Farbausgabekanalkomponenten

Beim Verwenden der relativen Farbsyntax innerhalb einer lch() Funktion konvertiert der Browser die Ursprungsfarbe in eine äquivalente Lch-Farbe (falls sie nicht bereits als solche angegeben ist). Die Farbe wird als drei separate Farbkanalwerte definiert — l (Helligkeit), c (Chroma) und h (Farbton) — plus einen Alpha-Kanal-Wert (alpha). Diese Kanalwerte sind innerhalb der Funktion verfügbar, um bei der Definition der Ausgabefarbkanalwerte verwendet zu werden:

Der l-Kanalwert wird auf eine <number> zwischen 0 und 100 aufgelöst, inklusive.
Der c-Kanalwert wird auf eine <number> zwischen 0 und 150 aufgelöst, inklusive.
Der h-Kanalwert wird auf eine <number> zwischen 0 und 360 aufgelöst, inklusive.
Der alpha-Kanal wird auf eine <number> zwischen 0 und 1 aufgelöst, inklusive.

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

In den ersten beiden Beispielen unten verwenden wir eine relative Farbsyntax. Allerdings gibt das erste dieselbe Farbe wie die Ursprungsfarbe aus und das zweite liefert eine Farbe, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen eigentlich keine relativen Farben! Sie würden diese in einer realen Codebasis wahrscheinlich nie verwenden und stattdessen einfach einen absoluten Farbwert nutzen. Wir haben diese Beispiele aufgenommen, um einen Ausgangspunkt zum Erlernen der relativen lch()-Syntax bereitzustellen.

Beginnen wir mit einer Ursprungsfarbe von hsl(0 100% 50%) (äquivalent zu rot). Die folgende Funktion gibt dieselbe Farbe wie die Ursprungsfarbe aus — sie verwendet die l, c und h-Kanalwerte der Ursprungsfarbe (54.29, 106.854 und 40.856) als Ausgabekanäle:

css

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

Die Ausgabe dieser Funktion ist lch(54.29 106.854 40.856).

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

css

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

In dem obigen Fall ist die Ausgabefarbe lch(29.6871 66.83 327.109).

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

css

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

In diesem Beispiel:

Die hsl()-Ursprungsfarbe wird in eine äquivalente lch()-Farbe konvertiert — lch(54.29 106.854 40.856).
Der H-Kanalwert für die Ausgabefarbe wird auf den H-Kanalwert des lch()-Äquivalents der Ursprungsfarbe gesetzt — 40.856.
Die L- und C-Werte der Ausgabefarbe werden auf neue, nicht auf der Ursprungsfarbe basierende Werte gesetzt: 70 beziehungsweise 150.

Die endgültige Ausgabefarbe ist lch(70 150 40.856).

Hinweis: Wie oben erwähnt, wird die Ursprungsfarbe, wenn die Ausgabefarbe ein anderes Farbmodell verwendet, im Hintergrund in dasselbe Modell wie die Ausgabefarbe konvertiert, sodass sie auf eine Weise dargestellt werden kann, die kompatibel ist (d. h. mit denselben Kanälen).

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

Sehen wir uns einige Beispiele an, in denen Alpha-Kanal-Werte für Ursprung und Ausgabe angegeben werden. Das erste gibt den Alpha-Kanal-Wert der Ausgabe explizit als den gleichen Wert wie der Ursprungskanal an, während das zweite Beispiel einen anderen, vom Ursprung unabhängigen Wert für den Alpha-Kanal der Ausgabe angibt.

css

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 hsl()-Ursprungsfarbe erneut in das lch()-Äquivalent konvertiert — lch(54.29 106.854 40.856). calc() Berechnungen werden auf die L-, C-, H- und A-Werte angewandt, was zu einer Ausgabefarbe von lch(74.29 86.8541 0.856018 / 0.9) führt:

css

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

Hinweis: Da die Ursprungsfarbkanalwerte auf <number>-Werte aufgelöst werden, müssen Sie bei ihrer Verwendung in Berechnungen Zahlen zu ihnen hinzufügen, selbst in Fällen, in denen ein Kanal normalerweise <percentage>, <angle> oder andere Werttypen akzeptieren würde. Beispielsweise funktioniert das Hinzufügen eines <percentage> zu einer <number> nicht.

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

Anpassen der Helligkeit einer Farbe

Dieses Beispiel zeigt die Wirkung der Variation des L- (Helligkeits-)Wertes der lch()-Funktionsnotation.

HTML

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

css

[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

Anpassen der Farbintensität über Chroma

Das folgende Beispiel zeigt die Wirkung der Variation des C- (Chroma-)Wertes der lch()-Funktionsnotation, wobei die Farben an Intensität abnehmen, wenn der C-Wert von vollständig gesättigt zu fast grau abnimmt.

HTML

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 Ausgangsfarben Blau, Rot und Grün deklarieren wir sukzessive kleinere Chromawerte für sie: Beginnend mit voller Farbsättigung am höchsten Wert von 150 (entspricht 100%) bis hinunter zu 3 (entspricht 2%), 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;
}

css

[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

Hätten wir 0 anstelle von 3 und 2%, mit den gleichen Helligkeitswerten verwendet, wären die Farben alle in demselben Grauton. In diesem Beispiel sind sie fast grau.

Farbtöne in LCH

Das folgende Beispiel zeigt Farbpaletten mit unterschiedlichen H- (Farbton-)Werten der lch()-Funktionsnotation.

HTML

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

css

[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 in lch() unterscheiden sich von denen in hsl(). Siehe <hue> für mehr Informationen. In hsl() repräsentiert die sRGB-Farbe 0deg Rot. Im CIELab-Farbraum entspricht 0deg jedoch Magenta, während Rot etwa 41deg entspricht.

Anpassen der Deckkraft mit lch()

Das folgende Beispiel zeigt die Wirkung der Variation des A- (Alpha-)Wertes der lch()-Funktionsnotation. Die red und red-alpha Elemente überlappen das #background-div Element, um den Effekt der Deckkraft zu demonstrieren. Durch die Vergabe eines A-Wertes von 0,4 wird die Farbe zu 40% undurchsichtig.

HTML

html

<div id="background-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;
}

css

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

Ergebnis

Verwendung relativer Farben mit lch()

Dieses Beispiel stylt drei <div> Elemente mit unterschiedlichen Hintergrundfarben, um die Verwendung relativer Farben zur Änderung der Helligkeit einer Farbe mit der lch()-Farbfunktion zu demonstrieren. Das mittlere <div> behält die ursprüngliche --base-color, während das linke und rechte <div> aufgehellte und abgedunkelte Varianten der --base-color erhalten.

Diese Varianten werden unter Verwendung relativer Farben definiert — die --base-color benutzerdefinierte Eigenschaft wird in eine lch()-Funktion übergeben, und die Ausgabefarben haben ihren Helligkeitskanal modifiziert, um den gewünschten Effekt über eine calc()-Funktion zu erzielen. Der aufgehellte Farbton hat 15% zum Helligkeitskanal hinzugefügt, und der abgedunkelte Farbton hat 15% vom Helligkeitskanal abgezogen.

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

css

: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

Die Ausgabe ist wie folgt:

Spezifikationen

Specification
CSS Color Module Level 5 # relative-LCH
CSS Color Module Level 4 # lab-colors

Browser-Kompatibilität

Siehe auch

Liste aller Farbnotationen
Verwendung relativer Farben
CSS Farben Modul
<hue> Datentyp
LCH Farben in CSS: was, warum und wie? von Lea Verou (2020)

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden