oklch()

Baseline 2023

Newly available

Since ⁨May 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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 sind die Beschreibungen der erlaubten Werte für sowohl absolute als auch relative Farben angegeben.

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

Absolute Wertsyntax

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 (entspricht in diesem Fall 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, also die "Helligkeit".

Hinweis: Das L in oklch() ist die wahrgenommene Helligkeit, die sich auf die "Helligkeit" bezieht, die wir mit unseren Augen visuell 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 (ungefähr die "Menge an Farbe" darstellend). Sein minimal nützlicher Wert ist 0, während das Maximum theoretisch unbegrenzt ist (in der Praxis jedoch nicht über 0.5 hinausgeht). In diesem Fall ist 0% 0 und 100% entspricht der Zahl 0.4.
H: Eine <number>, ein <angle>, oder das Schlüsselwort none (entspricht in diesem Fall 0deg) und stellt den <hue>-Winkel der Farbe dar.

Hinweis: Die Winkel, die bestimmten Farbtönen entsprechen, unterscheiden sich in den sRGB (verwendet von hsl() und hwb()), CIELAB (verwendet von lch()), und Oklab (verwendet von oklch()) Farbräumen. Siehe das Beispiel Farbton in oklch() unten und die <hue>-Referenzseite für mehr Details und Beispiele.
A Optional: Ein <alpha-value>, das den Alpha-Kanal-Wert 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 anzugeben, dass kein Alpha-Kanal vorhanden ist. Wenn der A-Kanal-Wert nicht explizit angegeben ist, wird er standardmäßig auf 100% gesetzt. Wenn enthalten, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Hinweis: Weitere Informationen über die Wirkung von none finden Sie unter Fehlende Farbkomponenten.

Relative Wertsyntax

oklch(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 1, ein <percentage> zwischen 0% und 100%, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dies stellt den Helligkeitswert der Ausgangsfarbe dar. Hier entspricht die Zahl 0 0% (schwarz) und die Zahl 1 100% (weiß).
C: Eine <number>, ein <percentage>, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert stellt den Chroma-Wert der Ausgangsfarbe dar (ungefähr die "Menge an Farbe" darstellend). Sein minimal nützlicher Wert ist 0, während sein Maximum theoretisch unbegrenzt ist (praktisch jedoch nicht über 0.5 hinausgeht). In diesem Fall ist 0% 0 und 100% entspricht der Zahl 0.4.
H: Eine <number>, ein <angle>, oder das Schlüsselwort none (entspricht in diesem Fall 0deg) und stellt den <hue>-Winkel der Ausgangsfarbe dar. Siehe ein Beispiel verschiedener Farbtöne im Abschnitt Beispiele unten.
A Optional: Ein <alpha-value>, das den Alpha-Kanal-Wert der Ausgangsfarbe 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 anzugeben, dass kein Alpha-Kanal vorhanden ist. Wenn der A-Kanal-Wert nicht explizit angegeben ist, wird er standardmäßig auf den Alpha-Kanal-Wert der Ursprungsfarbe gesetzt. Wenn enthalten, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definition der Ausgabe-Kanalkomponenten relativer Farben

Wenn relative Farbsyntax innerhalb einer oklch()-Funktion verwendet wird, wandelt der Browser die Ursprungsfarbe in eine äquivalente OkLCh-Farbe um (wenn sie nicht bereits so angegeben ist). Die Farbe wird als drei separate Farbkanalwerte definiert — l (Helligkeit), c (Chroma) und h (Farbton) — sowie ein Alpha-Kanal-Wert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um sie bei der Definition der Ausgabe-Farbkanalwerte zu verwenden:

Der l-Kanal-Wert wird auf einen <number> zwischen 0 und 1 aufgelöst, einschließlich.
Der c-Kanal-Wert wird auf einen <number> zwischen 0 und 0.4 aufgelöst, einschließlich.
Der h-Kanal-Wert 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.

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

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

Starten 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 Ausgabe dieser Funktion ist die Farbe oklch(0.627966 0.257704 29.2346).

Die nächste Funktion verwendet absolute Werte für die Ausgabekanalwerte 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 Ausgabefarbe oklch(0.421 0.25 328.363).

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

css

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

Dieses Beispiel:

Wandelt die hsl()-Ursprungsfarbe in eine äquivalente oklch()-Farbe um — oklch(0.627966 0.257704 29.2346).
Setzt den H-Kanalwert der Ausgabefarbe auf den H-Kanalwert der äquivalenten oklch()-Ursprungsfarbe — 29.2346.
Setzt die L- und C-Kanalwerte der Ausgabefarbe auf neue Werte, die nicht auf der Ursprungsfarbe basieren: 0.8 und 0.4 jeweils.

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 umgewandelt, damit sie auf eine Weise dargestellt werden kann, die kompatibel ist (d.h. unter Verwendung derselben Kanäle).

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, nimmt er standardmäßig denselben Wert wie der Alpha-Kanal der Ursprungsfarbe an. Wenn der Alpha-Kanal der Ursprungsfarbe nicht spezifiziert ist (und es sich nicht um eine relative Farbe handelt), ist er standardmäßig auf 1 gesetzt. Daher sind die Alpha-Kanalwerte der Ursprungs- und Ausgabefarbe in den obigen Beispielen 1.

Schauen wir uns einige Beispiele an, die die Alpha-Kanalwerte der Ursprungs- und Ausgabefarbe angeben. Das erste Beispiel gibt den Alpha-Kanalwert der Ausgabefarbe als denselben wie den Ursprungs-Alpha-Kanalwert an, während das zweite Beispiel einen anderen Alpha-Kanalwert der Ausgabefarbe angibt, der nicht mit dem Ursprungs-Alpha-Kanalwert in Beziehung steht.

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 die oklch()-Äquivalenz umgewandelt — 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 ihnen Zahlen hinzufügen, wenn Sie sie in Berechnungen verwenden, auch in Fällen, in denen ein Kanal normalerweise <percentage>, <angle> oder andere Werttypen akzeptieren würde. Das Hinzufügen eines <percentage> zu einer <number> funktioniert zum Beispiel 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()-Funktionalnotation.

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()-Funktionalnotation, wobei die Farben in Intensität abnehmen, 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 Startfarben Blau, Rot und Grün deklarieren wir diese mit progressiv kleineren Chromawerten: beginnend bei voller Farbintensität mit dem hohen Wert von 0.4 (entspricht 100%) bis hin 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 statt 0.01 und 2% verwendet, mit denselben Helligkeitswerten, hätten alle Farben denselben Grauton. In diesem Beispiel sind sie fast grau.

Farbtöne in OkLCh

Das folgende Beispiel zeigt Farbfelder mit unterschiedlichen H-Werten (Farbton) der oklch()-Funktionalnotation.

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(). 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.

Anpassung des Alpha-Werts einer Farbe

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

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 relativer Farben mit oklch()

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

Diese Varianten werden unter Verwendung relativer Farben definiert – die --base-color-benutzerdefinierte Eigenschaft wird in eine oklch()-Funktion übergeben, und die Ausgabefarben haben ihren Helligkeitskanal modifiziert, um den gewünschten Effekt mithilfe einer calc()-Funktion zu erzielen. 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 Farbnationen
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 gewechselt sind (2024)
Ein wahrnehmungsorientierter 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