oklch()

Nachfolgend sind Beschreibungen der zulässigen Werte sowohl für absolute als auch relative Farben aufgeführt.

Syntax der absoluten Werte

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 entspricht 100% (weiß). Dieser Wert gibt die wahrgenommene Helligkeit oder "Helligkeit" der Farbe an.

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 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 stellt ein Maß für die Chroma der Farbe dar (ungefähr dargestellt als "Menge an Farbe"). Der kleinste sinnvolle Wert ist 0, während der maximale 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

Eine <number>, ein <angle>, oder das Schlüsselwort none (entspricht in diesem Fall 0deg) und repräsentiert den <hue> Winkel der Farbe.

Hinweis: Die Winkeln, die bestimmten Farbtönen entsprechen, unterscheiden sich im sRGB (verwendet von hsl() und hwb()), CIELAB (verwendet von lch()) und Oklab (verwendet von oklch()) Farbräumen. Siehe das Beispiel Hues in oklch() und die <hue> Referenzseite für weitere Details und Beispiele.

A Optional

Ein <alpha-value>, der 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 keinen Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, wird standardmäßig 100% festgelegt. Wenn enthalten, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Syntax der relativen Werte

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 eine gültige <color>-Syntax enthalten, 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%). Dieser Wert gibt den Helligkeitswert der Ausgabefarbe an. 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 Ausgabefarbe dar (ungefähr die "Menge an Farbe"). Der kleinste sinnvolle Wert ist 0, während der maximale 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

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

A Optional

Ein <alpha-value>, der den Alpha-Kanal-Wert 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 Alpha-Kanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, wird er standardmäßig auf den Alpha-Kanal-Wert der Ursprungsfarbe festgelegt. Wenn enthalten, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definition der Ausgabekanalkomponenten für relative Farben

Wenn die relative Farbsyntax innerhalb einer oklch() Funktion verwendet wird, konvertiert der Browser die Ursprungsfarbe in eine äquivalente Oklch-Farbe (wenn sie nicht bereits so spezifiziert ist). Die Farbe wird als drei verschiedene Farbkanalwerte definiert — l (Helligkeit), c (Chroma), und h (Farbton) — sowie ein Alpha-Kanalwert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um bei der Definition der Ausgabefarbkanalwerte verwendet zu werden:

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

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

In den beiden ersten Beispielen unten verwenden wir relative Farbsyntax. Das erste Beispiel erzeugt jedoch die gleiche Farbe wie die Ursprungsfarbe und das zweite gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erzeugen eigentlich keine relativen Farben! Es ist unwahrscheinlich, dass Sie diese jemals in einem echten Code verwenden würden, und Sie würden wahrscheinlich stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Lernen über relative oklch()-Syntax einbezogen.

Lassen Sie uns mit einer Ursprungsfarbe von hsl(0 100% 50%) beginnen (entspricht rot). Die folgende Funktion gibt die gleiche Farbe wie die Ursprungsfarbe aus — sie nutzt die l, c und h Kanalwerte der Ursprungsfarbe (0.627966, 0.257704, und 29.2346) als die Ausgabekanalwerte:

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

Diese Funktion gibt die Farbe oklch(0.627966 0.257704 29.2346) aus.

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

Die folgende Funktion erzeugt 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 gleichwertige oklch() Farbe — oklch(0.627966 0.257704 29.2346).
• Setzt den H-Kanalwert für die Ausgabefarbe auf den H-Kanalwert der entsprechenden oklch() 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).

In den bisher betrachteten Beispielen in diesem Abschnitt wurden die Alphakanäle weder für die Ursprungs- noch für die Ausgabefarben explizit spezifiziert. Wenn der Alphakanal der Ausgabefarbe nicht angegeben wird, wird er auf denselben Wert wie der Alphakanal der Ursprungsfarbe standardmäßig gesetzt. Wenn der Alphakanal der Ursprungsfarbe nicht angegeben ist (und es sich nicht um eine relative Farbe handelt), wird standardmäßig 1 verwendet. Daher sind die Ursprungs- und Ausgaben-Alphakanalwerte 1 für die oben genannten Beispiele.

Betrachten wir einige Beispiele, die Ursprungs- und Ausgaben-Alphakanalwerte spezifizieren. Das erste spezifiziert den Alphakanalwert der Ausgabe als gleich dem Alphakanalwert der Ursprungsfarbe, während das zweite einen anderen Alphakanalwert der Ausgabefarbe angibt, der nicht mit dem Alphakanalwert der Ursprungsfarbe 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 die oklch()-Entsprechung 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:

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 die Wirkung der Variation des L- (Helligkeits-) Wertes der funktionalen Schreibweise oklch().

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 die Wirkung der Variation des C- (Chroma-) Wertes der funktionalen Schreibweise oklch(), wobei die Farben an Intensität abnehmen, da der C-Wert von vollständig gesättigt auf 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 initialen Ausgangsfarben Blau, Rot und Grün deklarieren wir sukzessiv kleinere Werte für das Chroma: Wir beginnen mit voller Farbsättigung bei dem hohen Wert von 0.4 (entspricht 100%) bis hinunter 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;
}

[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, bei den gleichen Helligkeitswerten, wären die Farben alle im gleichen Grauton. In diesem Beispiel sind sie fast grau.

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

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(). Siehe <hue> für weitere Informationen. In hsl() repräsentiert die sRGB-Farbe 0deg rot. Jedoch im CIELab-Farbraum entspricht 0deg magenta, während rot ungefähr 41deg ist.

Das folgende Beispiel zeigt die Wirkung der Variation des A (Alpha-) Werts der oklch()-Funktion. Die red und red-alpha Elemente überlappen das #background-div Element, um die Wirkung der Deckkraft zu demonstrieren. Ein Wert von A von 0.4 macht die Farbe 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: 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 stylt drei <div>-Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere erhält die unveränderte --base-color, während die linken und rechten jeweils aufgehellte und abgedunkelte Varianten dieser --base-color erhalten.

Diese Varianten werden unter Verwendung von relativen 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 über eine calc() Funktion zu erreichen. Die aufgehellte Farbe hat 0.15 (15%) zur Helligkeit hinzugefügt, und die abgedunkelte Farbe hat 0.15 (15%) von der Helligkeit 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;
}

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

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