`oklch()` CSS-Funktion

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Mai 2023 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

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

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 Beschreibungen der zulässigen Werte für sowohl absolute als auch relative Farben aufgeführt.

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

Syntax absoluter Werte

oklch(L C H[ / A])

Die Parameter sind wie folgt:

L: Ein <number> zwischen 0 und 1, ein <percentage> zwischen 0% und 100%, oder das Schlüsselwort none (gleichbedeutend mit 0% in diesem Fall). Hierbei entspricht die Zahl 0 0% (schwarz) und die Zahl 1 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 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 (gleichbedeutend mit 0% in diesem Fall). Dieser Wert ist ein Maß für das Chroma der Farbe (ungefähr die "Menge der Farbe"). Der minimale sinnvolle Wert ist 0, während der maximale theoretisch unbegrenzt ist (in der Praxis jedoch 0.5 nicht übersteigt). In diesem Fall ist 0% 0 und 100% ist die Zahl 0.4.
H: Ein <number>, ein <angle>, oder das Schlüsselwort none (gleichbedeutend mit 0deg in diesem Fall), das den Winkel des <hue> der Farbe repräsentiert.

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 untenstehende Beispiel Farbtöne in oklch() und die Referenzseite <hue> für mehr 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 deckend) entspricht. Außerdem kann das Schlüsselwort none verwendet werden, um explizit keinen Alphakanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, ist der Standardwert 100%. Wenn er enthalten ist, wird der Wert von einem Schrägstrich (/) vorangestellt.

Hinweis: Siehe Fehlende Farbkomponenten für mehr Informationen über die Auswirkungen von none.

Syntax relativer Werte

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: Ein <number> zwischen 0 und 1, ein <percentage> zwischen 0% und 100%, oder das Schlüsselwort none (gleichbedeutend mit 0% in diesem Fall). Dieser Wert stellt den Helligkeitswert der Ausgabefarbe dar. Hierbei entspricht die Zahl 0 0% (schwarz) und die Zahl 1 100% (weiß).
C: Ein <number>, ein <percentage>, oder das Schlüsselwort none (gleichbedeutend mit 0% in diesem Fall). Dieser Wert repräsentiert den Chroma-Wert der Ausgabefarbe (ungefähr die "Menge der Farbe"). Sein minimaler nützlicher Wert ist 0, während sein maximaler theoretisch unbegrenzt ist (in der Praxis jedoch 0.5 nicht übersteigt). In diesem Fall ist 0% 0 und 100% ist die Zahl 0.4.
H: Ein <number>, ein <angle>, oder das Schlüsselwort none (gleichbedeutend mit 0deg in diesem Fall), das den Hue-Winkel der Ausgabefarbe repräsentiert. Sehen Sie sich die Beispiele verschiedener Farbtöne im Abschnitt Beispiele unten an.
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 deckend) entspricht. Außerdem kann das Schlüsselwort none verwendet werden, um explizit keinen Alphakanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, ist der Standardwert der Alphakanalwert der Ursprungsfarbe. Wenn er enthalten ist, wird der Wert von einem Schrägstrich (/) vorangestellt.

Kanalkomponenten des relativen Farbausgangs definieren

Beim Verwenden der relativen Farbsyntax innerhalb einer oklch()-Funktion konvertiert der Browser die Ursprungsfarbe in eine äquivalente OkLCh-Farbe (falls sie nicht bereits so angegeben ist). Die Farbe wird als drei unterschiedliche Farbkanalwerte definiert — l (Helligkeit), c (Chroma) und h (Farbton) — plus ein Alphakanalwert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um bei der Definition der Ausgabefarbkanalwerte verwendet zu werden:

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

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

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Allerdings erzeugt das erste Beispiel dieselbe Farbe wie die Ursprungsfarbe und das zweite ein völlig andere Farbe, die nicht auf der Ursprungsfarbe basiert. Sie könnten diese wahrscheinlich nie in einem realen Code-Bestand verwenden und würden stattdessen wahrscheinlich einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt aufgenommen, um die relative oklch()-Syntax zu verstehen.

Lassen Sie uns mit einer Ursprungsfarbe von hsl(0 100% 50%) (gleich red) beginnen. Die folgende Funktion gibt dieselbe Farbe wie die Ursprungsfarbe aus — sie verwendet die l-, c- und h-Kanalwerte der Ursprungsfarbe (0.627966, 0.257704 und 29.2346) 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 Kanäle der Ausgabefarbe 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 ausgegebene Farbe 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:

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 oklch()-Äquivalent der 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, wird, wenn die Ausgabefarbe ein anderes Farbmodell als die Ursprungsfarbe verwendet, die Ursprungsfarbe im Hintergrund in dasselbe Modell wie die Ausgabefarbe konvertiert, um in einer Weise dargestellt werden zu können, die kompatibel ist (d.h. mit denselben Kanälen).

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

Lassen Sie uns einige Beispiele betrachten, die Ursprungs- und Ausgabefarb-Alphakanalwerte angeben. Im ersten Beispiel entspricht der Alphakanalwert der Ausgabe dem Alphakanalwert der Ursprungsfarbe, während im zweiten Beispiel ein anderer, nicht mit der Ursprungsfarbe zusammenhängender Alphakanalwert festgelegt wird.

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 umgerechnet — 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 Werte des Ursprungsfarbkanals zu <number>-Werten aufgelöst werden, müssen Sie Zahlen hinzufügen, wenn Sie sie in Berechnungen verwenden, selbst in Fällen, in denen ein Kanal normalerweise Werte wie <percentage>, <angle> oder andere Typen akzeptieren würde. Das Addieren eines <percentage> zu einem <number>, zum Beispiel, funktioniert 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

Helligkeit einer Farbe anpassen

Dieses Beispiel zeigt die Auswirkung der Variation des L-Wertes (Helligkeit) der oklch() funktionalen Notation.

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

Farbintensität über Chroma anpassen

Das folgende Beispiel zeigt die Auswirkung der Variation des C-Wertes (Chroma) in der oklch() funktionalen Notation, wobei die Farben in der Intensität abnehmen, wenn der C-Wert von voll gesättigt zu 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

Ausgehend von den Anfangsfarben Blau, Rot und Grün deklarieren wir fortschreitend kleinere Werte für das Chroma: beginnend bei voller Farbsättigung mit dem 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 statt 0.01 und 2% verwendet, mit den gleichen Helligkeitswerten, wären alle Farben derselbe Grauton gewesen. In diesem Beispiel sind sie fast grau.

Farbtöne in OkLCh

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

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 mehr Informationen. In hsl() repräsentiert die sRGB-Farbe 0deg rot. Im CIELab-Farbraum entspricht jedoch 0deg magenta, während rot ungefähr 41deg ist.

Alpha-Wert einer Farbe anpassen

Das folgende Beispiel zeigt die Auswirkung der Änderung des A-Wertes (Alpha) der oklch()-Farbfunktion. Die red- und red-alpha-Elemente überlappen das #background-div-Element, um die Wirkung der Opazität zu demonstrieren. Ein A-Wert von 0.4 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

Verwenden relativer Farben mit oklch()

Dieses Beispiel gibt drei <div>-Elementen unterschiedliche Hintergrundfarben. Das mittlere Element wird mit der unveränderten --base-color versehen, während die linken und rechten aufhellte und abgedunkelte Varianten dieser --base-color erhalten.

Diese Varianten werden unter Verwendung relativer Farben definiert — die --base-color Benutzerdefinierte Eigenschaft wird an eine oklch()-Funktion übergeben, und die Ausgabefarben haben ihren Helligkeitskanal modifiziert, um den gewünschten Effekt über eine calc()-Funktion zu erzielen. Die aufgehellte Farbe hat 0.15 (15%) zur Helligkeit des Kanals hinzugefügt, und die abgedunkelte Farbe hat 0.15 (15%) von der Helligkeit des Kanals 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;
}

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);
}