`lch()` CSS-Funktion

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Mai 2023 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die lch() Funktionsnotation gibt eine bestimmte Farbe im LCH Farbraum an, der Helligkeit, Chroma und Farbton repräsentiert. Sie verwendet dieselbe L-Achse wie die lab() Farb-Funktion des CIELab Farbraums, jedoch mit den Polarkoordinaten C (Chroma) und H (Farbton).

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

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

Hinweis: Normalerweise gilt, wenn Prozentwerte in CSS eine numerische Entsprechung haben, dass 100% gleich der Zahl 1 ist. Dies ist bei lch() nicht der Fall. Hier entspricht 100% der Zahl 100 für den L-Wert und 150 für den C-Wert.

Syntax für absolute Werte

lch(L C H[ / A])

Die Parameter sind wie folgt:

L: Eine <number> zwischen 0 und 100, eine <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() ist die wahrgenommene Helligkeit, auf die wir uns verlassen, wenn wir sie mit unseren Augen visuell wahrnehmen. Dies unterscheidet sich vom L in hsl(), wo es die Helligkeit im Vergleich zu anderen Farben darstellt.
C: Eine <number>, eine <percentage> oder das Schlüsselwort none (in diesem Fall äquivalent zu 0%). Dieser Wert ist ein Maß für das Chroma der Farbe (ungefähr die "Menge an Farbe"). Sein minimal nützlicher Wert ist 0% oder 0, während sein Maximalwert theoretisch unbegrenzt ist (aber in der Praxis 230 nicht überschreitet), wobei 100% gleich 150 ist.
H: Eine <number>, ein <angle>, oder das Schlüsselwort none (entspricht 0deg) und repräsentiert den <hue> Winkel der Farbe.

Hinweis: Die den bestimmten Farbtönen entsprechenden Winkel unterscheiden sich zwischen den sRGB (verwendet von hsl() und hwb()), CIELAB (verwendet von lch()), und Oklab (verwendet von oklch()) Farbräumen. Sehen Sie sich das Farbtonbeispiel in LCH unten und die <hue> Referenzseite für detaillierte Informationen und Beispiele an.
A Optional: Ein <alpha-value>, der den Alpha-Kanal-Wert der Farbe angibt, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig undurchsichtig) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben ist, wird er standardmäßig auf 100% gesetzt. Wenn enthalten, wird der Wert von einem Schrägstrich (/) vorangestellt.

Hinweis: Weitere Informationen zur Auswirkung von none finden Sie unter Fehlende Farbkomponenten.

Syntax für relative Werte

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

Die Parameter sind wie folgt:

from <color>: Das Schlüsselwort from wird immer beim Definieren einer relativen Farbe angegeben, gefolgt von einem <color> Wert, der die Ursprungsfarbe darstellt. Dies ist die Originalfarbe, auf der die relative Farbe basiert. Die Ursprungsfarbe kann jede gültige <color> Syntax sein, einschließlich einer weiteren relativen Farbe.
L: Eine <number> zwischen 0 und 100, eine <percentage> zwischen 0% und 100% oder das Schlüsselwort none (äquivalent zu 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>, eine <percentage> oder das Schlüsselwort none (in diesem Fall äquivalent zu 0%). Dieser Wert repräsentiert den Chroma-Wert der Ausgabefarbe (ungefähr die "Menge an Farbe"). Sein minimal nützlicher Wert ist 0% oder 0, während sein Maximalwert theoretisch unbegrenzt ist (aber in der Praxis 230 nicht überschreitet), wobei 100% gleich 150 ist.
H: Eine <number>, ein <angle>, oder das Schlüsselwort none (entspricht 0deg) und repräsentiert den <hue> Winkel der Ausgabefarbe. Sehen Sie sich das Farbtonbeispiel unten an.
A Optional: Ein <alpha-value>, der den Alpha-Kanal-Wert der Ausgabefarbe angibt, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig undurchsichtig) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben ist, wird er standardmäßig auf den Alpha-Wert der Ursprungsfarbe gesetzt. Wenn enthalten, wird der Wert von einem Schrägstrich (/) vorangestellt.

Definition von relativen Farb-Ausgangskanal-Komponenten

Wenn Sie relative Farbsyntax innerhalb einer lch() Funktion verwenden, wandelt der Browser die Ursprungsfarbe in eine äquivalente Lch-Farbe um (wenn sie nicht bereits so angegeben ist). Die Farbe wird als drei unterschiedliche Farbkanalwerte definiert — l (Helligkeit), c (Chroma) und h (Farbton) — plus einem Alpha-Kanalwert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, die bei der Definition der Ausgangsfarbkanal-Werte verwendet werden kann:

Der l-Kanalwert wird zu einer <number> zwischen 0 und 100 aufgelöst, einschließlich.
Der c-Kanalwert wird zu einer <number> zwischen 0 und 150 aufgelöst, einschließlich.
Der h-Kanalwert wird zu einer <number> zwischen 0 und 360 aufgelöst, einschließlich.
Der alpha-Kanal wird zu einer <number> zwischen 0 und 1 aufgelöst, einschließlich.

Beim Definieren einer relativen Farbe können die unterschiedlichen Kanäle der Ausgabefarbe auf mehrere verschiedene Arten ausgedrückt werden. Unten werden wir einige Beispiele studieren, um diese zu illustrieren.

In den ersten beiden Beispielen unten verwenden wir relative Farbsyntax. Jedoch gibt das erste dieselbe Farbe wie die Ursprungsfarbe aus, und das zweite gibt eine Farbe aus, die nicht auf der Ursprungsfarbe basiert. Sie erstellen wirklich keine relativen Farben! Wahrscheinlich würden Sie diese in einem echten Code-Projekt nie verwenden und stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Lernen über relative lch() Syntax aufgenommen.

Beginnen wir mit der Ursprungsfarbe hsl(0 100% 50%) (entspricht rot). Die folgende Funktion gibt dieselbe Farbe wie die Ursprungsfarbe aus — sie verwendet die l, c und h Kanalwerte (54.29, 106.854 und 40.856) der Ursprungsfarbe als Ausgangskanalwerte:

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 Ausgangsfarbkanalwerte und gibt eine vollständig andere Farbe aus, die nicht auf der Ursprungsfarbe basiert:

css

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

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

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

css

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

Dieses Beispiel:

Wandelt die hsl() Ursprungsfarbe in eine äquivalente lch() Farbe um — lch(54.29 106.854 40.856).
Setzt den H-Kanalwert für die Ausgabefarbe auf den H-Kanalwert der äquivalenten lch() Ursprungsversion — 40.856.
Setzt die L- und C-Kanalwerte der Ausgabefarbe auf neue Werte, die nicht auf der Ursprungsfarbe basieren: 70 und 150 respektive.

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

Hinweis: Wie oben erwähnt, wird die Ursprungsfarbe, wenn die Ausgabefarbe ein anderes Farbmodell als die Ursprungsfarbe verwendet, im Hintergrund in dasselbe Modell wie die Ausgabefarbe konvertiert, um sie in einer kompatiblen Weise darzustellen (d.h. mit den gleichen 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 angegeben. Wenn der Alpha-Kanalwert der Ausgabefarbe nicht angegeben ist, wird er standardmäßig auf denselben Wert wie der Alpha-Kanalwert der Ursprungsfarbe gesetzt. Wenn der Alpha-Kanalwert der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), wird er standardmäßig auf 1 gesetzt. Daher sind die Alpha-Kanalwerte für Ursprung und Ausgabe für die obigen Beispiele 1.

Lassen Sie uns einige Beispiele betrachten, die Ursprungs- und Ausgangskanal-Alpha-Werte spezifizieren. Das erste Beispiel spezifiziert den Ausgangs-Alpha-Kanalwert als denselben wie den Ursprungs-Alpha-Kanalwert, während das zweite einen anderen Ausgangs-Alpha-Kanalwert angibt, der nicht mit dem Ursprungs-Alpha-Kanalwert zusammenhängt.

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 die lch() Äquivalente umgewandelt — lch(54.29 106.854 40.856). calc() Berechnungen werden auf die L, C, H und A Werte angewendet, 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 in <number> Werte aufgelöst werden, müssen Sie Zahlen zu ihnen hinzufügen, wenn Sie sie in Berechnungen verwenden, selbst in Fällen, in denen ein Kanal normalerweise <percentage>, <angle> oder andere Wertetypen akzeptieren würde. Das Hinzufügen eines <percentage> zu einer <number> funktioniert beispielsweise 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

Anpassung der Helligkeit einer Farbe

Dieses Beispiel zeigt die Auswirkungen der Variation des L (Helligkeit) 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

Anpassung der Farbintensität durch Chroma

Das folgende Beispiel zeigt die Auswirkungen der Variation des C (Chroma) Wertes der lch() Funktionsnotation, wobei die Intensität der Farben abnimmt, während der C-Wert von vollständig gesättigt bis 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 schrittweise kleinere Chroma-Werte für sie: beginnend mit voller Farbsättigung bei dem höchsten Wert von 150 (entspricht 100%) bis 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% verwendet, wären die Farben bei denselben Helligkeitswerten alle dieselbe Graustufe gewesen. In diesem Beispiel sind sie fast grau.

Farbtöne in LCH

Das folgende Beispiel zeigt Farbflächen 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 weitere Informationen. In hsl() repräsentiert die sRGB Farbe 0deg Rot. Im CIELab Farbraum entspricht 0deg jedoch Magenta, während Rot ungefähr 41deg ist.

Anpassung der Opazität mit lch()

Das folgende Beispiel zeigt die Auswirkungen der Variation des A (Alpha) Wertes der lch() Funktionsnotation. Die red und red-alpha Elemente überlappen das #background-div Element, um die Auswirkung der Opazität zu veranschaulichen. Indem man A einen Wert von 0.4 gibt, wird die Farbe zu 40% opak.

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

Verwenden relativer Farben mit lch()

Dieses Beispiel gestaltet drei <div> Elemente mit unterschiedlichen Hintergrundfarben und zeigt die Verwendung von relativen Farben, um die Helligkeit einer Farbe mit der lch() Farb-Funktion zu ändern. Das mittlere <div> behält die ursprüngliche --base-color, während die linke und rechte <div>s mit aufgehellten und abgedunkelten Varianten der --base-color versehen sind.

Diese Varianten werden mit relativen Farben definiert — die benutzerdefinierte Eigenschaft --base-color wird in eine lch() Funktion übergeben, und die Ausgangsfarben haben ihren Helligkeitskanal modifiziert, um den gewünschten Effekt über eine calc() Funktion zu erzielen. Die aufgehellte Farbe hat 15% zum Helligkeitskanal hinzugefügt, und die abgedunkelte Farbe 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);
}