oklch()

Nachfolgend finden Sie die Beschreibungen der erlaubten Werte für absolute und relative Farben.

Absolute Wertsyntax

oklch(L C H[ / A])

Die Parameter sind wie folgt:

L

Eine <number> zwischen 0 und 1, eine <percentage> zwischen 0% und 100% oder das Schlüsselwort none (in diesem Fall äquivalent zu 0%). In diesem Fall entspricht die Zahl 0 0% (schwarz) und die Zahl 1 100% (weiß). Dieser Wert gibt die wahrgenommene Helligkeit der Farbe an, oder "Leuchtkraft".

Hinweis: Das L in oklch() ist die wahrgenommene Helligkeit, die sich auf die "Leuchtkraft" 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

Ein <number>, ein <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 minimaler nützlicher Wert ist 0, während das Maximum theoretisch unbegrenzt ist (aber in der Praxis nicht über 0.5 hinausgeht). In diesem Fall ist 0% 0 und 100% ist die Zahl 0.4.

H

Ein <number>, ein <angle> oder das Schlüsselwort none (in diesem Fall äquivalent zu 0deg), das den <hue>-Winkel 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. Siehe das Beispiel Farbtöne in oklch() unten und die <hue>-Referenzseite für weitere Details und Beispiele.

A Optional

Ein <alpha-value> Wert, der den Alphakanalwert der Farbe darstellt, 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 anzugeben. Wenn der A-Kanalwert nicht explizit angegeben ist, beträgt der Standardwert 100%. Wenn er enthalten ist, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Relative Wertsyntax

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

Die Parameter sind wie folgt:

from <color>

Das immer enthaltene Schlüsselwort from beim Definieren einer relativen Farbe, gefolgt von einem <color> Wert, der die Ursprungsfarbe darstellt: Dies ist die ursprüngliche Farbe, die die relative Farbe zugrunde liegt. Die Ursprungsfarbe kann jede gültige <color>-Syntax sein, einschließlich einer anderen relativen Farbe.

L

Eine <number> zwischen 0 und 1, eine <percentage> zwischen 0% und 100% oder das Schlüsselwort none (in diesem Fall gleichwertig zu 0%). Dies stellt den Helligkeitswert der Ausgabefarbe dar. Hier entspricht die Zahl 0 0% (schwarz) und die Zahl 1 100% (weiß).

C

Ein <number>, ein <percentage> oder das Schlüsselwort none (in diesem Fall äquivalent zu 0%). Dieser Wert stellt den Chroma-Wert der Ausgabefarbe dar (ungefähr die "Menge an Farbe"). Sein minimaler nützlicher Wert ist 0, während sein Maximum theoretisch unbegrenzt ist (in der Praxis jedoch 0.5 nicht überschreitet). In diesem Fall ist 0% 0 und 100% ist die Zahl 0.4.

H

Ein <number>, ein <angle> oder das Schlüsselwort none (in diesem Fall äquivalent zu 0deg), das den <hue>-Winkel der Ausgabefarbe darstellt. Siehe ein Beispiel für verschiedene Farbtöne im Abschnitt Beispiele unten.

A Optional

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

Definition der Ausgabekanalkomponenten von relativen Farben

Bei der Verwendung der relativen Farbsyntax innerhalb einer oklch()-Funktion konvertiert der Browser die Ursprungsfarbe in eine äquivalente Oklch-Farbe (sofern sie nicht bereits als solche spezifiziert ist). Die Farbe wird als drei verschiedene Farbkanalwerte definiert — l (Helligkeit), c (Chroma) und h (Farbton) — plus ein Alphakanalwert (alpha). Diese Kanalwerte sind innerhalb der Funktion verfügbar, um bei der Definition der Ausgabefarbkanalwerte verwendet zu werden:

• Der l-Kanalwert wird zu einer <number> zwischen 0 und 1 aufgelöst, inklusiv.
• Der c-Kanalwert wird zu einer <number> zwischen 0 und 0.4 aufgelöst, inklusiv.
• Der h-Kanalwert wird zu einer <number> zwischen 0 und 360 aufgelöst, inklusiv.
• Der alpha-Kanal wird zu einer <number> zwischen 0 und 1 aufgelöst, inklusiv.

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

In den ersten beiden Beispielen unten verwenden wir relative Farbsyntax. Jedoch geben das erste die gleiche Farbe wie die Ursprungsfarbe aus und das zweite gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erstellen wirklich keine relativen Farben! In einer realen Codebasis würden Sie diese vermutlich niemals verwenden und stattdessen einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Lernen über relative oklch()-Syntax aufgenommen.

Beginnen wir mit einer Ursprungsfarbe von hsl(0 100% 50%) (entspricht red). Die folgende Funktion gibt die gleiche Farbe wie die Ursprungsfarbe aus — sie verwendet die l-, c- und h-Kanalwerte (0.627966, 0.257704 und 29.2346) der Ursprungsfarbe als Ausgabekanäle:

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

Die Ausgabe dieser Funktion ist die Farbe oklch(0.627966 0.257704 29.2346).

Die nächste Funktion verwendet absolute Werte für die Ausgabekanäle, wodurch eine völlig andere Farbe entsteht, die nicht auf der Ursprungsfarbe basiert:

oklch(from hsl(0 100% 50%) 42.1% 0.25 328.363)

In diesem Fall ist die Ausgabefarbe oklch(0.421 0.25 328.363).

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

oklch(from hsl(0 100% 50%) 0.8 0.4 h)

In diesem Beispiel:

• Wird die hsl() Ursprungsfarbe in eine äquivalente oklch()-Farbe konvertiert — oklch(0.627966 0.257704 29.2346).
• Wird der H-Kanalwert der Ausgabefarbe auf den H-Kanalwert der oklch()-Ursprungsversion gesetzt — 29.2346.
• Werden die L- und C-Kanalwerte der Ausgabefarbe auf neue, nicht auf der Ursprungsfarbe basierende Werte gesetzt: 0.8 und 0.4 jeweils.

Die endgültige Ausgabefarbe ist oklch(0.8 0.4 29.2346).

In den bisherigen Beispielen in diesem Abschnitt wurden die Alphakanäle weder für die Ursprungs- noch die Ausgabefarben explizit angegeben. Wenn der Alphakanal der Ausgabefarbe nicht angegeben ist, entspricht er dem gleichen Wert wie der Alphakanal der Ursprungsfarbe. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), ist der Standardwert 1. Daher sind der Ursprungs- und der Ausgabewert des Alphakanals in den obigen Beispielen 1.

Werfen wir nun einen Blick auf einige Beispiele, die Werte für den Ursprungs- und Ausgabewert des Alphakanals spezifizieren. Das erste Beispiel spezifiziert den Ausgabewert des Alphakanals als dem Ursprungsalphakanalwert entsprechend, während das zweite einen anderen Ausgabewert des Alphakanals spezifiziert, der nicht mit dem Ursprungsalphakanalwert zusammenhängt.

oklch(from hsl(0 100% 50% / 0.8) l c h / alpha)
/* Computed output color: oklch(0.627966 0.257704 29.2346 / 0.8) */

oklch(from hsl(0 100% 50% / 0.8) l c h / 0.5)
/* Computed output color: oklch(0.627966 0.257704 29.2346 / 0.5) */

Im folgenden Beispiel wird die hsl()-Ursprungsfarbe erneut in das oklch()-Äquivalent konvertiert — oklch(0.627966 0.257704 29.2346). calc()-Berechnungen werden auf die L-, C-, H- und A-Werte angewendet, was zu einer Ausgabefarbe von oklch(0.827966 0.357704 9.23462 / 0.9) führt:

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

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

<hue> = 
  <number>  |
  <angle>   

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

Dieses Beispiel zeigt den Effekt des Variierens des L-Wertes (Helligkeit) der oklch()-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: oklch(10% 0.4 240);
}
[data-color="blue"] {
  background-color: oklch(50% 0.4 240);
}
[data-color="blue-light"] {
  background-color: oklch(90% 0.4 240);
}

[data-color="red-dark"] {
  background-color: oklch(10% 0.4 20);
}
[data-color="red"] {
  background-color: oklch(50% 0.4 20);
}
[data-color="red-light"] {
  background-color: oklch(90% 0.4 20);
}

[data-color="green-dark"] {
  background-color: oklch(10% 0.4 130);
}
[data-color="green"] {
  background-color: oklch(50% 0.4 130);
}
[data-color="green-light"] {
  background-color: oklch(90% 0.4 130);
}

Ergebnis

Das folgende Beispiel zeigt den Effekt des Variierens des C-Wertes (Chroma) der oklch()-Funktionsnotation, wobei die Farben an Intensität abnehmen, wenn 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 Anfangsfarben Blau, Rot und Grün deklarieren wir sukzessiv kleinere Chroma-Werte: beginnend bei voller Farbsättigung mit dem hohen Wert von 0.4 (äquivalent zu 100%) bis hinunter zu 0.01 (äquivalent zu 2%), welches 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: oklch(50% 0.4 240);
}
[data-color="blue-chroma1"] {
  background-color: oklch(50% 0.2 240);
}
[data-color="blue-chroma2"] {
  background-color: oklch(50% 0.1 240);
}
[data-color="blue-chroma3"] {
  background-color: oklch(50% 0.01 240);
}

[data-color="red"] {
  background-color: oklch(50% 100% 20deg);
}
[data-color="red-chroma1"] {
  background-color: oklch(50% 50% 20deg);
}
[data-color="red-chroma2"] {
  background-color: oklch(50% 25% 20deg);
}
[data-color="red-chroma3"] {
  background-color: oklch(50% 2% 20deg);
}

[data-color="green"] {
  background-color: oklch(50% 0.4 130);
}
[data-color="green-chroma1"] {
  background-color: oklch(50% 0.2 130);
}
[data-color="green-chroma2"] {
  background-color: oklch(50% 0.1 130);
}
[data-color="green-chroma3"] {
  background-color: oklch(50% 0.01 130);
}

Ergebnis

Hätten wir 0 anstelle von 0.01 und 2% verwendet und die gleichen Helligkeitswerte gehabt, wären alle Farben in demselben Grauton gewesen. In diesem Beispiel sind sie fast grau.

Das folgende Beispiel zeigt Farbproben mit unterschiedlichen H-Werten (Farbton) der oklch()-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: oklch(50% 0.4 0deg);
}
[data-color="20"] {
  background-color: oklch(50% 0.4 20deg);
}
[data-color="40"] {
  background-color: oklch(50% 0.4 40deg);
}
[data-color="60"] {
  background-color: oklch(50% 0.4 60deg);
}

und so weiter.

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

Ergebnis

Die Farbtonwinkel in oklch() unterscheiden sich von denen in hsl(). Weitere Informationen finden Sie unter <hue>. 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 den Effekt des Variierens des A-Wertes (Alpha) der oklch()-Farb-Funktion. Die red und red-alpha Elemente überlappen sich mit dem #background-div Element, um die Wirkung der Deckkraft zu demonstrieren. Gibt man A den Wert 0.4, macht dies 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: oklch(100% 0.57 217);
  width: 150px;
  height: 40px;
}

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

Ergebnis

Dieses Beispiel gestaltet drei <div>-Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere erhält die unveränderte --base-color, während die linken und rechten aufgehellte und abgedunkelte Varianten dieser --base-color erhalten.

Diese Varianten werden mithilfe relativer Farben definiert — die benutzerdefinierte Eigenschaft Custom Property --base-color wird in eine oklch()-Funktion übergeben, und die Ausgabefarben haben ihren Helligkeitskanal modifiziert, um den gewünschten Effekt über eine calc()-Funktion zu erzielen. Der aufgehellte Farbton hat 0.15 (15%) zur Helligkeit hinzugefügt, und der abgedunkelte Farbton hat 0.15 (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: oklch(from var(--base-color) calc(l + 0.15) c h);
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: oklch(from var(--base-color) calc(l - 0.15) c h);
}

Ergebnis

Das Ergebnis ist wie folgt:

• Liste aller Farbnotationen
• Verwendung von Relativen Farben
• CSS Farben Modul
• <hue> Datentyp
• lch() und oklab() Farb-Funktionen
• Interaktiver Beitrag über den OKLCH-Farbraum (2024)
• OKLCH in CSS: warum wir von RGB und HSL gewechselt sind (2024)
• Ein perceptueller Farbraum für die Bildverarbeitung (2020)