oklch()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Mai 2023⁩.

* Some parts of this feature may have varying levels of support.

Die oklch()-Funktionsnotation drückt eine gegebene Farbe im Oklab-Farbraum aus. oklch() ist die zylindrische Form von oklab(), wobei die gleiche L-Achse verwendet wird, jedoch mit polaren Chroma- (C) und Farbtonkoordinaten (h).

Syntax

css

/* Absolute values */
oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)

/* Relative values */
oklch(from green l c h / 0.5)
oklch(from #123456 calc(l + 0.1) c h)
oklch(from hsl(180 100% 50%) calc(l - 0.1) c h)
oklch(from var(--color) l c h / calc(alpha - 0.1))

Werte

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

Hinweis: Normalerweise gilt, wenn Prozentwerte ein numerisches Äquivalent in CSS haben, dass 100% der Zahl 1 entspricht. Dies ist nicht der Fall für alle oklch()-Komponentenwerte. Hier entspricht 100% dem Wert 0.4 für den C-Wert.

Absolute Wertesyntax

oklch(L C H[ / A])

Die Parameter sind wie folgt:

L: Eine <number> zwischen 0 und 1, ein <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 oder "Brightness" der Farbe an.

Hinweis: Das L in oklch() ist die wahrgenommene Helligkeit, die sich auf die "Brightness" 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 (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 0.5 übersteigt). In diesem Fall entspricht 0% 0 und 100% der Zahl 0.4.
H: Eine <number>, ein <angle>, oder das Schlüsselwort none (in diesem Fall äquivalent zu 0deg) und repräsentiert den <hue>-Winkel der Farbe.

Hinweis: Die Winkel, die bestimmten Farbtönen entsprechen, unterscheiden sich über die sRGB (verwendet von hsl() und hwb()), CIELAB (verwendet von lch()) und Oklab (verwendet von oklch()) Farbräume hinweg. Sehen Sie sich das Beispiel Farbtöne in oklch() unten und die Referenzseite <hue> für mehr Details und Beispiele an.
A Optional: Ein <alpha-value> repräsentiert den Alphakanalwert der Farbe, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig opak) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alphakanal anzugeben. Wird der A-Kanalwert nicht explizit angegeben, lautet der Standardwert 100%. Wenn er eingeschlossen ist, wird der Wert durch einen Schrägstrich (/) vorangestellt.

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

Relative Wertesyntax

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

Die Parameter sind wie folgt:

from <color>: Das Schlüsselwort from wird immer angegeben, 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 1, ein <percentage> zwischen 0% und 100%, oder das Schlüsselwort none (in diesem Fall äquivalent zu 0%). Dies repräsentiert den Helligkeitswert der Ausgabefarbe. Hier entspricht die Zahl 0 0% (schwarz) und die Zahl 1 100% (weiß).
C: Eine <number>, ein <percentage>, oder das Schlüsselwort none (in diesem Fall äquivalent zu 0%). Dieser Wert repräsentiert den Chromawert der Ausgabefarbe (ungefähr die "Menge an Farbe"). Sein minimaler nützlicher Wert ist 0, während sein Maximum theoretisch unbegrenzt ist (aber in der Praxis nicht 0.5 übersteigt). In diesem Fall entspricht 0% 0 und 100% der Zahl 0.4.
H: Eine <number>, ein <angle>, oder das Schlüsselwort none (in diesem Fall äquivalent zu 0deg) und repräsentiert den <hue>-Winkel der Ausgabefarbe. Sehen Sie sich eine Probe der verschiedenen Farbtöne im Abschnitt Beispiele unten an.
A Optional: Ein <alpha-value> repräsentiert den Alphakanalwert der Ausgabefarbe, wobei die Zahl 0 0% (vollständig transparent) und 1 100% (vollständig opak) entspricht. Zusätzlich kann das Schlüsselwort none verwendet werden, um explizit keinen Alphakanal anzugeben. Wird der A-Kanalwert nicht explizit angegeben, lautet der Standardwert der Alphawert der Ursprungsfarbe. Wenn er eingeschlossen ist, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definieren von Ausgabekanal-Komponenten für relative Farben

Beim Verwenden der Relativfarbensyntax innerhalb einer oklch()-Funktion konvertiert der Browser die Ursprungsfarbe in eine äquivalente OkLCh-Farbe (falls sie nicht bereits als solche spezifiziert ist). Die Farbe wird als drei eigenständige Farbkanalwerte — l (Helligkeit), c (Chroma) und h (Farbton) — plus einem Alphakanalwert (alpha) definiert. Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um sie bei der Definition der Ausgabefarbkanalwerte zu verwenden:

Der l-Kanalwert wird auf eine <number> zwischen 0 und 1 aufgelöst, einschließlich.
Der c-Kanalwert wird auf eine <number> zwischen 0 und 0.4 aufgelöst, einschließlich.
Der h-Kanalwert wird auf eine <number> zwischen 0 und 360 aufgelöst, einschließlich.
Der alpha-Kanal wird auf eine <number> zwischen 0 und 1 aufgelöst, einschließlich.

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

In den ersten beiden untenstehenden Beispielen verwenden wir die Relativfarbensyntax. Das erste gibt jedoch die gleiche 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! In einem echten Codebase würden Sie sie wahrscheinlich nie verwenden und stattdessen einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Lernen über die relative oklch()-Syntax hinzugefügt.

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 (0.627966, 0.257704 und 29.2346) der Ursprungsfarbe als Ausgabekanalwerte:

css

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

Die Ausgangsfarbe dieser Funktion ist oklch(0.627966 0.257704 29.2346).

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

css

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

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

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

css

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

Dieses Beispiel:

Konvertiert die hsl()-Ursprungsfarbe in eine äquivalente oklch()-Farbe — oklch(0.627966 0.257704 29.2346).
Setzt den H-Kanalwert für die Ausgabefarbe auf den des H-Kanalwerts des oklch()-Äquivalents der Ursprungsfarbe — 29.2346.
Setzt die L- und C-Kanalwerte der Ausgabefarbe auf neue Werte, die nicht auf der Ursprungsfarbe basieren: 0.8 bzw. 0.4.

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

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

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 wird, entspricht er standardmäßig dem der Ursprungsfarbe. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben wird (und es keine relative Farbe ist), wird er standardmäßig auf 1 gesetzt. Daher sind die Alphakanalwerte der Ursprungs- und Ausgabefarbe in den obigen Beispielen 1.

Sehen wir uns einige Beispiele an, die die Ursprungs- und Ausgabefarb-Alphakanäle explizit angeben. Das erste gibt den Alphakanalwert der Ausgabe als gleich dem der Ursprungsfarbe an, während das zweite einen anderen Alphakanalwert der Ausgabe angibt, der nicht mit dem der Ursprungsfarbe zusammenhängt.

css

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:

css

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

Hinweis: Da die Ursprungsfarbkanalwerte auf <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 Werttypen akzeptieren würde. Das Hinzufügen eines <percentage> zu einem <number> funktioniert beispielsweise nicht.

Formale Syntax

<oklch()> = 
  oklch( [ 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 Wirkung der Variation des L-Werts (Helligkeit) der oklch()-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: 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

Anpassung der Farbintensität über Chroma

Das folgende Beispiel zeigt die Wirkung der Variation des C-Werts (Chroma) der oklch()-Funktionsnotation, wobei die Farben an Intensität abnehmen, wenn der C-Wert von voll gesättigt auf 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 geben wir schrittweise kleinere Werte für das Chroma an: beginnend mit voller Farbsättigung beim hohen Wert von 0.4 (entspricht 100%) bis zu 0.01 (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: 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% mit den gleichen Helligkeitswerten verwendet, hätten alle Farben denselben Grauton gehabt. In diesem Beispiel sind sie fast grau.

Farbtöne in OkLCh

Das folgende Beispiel zeigt Farbproben mit unterschiedlichen H-Werten (Farbton) der oklch()-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: 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(). 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 des Alpha-Werts einer Farbe

Das folgende Beispiel zeigt die Wirkung der Variation des A-Werts (Alpha) der oklch()-Funktion. Die Elemente red und red-alpha überlappen das Element #background-div, um die Wirkung der Transparenz zu demonstrieren. Ein Wert von 0.4 für A macht 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: oklch(100% 0.57 217);
  width: 150px;
  height: 40px;
}

css

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

Ergebnis

Verwendung von relativen Farben mit oklch()

Dieses Beispiel stylt drei <div>-Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere erhält die unveränderte --base-color, während das linke und rechte aufgehellte bzw. abgedunkelte Varianten dieser --base-color erhalten.

Diese Varianten werden durch die Verwendung relativer Farben definiert — die --base-color benutzerdefinierte Eigenschaft wird in eine oklch()-Funktion übergeben, und die Ausgabefarben haben ihren Helligkeitskanal zur Erreichung des gewünschten Effekts modifiziert durch eine calc()-Funktion. Die aufgehellte Farbe hat 0.15 (15%) zum Helligkeitskanal hinzugefügt, und die abgedunkelte Farbe hat 0.15 (15%) vom Helligkeitskanal subtrahiert.

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

Spezifikationen

Specification
CSS Color Module Level 5 # relative-Oklch
CSS Color Module Level 4 # ok-lab

Browser-Kompatibilität

Siehe auch

Liste aller Farbnotations
Verwendung relativer Farben
CSS-Farben-Modul
<hue> Datentyp
lch() und oklab() Farb Funktionen
Interaktiver Beitrag zum OkLCh-Farbraum (2024)
OKLCH in CSS: warum wir von RGB und HSL abgewichen sind (2024)
Ein perzeptueller Farbraum für die Bildverarbeitung (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