oklab()
Baseline 2023Newly 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 oklab()
Funktionsnotation drückt eine gegebene Farbe im Oklab-Farbraum aus, der versucht, die Wahrnehmung von Farbe durch das menschliche Auge nachzuahmen.
Oklab ist ein perzeptueller Farbraum und nützlich für:
- Das Umwandeln eines Bildes in Graustufen, ohne die Helligkeit zu ändern.
- Das Ändern der Sättigung von Farben, wobei die Benutzerwahrnehmung von Farbton und Helligkeit erhalten bleibt.
- Das Erstellen glatter und gleichmäßiger Farbverläufe (zum Beispiel bei manueller Interpolation in einem
<canvas>
-Element).
oklab()
arbeitet mit einem kartesischen Koordinatensystem im Oklab-Farbraum — a- und b-Achsen. Es kann einen größeren Bereich an Farben als RGB darstellen, einschließlich Wide-Gamut- und P3-Farben. Wenn Sie ein polares Farbsystem, Chroma und Farbton verwenden möchten, nutzen Sie oklch()
.
Syntax
/* Absolute values */
oklab(40.1% 0.1143 0.045);
oklab(59.69% 0.1007 0.1191);
oklab(59.69% 0.1007 0.1191 / 0.5);
/* Relative values */
oklab(from green l a b / 0.5)
oklab(from #0000FF calc(l + 0.1) a b / calc(alpha * 0.9))
oklab(from hsl(180 100% 50%) calc(l - 0.1) a b)
Werte
Nachfolgend finden Sie Beschreibungen der zulässigen Werte für sowohl absolute als auch relative Farben.
Syntax für absolute Werte
oklab(L a b[ / A])
Die Parameter sind wie folgt:
L
-
Eine
<number>
zwischen0
und1
, ein<percentage>
zwischen0%
und100%
, oder das Schlüsselwortnone
(entspricht in diesem Fall0%
). Dieser Wert gibt die wahrgenommene Helligkeit der Farbe an. Die Zahl0
entspricht0%
(schwarz) und die Zahl1
entspricht100%
(weiß). a
-
Eine
<number>
zwischen-0.4
und0.4
, ein<percentage>
zwischen-100%
und100%
, oder das Schlüsselwortnone
(entspricht in diesem Fall0%
). Dieser Wert gibt die Entfernung der Farbe entlang dera
-Achse im Oklab-Farbraum an, die bestimmt, wie grün (in Richtung-0.4
) oder rot (in Richtung+0.4
) die Farbe ist. Beachten Sie, dass diese Werte Vorzeichen haben (sowohl positive als auch negative Werte zulassen) und theoretisch unbegrenzt sind, was bedeutet, dass Sie Werte außerhalb der±0.4
(±100%
) Grenzen festlegen können. In der Praxis können Werte±0.5
nicht überschreiten. b
-
Eine
<number>
zwischen-0.4
und0.4
, ein<percentage>
zwischen-100%
und100%
, oder das Schlüsselwortnone
(entspricht in diesem Fall0%
). Dieser Wert gibt die Entfernung der Farbe entlang derb
-Achse im Oklab-Farbraum an, die bestimmt, wie blau (in Richtung-0.4
) oder gelb (in Richtung+0.4
) die Farbe ist. Beachten Sie, dass diese Werte Vorzeichen haben (sowohl positive als auch negative Werte zulassen) und theoretisch unbegrenzt sind, was bedeutet, dass Sie Werte außerhalb der±0.4
(±100%
) Grenzen festlegen können. In der Praxis können Werte±0.5
nicht überschreiten. A
Optional-
Ein
<alpha-value>
-Wert, der den Alphakanalwert der Farbe darstellt, wobei die Zahl0
0%
(vollständig transparent) und1
100%
(vollständig undurchsichtig) entspricht. Zusätzlich kann das Schlüsselwortnone
verwendet werden, um ausdrücklich keinen Alphakanal anzugeben. Wenn derA
-Kanalwert nicht ausdrücklich angegeben wird, ist der Standardwert 100%. Wenn er enthalten ist, wird der Wert von einem Schrägstrich (/
) vorangestellt.
Hinweis:
Siehe Fehlende Farbkomponenten für weitere Informationen über die Wirkung von none
.
Syntax für relative Werte
oklab(from <color> L a b[ / 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>
zwischen0
und1
, ein<percentage>
zwischen0%
und100%
, oder das Schlüsselwortnone
(entspricht in diesem Fall0%
). Dieser Wert repräsentiert die Helligkeit der Ausgabefarbe. Die Zahl0
entspricht0%
(schwarz) und die Zahl1
entspricht100%
(weiß). a
-
Eine
<number>
zwischen-0.4
und0.4
, ein<percentage>
zwischen-100%
und100%
, oder das Schlüsselwortnone
(entspricht in diesem Fall0%
). Dieser Wert repräsentiert die Entfernung der Ausgabefarbe entlang dera
-Achse im Oklab-Farbraum, die bestimmt, wie grün (in Richtung-0.4
) oder rot (in Richtung+0.4
) die Farbe ist. Beachten Sie, dass diese Werte Vorzeichen haben (sowohl positive als auch negative Werte zulassen) und theoretisch unbegrenzt sind, was bedeutet, dass Sie Werte außerhalb der±0.4
(±100%
) Grenzen festlegen können. In der Praxis können Werte±0.5
nicht überschreiten. b
-
Eine
<number>
zwischen-0.4
und0.4
, ein<percentage>
zwischen-100%
und100%
, oder das Schlüsselwortnone
(entspricht in diesem Fall0%
). Dieser Wert repräsentiert die Entfernung der Ausgabefarbe entlang derb
-Achse im Oklab-Farbraum, die bestimmt, wie blau (in Richtung-0.4
) oder gelb (in Richtung+0.4
) die Farbe ist. Beachten Sie, dass diese Werte Vorzeichen haben (sowohl positive als auch negative Werte zulassen) und theoretisch unbegrenzt sind, was bedeutet, dass Sie Werte außerhalb der±0.4
(±100%
) Grenzen festlegen können. In der Praxis können Werte±0.5
nicht überschreiten. A
Optional-
Ein
<alpha-value>
-Wert, der den Alphakanalwert der Ausgabefarbe darstellt, wobei die Zahl0
0%
(vollständig transparent) und1
100%
(vollständig undurchsichtig) entspricht. Zusätzlich kann das Schlüsselwortnone
verwendet werden, um ausdrücklich keinen Alphakanal anzugeben. Wenn derA
-Kanalwert nicht ausdrücklich angegeben wird, ist der Standardwert der Alphakanalwert der Ursprungsfarbe. Wenn er enthalten ist, wird der Wert von einem Schrägstrich (/
) vorangestellt.
Definition der Ausgabekanalkomponenten von relativen Farben
Bei der Verwendung von relativer Farbsyntax innerhalb einer oklab()
-Funktion wandelt der Browser die Ursprungsfarbe in eine äquivalente Oklab-Farbe um (wenn sie nicht bereits als solche angegeben ist). Die Farbe wird als drei verschiedene Farbkanalwerte definiert: l
(Helligkeit), a
(grün/rot-Achse) und b
(blau/gelb-Achse) sowie 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 auf ein<number>
zwischen0
und1
, einschließlich, aufgelöst. - Die
a
- undb
-Kanäle werden jeweils auf ein<number>
zwischen-0.4
und0.4
, einschließlich, aufgelöst. - Der
alpha
-Kanal wird auf ein<number>
zwischen0
und1
, einschließlich, aufgelöst.
Beim Definieren einer relativen Farbe können die verschiedenen Kanäle der Ausgabefarbe auf verschiedene Weisen ausgedrückt werden. Nachfolgend betrachten wir einige Beispiele, um diese zu verdeutlichen.
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 tatsächlich keine relativen Farben! Es ist unwahrscheinlich, dass Sie diese jemals in einem realen Code verwenden würden; wahrscheinlich würden Sie stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt für das Lernen über relative oklab()
-Syntax aufgenommen.
Beginnen wir mit einer Ursprungsfarbe von hsl(0 100% 50%)
(entspricht red
). Die folgende Funktion gibt dieselbe Farbe wie die Ursprungsfarbe aus — sie verwendet die l
-, a
- und b
-Kanalwerte (0.627966
, 0.22488
, und 0.125859
) der Ursprungsfarbe als Ausgabekanalwerte:
oklab(from hsl(0 100% 50%) l a b)
Die Ausgabe dieser Funktion ist oklab(0.627966 0.22488 0.125859)
.
Die nächste Funktion verwendet absolute Werte für die Kanalwerte der Ausgabefarbe und gibt eine völlig andere Farbe aus, die nicht auf der Ursprungsfarbe basiert:
oklab(from hsl(0 100% 50%) 42.1% 0.165 -0.101)
In dem obigen Fall ist die Ausgabefarbe oklab(0.421 0.165 -0.101)
.
Die folgende Funktion erstellt eine relative Farbe, die auf der Ursprungsfarbe basiert:
oklab(from hsl(0 100% 50%) l -0.3 b)
In diesem Beispiel:
- Wird die
hsl()
-Ursprungsfarbe in eine äquivalenteoklab()
-Farbe umgewandelt —oklab(0.627966 0.22488 0.125859)
. - Werden die
L
- undb
-Kanalwerte der Ausgabefarbe auf diejenigen der äquivalentenoklab()
-Ursprungsfarbe gesetzt — diese Werte sind0.627966
und0.125859
. - Wird der
a
-Kanalwert der Ausgabefarbe auf einen neuen, nicht auf der Ursprungsfarbe basierenden Wert gesetzt:-0.3
.
Die endgültige Ausgabefarbe ist oklab(0.627966 -0.3 0.125859)
.
Hinweis: Wie oben erwähnt, wird die Ursprungsfarbe, wenn die Ausgabefarbe ein anderes Farbmodell als die Ursprungsfarbe verwendet, 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 Beispielen, die wir bisher in diesem Abschnitt gesehen haben, wurden die Alphakanäle weder für die Ursprungs- noch für die Ausgabefarben explizit angegeben. Wenn der Alphakanal der Ausgabefarbe nicht spezifiziert ist, wird er standardmäßig auf denselben Wert wie der Alphakanal der Ursprungsfarbe eingestellt. Wenn der Alphakanal der Ursprungsfarbe nicht spezifiziert ist (und es sich nicht um eine relative Farbe handelt), ist der Standardwert 1
. Daher sind die Ursprungs- und Ausgabe-Alphakanalwerte 1
für die obigen Beispiele.
Sehen wir uns einige Beispiele an, die Ursprungs- und Ausgabefarben-Alphakanalwerte angeben. Das erste Beispiel gibt den Ausgabefarben-Alphakanalwert als gleich dem Ursprungs-Alphakanalwert an, während das zweite Beispiel einen anderen Ausgabefarben-Alphakanalwert ohne Bezug zum Ursprungs-Alphakanalwert angibt.
oklab(from hsl(0 100% 50% / 0.8) l a b / alpha)
/* Computed output color: oklab(0.627966 0.22488 0.125859 / 0.8) */
oklab(from hsl(0 100% 50% / 0.8) l a b / 0.5)
/* Computed output color: oklab(0.627966 0.22488 0.125859 / 0.5) */
Im folgenden Beispiel wird die hsl()
-Ursprungsfarbe erneut in die oklab()
-äquivalente umgewandelt — oklab(0.627966 0.22488 0.125859)
. calc()
-Berechnungen werden auf die L
-, a
-, b
- und A
-Werte angewendet, was zu einer Ausgabefarbe von oklab(0.827966 0.14488 -0.0741406 / 0.9)
führt:
oklab(from hsl(0 100% 50%) calc(l + 0.2) calc(a - 0.08) calc(b - 0.2) / 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
Beispiele
Anpassung der Helligkeit
Das folgende Beispiel zeigt die Wirkung der Variation der Helligkeits-, a-Achsen- und b-Achsen-Werte der oklab()
-Funktion.
HTML
<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>
<div data-color="blue-dark"></div>
<div data-color="blue"></div>
<div data-color="blue-light"></div>
CSS
[data-color="red-dark"] {
background-color: oklab(0.05 0.4 0.4);
}
[data-color="red"] {
background-color: oklab(0.5 0.4 0.4);
}
[data-color="red-light"] {
background-color: oklab(0.95 0.4 0.4);
}
[data-color="green-dark"] {
background-color: oklab(5% -100% 0.4);
}
[data-color="green"] {
background-color: oklab(50% -100% 0.4);
}
[data-color="green-light"] {
background-color: oklab(95% -100% 0.4);
}
[data-color="blue-dark"] {
background-color: oklab(0.05 -0.3 -0.4);
}
[data-color="blue"] {
background-color: oklab(0.5 -0.3 -0.4);
}
[data-color="blue-light"] {
background-color: oklab(0.95 -0.3 -0.4);
}
Ergebnis
Anpassung der Opazität
Das folgende Beispiel zeigt die Wirkung der Variation des A
(Alpha)-Wertes der oklab()
-Funktion. Die red
- und red-alpha
-Elemente überlappen das #background-div
-Element, um den Effekt der Opazität zu demonstrieren. Wenn dem red-alpha
-Element eine Opazität von 0.4
zugewiesen wird, erscheint es transparenter als das red
-Element.
HTML
<div id="background-div">
<div data-color="red"></div>
<div data-color="red-alpha"></div>
</div>
CSS
[data-color="red"] {
background-color: oklab(0.628 0.225 0.126);
}
[data-color="red-alpha"] {
background-color: oklab(0.628 0.225 0.126 / 0.4);
}
Ergebnis
Anpassung der Farbachsen
Dieses Beispiel demonstriert die Auswirkungen der Einstellung der a
- und b
-Werte der oklab()
-Funktion auf die End- und Mittelpunkte der a-Achse und b-Achse. Die a-Achse verläuft von grün (-0.4
) zu rot (0.4
) und die b-Achse verläuft von gelb (-0.4
) zu blau (0.4
).
HTML
<div data-color="red-yellow"></div>
<div data-color="red-zero"></div>
<div data-color="red-blue"></div>
<div data-color="zero-yellow"></div>
<div data-color="zero-zero"></div>
<div data-color="zero-blue"></div>
<div data-color="green-yellow"></div>
<div data-color="green-zero"></div>
<div data-color="green-blue"></div>
CSS
Mit der CSS-Eigenschaft background-color
variieren wir die a
- und b
-Werte der oklab()
-Farbfunktionslang der a-Achse und der b-Achse und zeigen die Auswirkungen von maximalen, mittleren und minimalen Werten in jedem Fall.
/* a-axis max, variable b-axis */
[data-color="red-yellow"] {
background-color: oklab(0.5 0.4 0.4);
}
[data-color="red-zero"] {
background-color: oklab(0.5 0.4 0);
}
[data-color="red-blue"] {
background-color: oklab(0.5 0.4 -0.4);
}
/* a-axis center, variable b-axis */
[data-color="zero-yellow"] {
background-color: oklab(0.5 0 0.4);
}
[data-color="zero-zero"] {
background-color: oklab(0.5 0 0);
}
[data-color="zero-blue"] {
background-color: oklab(0.5 0 -0.4);
}
/* a-axis min, variable b-axis */
[data-color="green-yellow"] {
background-color: oklab(0.5 -0.4 0.4);
}
[data-color="green-zero"] {
background-color: oklab(0.5 -0.4 0);
}
[data-color="green-blue"] {
background-color: oklab(0.5 -0.4 -0.4);
}
Ergebnis
Die linke Spalte befindet sich am gelben Ende (-0.4
) der b-Achse, und die rechte Spalte befindet sich am blauen Ende (0.4
). Die oberste Reihe zeigt Farben am roten Ende der a-Achse (-0.4
), und die unterste Reihe befindet sich am grünen Ende (0.4
). Die mittlere Spalte und die mittlere Reihe befinden sich an den Mittelpunkten jeder Achse, wobei die mittlere Zelle grau ist; sie enthält kein Rot, Grün, Gelb oder Blau, mit einem 0
-Wert für beide Achsen.
Lineare Verläufe entlang der a-Achse und b-Achse
Dieses Beispiel enthält lineare Verläufe, um den Fortschritt der Werte der oklab()
-Funktion entlang der a-Achse (von rot zu grün) und entlang der b-Achse (von gelb zu blau) zu demonstrieren. In jedem Verlauf bleibt eine Achse statisch, während die andere Achse von niedrigen zu hohen Werten fortschreitet.
CSS
/* a-axis gradients */
[data-color="red-to-green-yellow"] {
background-image: linear-gradient(to right, oklab(50% 0.4 0.4), oklab(50% -0.4 0.4));
}
[data-color="red-to-green-zero"] {
background-image: linear-gradient(to right, oklab(50% 0.4 0), oklab(50% -0.4 0));
}
[data-color="red-to-green-blue"] {
background-image: linear-gradient(to right, oklab(50% 0.4 -0.4), oklab(50% -0.4 -0.4));
}
/* b-axis gradients */
[data-color="yellow-to-blue-red"] {
background-image: linear-gradient(to right, oklab(50% 0.4 0.4), oklab(50% 0.4 -0.4));
}
[data-color="yellow-to-blue-zero"] {
background-image: linear-gradient(to right, oklab(50% 0 0.4), oklab(50% 0 -0.4));
}
[data-color="yellow-to-blue-green"] {
background-image: linear-gradient(to right, oklab(50% -0.4 0.4),oklab(50% -0.4 -0.4));
}
Ergebnis
Verwendung relativer Farben mit oklab()
Dieses Beispiel stylt drei <div>
-Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere erhält die unveränderte --base-color
, während die linken und rechten Varianten dieser --base-color
aufgehellt und abgedunkelt werden.
Diese Varianten werden mit relativen Farben definiert — die --base-color
benutzerdefinierte Eigenschaft wird in einer oklab()
-Funktion verwendet, und die Ausgabefarben haben ihren Helligkeitskanal mithilfe einer calc()
-Funktion modifiziert, um den gewünschten Effekt zu erzielen. Die aufgehellte Farbe hat 0.15
(15%) zum Helligkeitskanal hinzugefügt, und die abgedunkelte Farbe hat 0.15
(15%) vom Helligkeitskanal abgezogen.
CSS
:root {
--base-color: orange;
}
#one {
background-color: oklab(from var(--base-color) calc(l + 0.15) a b);
}
#two {
background-color: var(--base-color);
}
#three {
background-color: oklab(from var(--base-color) calc(l - 0.15) a b);
}
Ergebnis
Die Ausgabe ist wie folgt:
Spezifikationen
Specification |
---|
CSS Color Module Level 5 # relative-Oklab |
CSS Color Module Level 4 # ok-lab |
Browser-Kompatibilität
Siehe auch
- Der
<color>
Datentyp für eine Liste aller Farbnotationen lab()
undoklch()
Farb Funktionen- Verwendung relativer Farben
- CSS Farben Modul
- Ein perzeptueller Farbraum für die Bildverarbeitung auf bottosson.github.io (2023)
- OKLAB Farbkreis auf observablehq.com