lch()

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

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

Hinweis: Das L in lch() ist die wahrgenommene Helligkeit, die sich auf die "Helligkeit" bezieht, die wir 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>, 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 der "Menge an Farbe"). Sein minimaler nützlicher Wert ist 0%, oder 0, während sein maximaler Wert theoretisch unbegrenzt ist (aber in der Praxis 230 nicht überschreitet), wobei 100% äquivalent zu 150 ist.

H

Eine <number>, ein <angle>, oder das Schlüsselwort none (entspricht 0deg) repräsentierend die Farbton-Winkel der Farbe.

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 sich das Farbtöne in LCH-Beispiel unten und die <hue> Referenzseite für mehr Details und Beispiele an.

A Optional

Ein <alpha-value> repräsentiert den Alphakanal-Wert der Farbe, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig deckend) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alphakanal festzulegen. Wenn der A-Kanalwert nicht explizit angegeben ist, wird standardmäßig ein Wert von 100% angenommen. 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 man eine relative Farbe definiert, gefolgt von einem <color>-Wert, der die Ursprungsfarbe darstellt. Dies ist die ursprüngliche Farbe, auf die die relative Farbe basiert. Die Ursprungsfarbe kann eine beliebige gültige <color>-Syntax sein, einschließlich einer anderen relativen Farbe.

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.

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 an Farbe"). Sein minimaler nützlicher Wert ist 0%, oder 0, während der maximale Wert theoretisch unbegrenzt ist (aber in der Praxis 230 nicht überschreitet), wobei 100% äquivalent zu 150 ist.

H

Eine <number>, ein <angle>, oder das Schlüsselwort none (entspricht 0deg) repräsentiert den Farbton-Winkel der Ausgabefarbe. Siehe das Beispiel Farbton unten.

A Optional

Ein <alpha-value> repräsentiert den Alphakanal-Wert der Ausgabefarbe, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig deckend) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alphakanal festzulegen. Wenn der A-Kanalwert nicht explizit angegeben ist, wird standardmäßig der Alphakanal-Wert der Ursprungsfarbe genommen. Wenn er enthalten ist, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definieren der Ausgangskanalkomponenten der relativen Farbe

Bei der Verwendung der relativen Farbsyntax innerhalb einer lch()-Funktion konvertiert der Browser die Ursprungsfarbe in eine äquivalente Lch-Farbe (wenn sie nicht bereits als solche angegeben ist). Die Farbe ist als drei einzelne Farbkanalwerte definiert — l (Helligkeit), c (Chroma) und h (Farbton) — plus ein Alphakanalwert (alpha). Diese Kanalwerte sind innerhalb der Funktion verfügbar, um sie zu verwenden, wenn die Ausgangsfarbkanalwerte definiert werden:

• Der l-Kanalwert wird auf einen <number> zwischen 0 und 100 aufgelöst, einschließlich.
• Der c-Kanalwert wird auf einen <number> zwischen 0 und 150 aufgelöst, einschließlich.
• Der h-Kanalwert wird auf einen <number> zwischen 0 und 360 aufgelöst, einschließlich.
• Der alpha-Kanal wird auf einen <number> zwischen 0 und 1 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 untersuchen, um diese zu veranschaulichen.

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Das erste gibt jedoch dieselbe Farbe wie die Ursprungsfarbe aus und das zweite gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen eigentlich keine relativen Farben! Sie würden diese wahrscheinlich nicht in einem realen Codebase verwenden und stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Erlernen der relativen lch()-Syntax aufgenommen.

Beginnen wir mit einer Ursprungsfarbe von hsl(0 100% 50%) (entspricht 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 Ausgangskanalwerte:

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

Diese Funktion gibt die Farbe lch(54.29 106.854 40.856) aus.

Die nächste Funktion verwendet absolute Werte für die Ausgangsfarbkanalwerte 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 ausgegebene Farbe lch(29.6871 66.83 327.109).

Die folgende Funktion erstellt eine relative Farbe, die auf der Ursprungsfarbe basiert:

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 der Ausgabefarbe wird auf den des äquivalenten H-Kanalwerts der lch()-Ursprungsfarbe gesetzt — 40.856.
• Die L- und C-Kanalwerte der Ausgabefarbe werden auf neue Werte gesetzt, die nicht auf der Ursprungsfarbe basieren: 70 und 150 jeweils.

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

In den Beispielen, die wir bisher in diesem Abschnitt gesehen haben, wurden die Alphakanäle weder für die Ursprungs- noch für die Ausgabefarben explizit angegeben. Wenn der Ausgabefarben-Alphakanal nicht angegeben ist, wird standardmäßig der gleiche Wert wie der Alphakanalwert der Ursprungsfarbe angenommen. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), wird standardmäßig 1 angenommen. Daher sind die Ursprungs- und die Ausgabefarben-Alphakanalwerte in den obigen Beispielen 1.

Sehen wir uns einige Beispiele an, die Ursprungs- und Ausgabefarben-Alphakanalwerte angeben. Das erste gibt den Ausgabefarben-Alphakanalwert als den gleichen wie den Ursprung-Alphakanalwert an, während das zweite einen anderen Ausgabefarben-Alphakanalwert angibt, der nichts mit dem Ursprung-Alphakanalwert 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 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 Wirkung der Variation des L (Helligkeit) Werts der lch()-Funktionalnotation.

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 Wirkung der Variation des C (Chroma) Werts der lch()-Funktionalnotation, mit Farben, die in der Intensität abnehmen, während der C Wert von voll 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, deklarieren wir schrittweise kleinere Werte für Chroma an ihnen: ausgehend von der vollen Farbsättigung am höchsten Wert von 150 (äquivalent zu 100%) bis 3 (äquivalent zu 2%), das 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

Hätten wir 0 statt 3 und 2% verwendet, bei denselben Helligkeitswerten, wären die Farben alle der gleiche Grauton gewesen. In diesem Beispiel sind sie fast grau.

Das folgende Beispiel zeigt Farbfelder mit verschiedenen H (Farbton) Werten der lch()-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 in lch() unterscheiden sich von denen in hsl(). Sehen Sie <hue> für mehr Informationen. In hsl() repräsentiert die sRGB-Farbe 0deg Rot. Im CIELab-Farbraum entspricht 0deg jedoch Magenta, während Rot ungefähr 41deg ist.

Das folgende Beispiel zeigt die Wirkung der Variation des A (Alpha) Werts der lch()-Funktionalnotation. Die red und red-alpha Elemente überlappen das #background-div Element, um den Effekt der Deckkraft zu demonstrieren. Ein A-Wert von 0.4 macht die Farbe zu 40% deckend.

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 verschiedenen Hintergrundfarben, um die Verwendung relativer Farben zur Änderung der Helligkeit einer Farbe mit der lch()-Farb-Funktion zu demonstrieren. Das mittlere <div> behält die ursprüngliche --base-color bei, während die linken und rechten <div>s aufgehellte und abgedunkelte Varianten 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 Ausgangsfarben haben ihren Helligkeitskanal angepasst, um den gewünschten Effekt über eine calc()-Funktion zu erzielen. Die aufgehellte Farbe hat 15% zur Helligkeit hinzugefügt, und die abgedunkelte Farbe hat 15% von der Helligkeit 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

Die Ausgabe ist wie folgt:

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