oklch()

Syntax

/* 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 erlaubten Werte sowohl für absolute als auch relative Farben.

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 oder "Leuchtkraft" der Farbe an.

Hinweis: Das L in oklch() steht für die wahrgenommene Helligkeit, die die "Leuchtkraft" beschreibt, die wir mit unseren Augen 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 (ungefähr die "Farbmenge"). 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% ist die Zahl 0.4.

H

Eine <number>, ein <angle>, oder das Schlüsselwort none (entspricht in diesem Fall 0deg) und stellt den Winkel des Farbtons <hue> 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-Farbräumen (verwendet von oklch()). Siehe das Beispiel Farbtöne in oklch() unten und die <hue>-Referenzseite für weitere Details und Beispiele.

A Optional

Ein <alpha-value>, das den Alphakanal-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 ausdrücklich keinen Alphakanal anzugeben. Wenn der Wert des A-Kanals nicht explizit angegeben wird, nimmt er standardmäßig 100% an. Wenn enthalten, wird dem Wert ein Schrägstrich (/) vorangestellt.

Relative Wertsyntax

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

Die Parameter sind wie folgt:

from <color>

Das Schlüsselwort from wird immer verwendet, 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 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 (entspricht in diesem Fall 0%). Dieser Wert repräsentiert den Chroma-Wert der Ausgabefarbe (ungefähr die "Farbmenge"). Sein minimal nützlicher Wert ist 0, während sein Maximum theoretisch unbegrenzt ist (in der Praxis jedoch nicht über 0.5 hinausgeht). In diesem Fall ist 0% 0 und 100% ist die Zahl 0.4.

H

Eine <number>, ein <angle>, oder das Schlüsselwort none (entspricht in diesem Fall 0deg), das den <hue>-Winkel der Ausgabefarbe repräsentiert. Siehe ein Beispiel verschiedener Farbtöne im Abschnitt Beispiele unten.

A Optional

Ein <alpha-value>, das den Alphakanal-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 ausdrücklich keinen Alphakanal anzugeben. Wenn der Wert des A-Kanals nicht explizit angegeben wird, nimmt er standardmäßig den Alphakanal-Wert der Ursprungsfarbe an. Wenn enthalten, wird dem Wert ein Schrägstrich (/) vorangestellt.

Definition von Relativen Farbkanalkomponenten-Ausgaben

Bei der Verwendung der relativen Farbsyntax innerhalb einer oklch()-Funktion konvertiert der Browser die Ursprungsfarbe in eine äquivalente OkLCh-Farbe (falls sie nicht bereits als solche angegeben ist). Die Farbe wird als drei verschiedene Farbkanalwerte definiert — l (Helligkeit), c (Chroma) und h (Farbton) — plus ein Alphakanal-Wert (alpha). Diese Kanalwerte sind innerhalb der Funktion verfügbar, um die Ausgangsfarbkanal-Werte zu definieren:

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

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

In den ersten beiden Beispielen verwenden wir relative Farbsyntax. Im ersten Beispiel wird jedoch die gleiche Farbe wie die Ursprungsfarbe ausgegeben und im zweiten Fall wird eine Farbe ausgegeben, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen keine wirklichen relativen Farben! Sie würden diese wahrscheinlich niemals in einem echten Codebase verwenden und stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt zum Erlernen der relativen oklch()-Syntax aufgenommen.

Beginnen wir mit einer Ursprungsfarbe 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:

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

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

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)

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

In den bisherigen Beispielen in diesem Abschnitt wurden die Alphakanäle weder für die Ursprungs- noch für die Ausgabefarben ausdrücklich angegeben. Wenn der Alphakanal der Ausgabefarbe nicht angegeben wird, nimmt er standardmäßig denselben Wert wie der Alphakanal der Ursprungsfarbe an. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), wird der Standardwert 1 angenommen. Daher sind die Alpha-Kanalwerte der Ursprungs- und Ausgabefarbe für die obigen Beispiele 1.

Sehen wir uns einige Beispiele an, die die Ursprungs- und Ausgabefarbkanalwerte spezifizieren. Das erste Beispiel gibt den Ausgabefarbkanalwert als gleich dem Wert des Ursprungsalphakanals an, während das zweite Beispiel einen anderen Ausgabefarbkanalwert spezifiziert, der nicht mit dem des Ursprungsalphakanals 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))

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 Auswirkung der Variation 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

Anpassung der Farbintensität über Chroma

Das folgende Beispiel zeigt die Wirkung der Variierung des C-Wertes (Chroma) der oklch()-Funktionsnotation, wobei die Farben in der 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 Anfangsfarben Blau, Rot und Grün deklarieren wir fortschreitend kleinere Werte für Chroma darauf: Beginnend mit voller Farbsättigung bei dem hohen Wert von 0.4 (entspricht 100%) bis zu 0.01 (entspricht 2%), was fast grau für alle Farben 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, mit den gleichen Helligkeitswerten, wären die Farben alle in demselben Grauton. In diesem Beispiel sind sie fast grau.

Farbtöne in OkLCh

Das folgende Beispiel zeigt Farbfelder mit verschiedenen H- (Farbton-)Werten der oklch()-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: 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 jedoch 0deg Magenta, während Rot ungefähr 41deg ist.

Anpassung des Alphawertes einer Farbe

Das folgende Beispiel zeigt die Wirkung der Variation des A-Wertes (Alpha) der oklch()-Farbfunktion. Die red- und red-alpha-Elemente überlappen das #background-div-Element, um den Effekt der Opazität zu demonstrieren. Wenn A einen Wert von 0.4 hat, macht es die Farbe zu 40% undurchsichtig.

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

Verwendung relativer Farben mit oklch()

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

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 die gewünschte Wirkung über eine calc()-Funktion zu erzielen. Der aufgehellte Farbkanal hat 0.15 (15%) zur Helligkeit addiert, während die abgedunkelte Farbe 0.15 (15%) von der Helligkeit subtrahiert hat.

<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

Die Ausgabe ist wie folgt:

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Liste aller Farbdarstellungen
• Verwendung relativer 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 abgerückt sind (2024)
• Ein perceptueller Farbraum für die Bildbearbeitung (2020)