oklab() CSS-Funktion

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 #123456 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 sowohl für absolute als auch für relative Farben.

Syntax für absolute Werte

oklab(L a b[ / A])

Die Parameter sind wie folgt:

L

Ein <number> zwischen 0 und 1, ein <percentage> zwischen 0% und 100%, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert gibt die wahrgenommene Helligkeit der Farbe an. Die Zahl 0 entspricht 0% (schwarz) und die Zahl 1 entspricht 100% (weiß).

a

Ein <number> zwischen -0.4 und 0.4, ein <percentage> zwischen -100% und 100%, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert bestimmt die Entfernung der Farbe entlang der a-Achse im Oklab-Farbraum, der festlegt, wie grün (in Richtung -0.4) oder rot (in Richtung +0.4) die Farbe ist. Beachten Sie, dass diese Werte signiert sind (sowohl positive als auch negative Werte zulassen) und theoretisch unbeschränkt, was bedeutet, dass Sie Werte außerhalb der Grenzwerte ±0.4 (±100%) festlegen können. In der Praxis können die Werte ±0.5 nicht überschreiten.

b

Ein <number> zwischen -0.4 und 0.4, ein <percentage> zwischen -100% und 100%, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert bestimmt die Entfernung der Farbe entlang der b-Achse im Oklab-Farbraum, der festlegt, wie blau (in Richtung -0.4) oder gelb (in Richtung +0.4) die Farbe ist. Beachten Sie, dass diese Werte signiert sind (sowohl positive als auch negative Werte zulassen) und theoretisch unbeschränkt, was bedeutet, dass Sie Werte außerhalb der Grenzwerte ±0.4 (±100%) festlegen können. In der Praxis können die Werte ±0.5 nicht überschreiten.

A Optional

Ein <alpha-value>, der den Alphakanalwert der Farbe repräsentiert, 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 explizit keinen Alphakanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, ist der Standardwert 100%. Wenn er eingeschlossen ist, wird der Wert durch einen Schrägstrich (/) vorangestellt.

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

Ein <number> zwischen 0 und 1, ein <percentage> zwischen 0% und 100%, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert repräsentiert die Helligkeit der Ausgabefarbe. Die Zahl 0 entspricht 0% (schwarz) und die Zahl 1 entspricht 100% (weiß).

a

Ein <number> zwischen -0.4 und 0.4, ein <percentage> zwischen -100% und 100%, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert repräsentiert die Entfernung der Ausgabefarbe entlang der a-Achse im Oklab-Farbraum, der festlegt, wie grün (in Richtung -0.4) oder rot (in Richtung +0.4) die Farbe ist. Beachten Sie, dass diese Werte signiert sind (sowohl positive als auch negative Werte zulassen) und theoretisch unbeschränkt, was bedeutet, dass Sie Werte außerhalb der Grenzwerte ±0.4 (±100%) festlegen können. In der Praxis können die Werte ±0.5 nicht überschreiten.

b

Ein <number> zwischen -0.4 und 0.4, ein <percentage> zwischen -100% und 100%, oder das Schlüsselwort none (entspricht in diesem Fall 0%). Dieser Wert repräsentiert die Entfernung der Ausgabefarbe entlang der b-Achse im Oklab-Farbraum, der festlegt, wie blau (in Richtung -0.4) oder gelb (in Richtung +0.4) die Farbe ist. Beachten Sie, dass diese Werte signiert sind (sowohl positive als auch negative Werte zulassen) und theoretisch unbeschränkt, was bedeutet, dass Sie Werte außerhalb der Grenzwerte ±0.4 (±100%) festlegen können. In der Praxis können die Werte ±0.5 nicht überschreiten.

A Optional

Ein <alpha-value>, der den Alphakanalwert der Ausgabefarbe repräsentiert, 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 explizit keinen Alphakanal anzugeben. Wenn der A-Kanalwert nicht explizit angegeben wird, ist der Standardwert der Alphakanalwert der Ursprungsfarbe. Wenn er eingeschlossen ist, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definition von relativen Farbausgängen und Kanal-Komponenten

Bei der Verwendung der relativen Farbsyntax innerhalb einer oklab()-Funktion konvertiert der Browser die Ursprungsfarbe in eine äquivalente Oklab-Farbe (falls sie nicht bereits so angegeben ist). Die definierte Farbe besteht aus drei verschiedenen Farbkanalwerten — l (Helligkeit), a (grün/rot-Achse) und b (blau/gelb-Achse) — plus einem 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 einen <number> zwischen 0 und 1, einschließlich, aufgelöst.
• Die a- und b-Kanäle werden jeweils auf einen <number> zwischen -0.4 und 0.4, einschließlich, aufgelöst.
• Der alpha-Kanal wird auf einen <number> zwischen 0 und 1, einschließlich, aufgelöst.

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

In den ersten beiden Beispielen unten verwenden wir relative Farbsyntax. Das erste gibt jedoch dieselbe Farbe wie die Ursprungsfarbe aus, und das zweite gibt eine Farbe aus, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie erstellen also nicht wirklich relative Farben! Sie würden diese wahrscheinlich niemals in einem echten Code verwenden und stattdessen einfach einen absoluten Farbwert nutzen. Diese Beispiele wurden als Ausgangspunkt für das Erlernen der relativen oklab()-Syntax aufgenommen.

Beginnen 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-, a- und b-Kanalwerte (0.627966, 0.22488 und 0.125859) der Ursprungsfarbe als die Ausgabekanalwerte:

oklab(from hsl(0 100% 50%) l a b)

Diese Funktion gibt die Farbe oklab(0.627966 0.22488 0.125859) aus.

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)

Im obigen Fall ist die Ausgabefarbe oklab(0.421 0.165 -0.101).

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

oklab(from hsl(0 100% 50%) l -0.3 b)

Dieses Beispiel:

• Konvertiert die hsl()-Ursprungsfarbe in eine äquivalente oklab()-Farbe — oklab(0.627966 0.22488 0.125859).
• Setzt die L- und b-Kanalwerte für die Ausgabefarbe auf die der oklab()-Äquivalentwerte der Ursprungsfarbe — diese Werte sind 0.627966 und 0.125859.
• Setzt den a-Kanalwert der Ausgabefarbe auf einen neuen Wert, der nicht auf der Ursprungsfarbe basiert: -0.3.

Die endgültige Ausgabefarbe ist oklab(0.627966 -0.3 0.125859).

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 Alphakanalwert der Ausgabefarbe nicht angegeben wird, ist der Standardwert derselbe wie der Alphakanalwert der Ursprungsfarbe. Wenn der Alphakanalwert der Ursprungsfarbe nicht angegeben wird (und es sich nicht um eine relative Farbe handelt), ist der Standardwert 1. Daher sind die Alphakanalwerte der Ursprungs- und Ausgabefarbe in den obigen Beispielen 1.

Werfen wir einen Blick auf einige Beispiele, die Ursprungs- und Ausgabefarbe-Alphakanalwerte angeben. Das erste gibt den Alphakanalwert der Ausgabefarbe als denselben wie den Alphakanalwert der Ursprungsfarbe an, während der zweite einen anderen Alphakanalwert der Ausgabefarbe angibt, der nicht im Zusammenhang mit dem Alphakanalwert der Ursprungsfarbe steht.

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 wieder in die oklab()-Äquivalentfarbe konvertiert — 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))

Formale Syntax

<oklab()> = 
  oklab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<alpha-value> = 
  <number>      |
  <percentage>  

Beispiele

Helligkeit anpassen

Das folgende Beispiel zeigt den Effekt der Änderung 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

body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
div {
  height: 50px;
  flex: 0 0 28%;
  border: 1px solid black;
}

[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

Transparenz anpassen

Das folgende Beispiel zeigt den Effekt der Änderung des A- (Alpha-)Wertes der oklab()-Funktion. Die red- und red-alpha-Elemente überlappen das #background-div-Element, um den Effekt der Transparenz zu demonstrieren. Indem Sie dem red-alpha-Element eine Transparenz von 0.4 geben, erscheint es durchsichtiger als das red-Element.

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: lightblue;
  width: 150px;
  height: 40px;
}

[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

Farbeinstellungen der Achsen anpassen

Dieses Beispiel zeigt die Auswirkungen des Festlegens der a- und b-Werte der oklab()-Funktion an den Enden und Mittelpunkten der a-Achse und b-Achse. Die a-Achse erstreckt sich von grün (-0.4) bis rot (0.4), und die b-Achse erstreckt sich von gelb (-0.4) bis 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-background-color-Eigenschaft variieren wir die a- und b-Werte der oklab()-Farbfunktion entlang der a-Achse und b-Achse, um die Auswirkungen von maximalen, mittleren und minimalen Werten in jedem Fall zu zeigen.

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
div {
  height: 50px;
  flex: 0 0 28%;
  border: 1px solid black;
}

/* 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 obere Reihe zeigt Farben am roten Ende der a-Achse (-0.4), und die untere Reihe befindet sich am grünen Ende (0.4). Die mittlere Spalte und Reihe befinden sich an den Mittelpunkten der jeweiligen Achsen, wobei die mittlere Zelle grau ist; sie enthält weder rot, grün, gelb noch blau, mit einem 0-Wert für beide Achsen.

Lineare Farbverläufe entlang der a-Achse und b-Achse

Dieses Beispiel enthält lineare Farbverläufe, um den Verlauf 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 Verlaufsbild bleibt eine Achse statisch, während die andere Achse von niedrigen zu hohen Werten verläuft.

<div data-color="red-to-green-yellow">
  <span>red</span><span>`b`= -0.4 (yellow)</span><span>green</span>
</div>
<div data-color="red-to-green-zero">
  <span>red</span><span>no yellow or blue</span><span>green</span>
</div>
<div data-color="red-to-green-blue">
  <span>red</span><span>`b`= 0.4 (blue)</span><span>green</span>
</div>

<div data-color="yellow-to-blue-red">
  <span>yellow</span><span>`a` = -0.4 (red)</span><span>blue</span>
</div>
<div data-color="yellow-to-blue-zero">
  <span>yellow</span><span>no red or green</span><span>blue</span>
</div>
<div data-color="yellow-to-blue-green">
  <span>yellow</span><span>`a` = 0.4 (green)</span><span>blue</span>
</div>

CSS

div {
  height: 50px;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
span {
  background-color: #ffffffcc;
  padding: 3px;
}

/* 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

Verwenden relativer Farben mit oklab()

In diesem Beispiel werden drei <div>-Elemente mit unterschiedlichen Hintergrundfarben gestylt. Das mittlere erhält die unveränderte --base-color, während die linken und rechten ein aufgehelltes bzw. ein abgedunkeltes Derivat dieser --base-color erhalten.

Diese Derivate werden unter Verwendung relativer Farben definiert — die --base-color benutzerdefinierte Eigenschaft wird in eine oklab()-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%) zum Helligkeitskanal addiert, 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;
}

: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

Browser-Kompatibilität

Siehe auch

• Der <color> Datentyp für eine Liste aller Farbnotationen
• lab() und oklch() Farb-Funktionen
• Verwenden relativer Farben
• CSS Farben Modul
• Ein wahrnehmungsbasierter Farbraum für die Bildverarbeitung auf bottosson.github.io (2023)
• OKLAB Farbrad auf observablehq.com