lch()

Unten sind Beschreibungen der erlaubten Werte für sowohl absolute als auch relative Farben aufgeführt.

Absolute Wertsyntax

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 bestimmt die Helligkeit der Farbe im CIELab-Farbraum.

Hinweis: Das L in lch() ist die wahrgenommene Helligkeit, die sich auf die "Helligkeit" bezieht, die wir visuell mit unseren Augen wahrnehmen. Dies unterscheidet sich von dem L in hsl(), wo es die Helligkeit im Vergleich zu anderen Farben darstellt.

C

Eine <number>, ein <percentage>, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert ist ein Maß für das Chroma der Farbe (in etwa die "Menge der Farbe"). Sein minimal nützlicher Wert ist 0%, oder 0, während sein Maximum theoretisch unbegrenzt ist (praktisch jedoch nicht über 230 hinausgeht), wobei 100% 150 entspricht.

H

Eine <number>, eine <angle>, oder das Schlüsselwort none (entspricht 0deg), das den Farbtonwinkel der Farbe darstellt.

Hinweis: Die Winkel, die bestimmten Farbtönen entsprechen, unterscheiden sich zwischen den sRGB (verwendet von hsl() und hwb()), CIELAB (verwendet von lch()), und Oklab (verwendet von oklch()) Farbräumen. Sehen Sie das Beispiel zu Farbtönen in LCH 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. Zusätzlich kann das Schlüsselwort none verwendet werden, um keinen Alpha-Kanal explizit anzugeben. Wenn der A-Kanal-Wert nicht explizit angegeben wird, wird er auf 100% gesetzt. Wenn er enthalten ist, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Relative Wertsyntax

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 bestimmt die Helligkeit der Farbe im CIELab-Farbraum.

C

Eine <number>, ein <percentage>, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert stellt den Chroma-Wert der Ausgabefarbe dar (ungefähr die "Menge der Farbe"). Sein minimal nützlicher Wert ist 0%, oder 0, während sein Maximum theoretisch unbegrenzt ist (praktisch jedoch nicht über 230 hinausgeht), wobei 100% 150 entspricht.

H

Eine <number>, eine <angle>, oder das Schlüsselwort none (entspricht 0deg), das den Farbtonwinkel der Ausgabefarbe darstellt. Sehen Sie das Farbtonbeispiel unten.

A Optional

Ein <alpha-value>, der den Alpha-Kanal-Wert der Ausgabefarbe darstellt, 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 keinen Alpha-Kanal explizit anzugeben. Wenn der A-Kanal-Wert nicht explizit angegeben wird, wird er auf den Alpha-Kanal-Wert der Ursprungsfarbe gesetzt. Wenn er enthalten ist, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definition von Ausgabekanalkomponenten für relative Farben

Bei der Verwendung der relativen Farbsyntax innerhalb einer lch()-Funktion wandelt der Browser die Ursprungsfarbe in eine äquivalente Lch-Farbe um (wenn sie nicht bereits als solche angegeben ist). Die Farbe wird als drei verschiedene Farbkanalwerte definiert — l (Helligkeit), c (Chroma) und h (Farbton) — plus einem Alpha-Kanal-Wert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um bei der Definition der Ausgabe-Farbkanalwerte verwendet zu werden:

• Der l-Kanalwert wird in einen <number> zwischen 0 und 100 aufgelöst.
• Der c-Kanalwert wird in einen <number> zwischen 0 und 150 aufgelöst.
• Der h-Kanalwert wird in einen <number> zwischen 0 und 360 aufgelöst.
• Der alpha-Kanal wird in einen <number> zwischen 0 und 1 aufgelöst.

Bei der Definition einer relativen Farbe können die verschiedenen Kanäle der Ausgabefarbe auf verschiedene Weise ausgedrückt werden. Unten werden einige Beispiele untersucht, um diese zu verdeutlichen.

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Das erste Beispiel gibt allerdings dieselbe Farbe aus wie die Ursprungfarbe, und das zweite Beispiel gibt eine Farbe aus, die überhaupt nicht auf der Ursprungfarbe basiert. Sie erzeugen im Grunde keine relativen Farben! Solche Fälle würden in einem echten Code wahrscheinlich nie verwendet werden, und es würden vermutlich einfach absolute Farbwerte genutzt werden. Wir haben diese Beispiele als Ausgangspunkt präsentiert, um die relative lch()-Syntax zu verstehen.

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

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

Die Ausgabefarbe dieser Funktion ist lch(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 Ursprungfarbe basiert:

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 erzeugt eine relative Farbe basierend auf der Ursprungfarbe:

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 Ursprungslchfarbe — 40.856.
• Setzt die L- und C-Kanalwerte der Ausgabefarbe auf neue Werte, die nicht auf der Ursprungfarbe basieren: 70 und 150 respektive.

Die finale Ausgabefarbe ist lch(70 150 40.856).

In den bisher in diesem Abschnitt gezeigten 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, übernimmt er den gleichen Wert wie der Alpha-Kanal der Ursprungfarbe. Wenn der Alpha-Kanal der Ursprungfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), ist der Standardwert 1. Daher sind die Ursprungs- und Ausgabe-Alpha-Kanalwerte in den obigen Beispielen 1.

Schauen wir uns einige Beispiele an, die die Ursprungs- und Ausgabefarben-Alpha-Kanalwerte angeben. Das erste Beispiel gibt an, dass der Ausgabefarben-Alpha-Kanalwert dem Alpha-Kanalwert der Ursprung entspricht, während das zweite Beispiel einen anderen Ausgabefarben-Alpha-Kanalwert angibt, der nicht mit dem Ursprung-Alpha-Kanalwert in Verbindung steht.

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 angewendet, was zu einer Ausgabefarbe von lch(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))

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

<hue> = 
  <number>  |
  <angle>   

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

Dieses Beispiel zeigt die Auswirkung einer Variierung des L- (Helligkeit) Wertes der lch()-Funktionsnotation.

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

Das folgende Beispiel zeigt die Auswirkung einer Variierung des C- (Chroma) Wertes der lch()-Funktionsnotation, wobei Farben in ihrer Intensität abnehmen, während der C-Wert von vollständig gesättigt bis 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 Ausgangsfarben Blau, Rot und Grün definieren wir progressiv kleinere Werte für Chroma: Beginnend bei voller Farbsättigung mit dem höchsten Wert von 150 (entspricht 100%) bis hin 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;
}

[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 wir 0 anstelle von 3 und 2% verwendet hätten, mit denselben Helligkeitswerten, wären die Farben alle der gleiche Grauton gewesen. In diesem Beispiel sind sie fast grau.

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

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 in lch() unterscheiden sich von denen in hsl(). Weitere Informationen finden Sie unter <hue>. In hsl() bedeutet der sRGB-Farbton 0deg rot. Im CIELab-Farbraum entspricht 0deg jedoch Magenta, während rot ungefähr 41deg ist.

Das folgende Beispiel zeigt die Auswirkung einer Variierung des A- (Alpha) Wertes der lch()-Funktionsnotation. Die red- und red-alpha-Elemente überlappen sich mit dem #background-div-Element, um die Auswirkung der Opazität zu demonstrieren. Wenn A den Wert 0.4 erhält, wird die Farbe zu 40% opak.

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

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

Ergebnis

Dieses Beispiel stylt drei <div>-Elemente mit unterschiedlichen Hintergrundfarben und zeigt die Verwendung von relativen Farben zur Änderung der Helligkeit einer Farbe mit der lch()-Farbfunktion. Das mittlere <div> behält die ursprüngliche --base-color, während die linken und rechten <div>s aufgehellte und verdunkelte Varianten von der --base-color erhalten.

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

: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:

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