oklab()

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

Syntax absoluter 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 gibt den Abstand der Farbe entlang der a-Achse im Oklab-Farbraum an, die bestimmt, wie grün (Richtung -0.4) oder rot (Richtung +0.4) die Farbe ist. Beachten Sie, dass diese Werte signiert sind (sowohl positive als auch negative Werte zulassen) und theoretisch nicht begrenzt sind, was bedeutet, dass Werte außerhalb der ±0.4 (±100%) Grenzen gesetzt werden können. Tatsächlich können Werte jedoch ±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 gibt den Abstand der Farbe entlang der b-Achse im Oklab-Farbraum an, die bestimmt, wie blau (Richtung -0.4) oder gelb (Richtung +0.4) die Farbe ist. Beachten Sie, dass diese Werte signiert sind (sowohl positive als auch negative Werte zulassen) und theoretisch nicht begrenzt sind, was bedeutet, dass Werte außerhalb der ±0.4 (±100%) Grenzen gesetzt werden können. Tatsächlich können Werte jedoch ±0.5 nicht überschreiten.

A Optional

Ein <alpha-value> das den Alpha-Kanal-Wert der Farbe repräsentiert, 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 ist, beträgt der Standardwert 100%. Falls enthalten, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Syntax relativer Werte

oklab(from <color> L a b[ / A])

Die Parameter sind wie folgt:

from <color>

Das Schlüsselwort from wird immer bei der Definition einer relativen Farbe angegeben, gefolgt von einem <color> Wert, der die Ursprungsfarbe darstellt. Dies ist die Originalfarbe, 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 stellt den Abstand der Ausgabefarbe entlang der a-Achse im Oklab-Farbraum dar, der bestimmt, wie grün (Richtung -0.4) oder rot (Richtung +0.4) die Farbe ist. Beachten Sie, dass diese Werte signiert sind (sowohl positive als auch negative Werte zulassen) und theoretisch nicht begrenzt sind, was bedeutet, dass Werte außerhalb der ±0.4 (±100%) Grenzen gesetzt werden können. Tatsächlich können Werte jedoch ±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 stellt den Abstand der Ausgabefarbe entlang der b-Achse im Oklab-Farbraum dar, der bestimmt, wie blau (Richtung -0.4) oder gelb (Richtung +0.4) die Farbe ist. Beachten Sie, dass diese Werte signiert sind (sowohl positive als auch negative Werte zulassen) und theoretisch nicht begrenzt sind, was bedeutet, dass Werte außerhalb der ±0.4 (±100%) Grenzen gesetzt werden können. Tatsächlich können Werte jedoch ±0.5 nicht überschreiten.

A Optional

Ein <alpha-value> das den Alpha-Kanal-Wert der Ausgabefarbe repräsentiert, 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 ist, beträgt der Standardwert des Alpha-Kanals den Wert des Ausgangsfarbkanals. Falls enthalten, wird der Wert durch einen Schrägstrich (/) vorangestellt.

Definieren der Ausgabekanalbestandteile bei relativen Farben

Wenn Sie die relative Farbsyntax innerhalb einer oklab()-Funktion verwenden, wandelt der Browser die Ursprungsfarbe in eine gleichwertige Oklab-Farbe um (falls sie nicht bereits als solche angegeben ist). Die Farbe wird als drei unterschiedliche Farbkanalwerte definiert — l (Helligkeit), a (grün/rot-Achse) und b (blau/gelb-Achse) — plus einen Alpha-Kanal-Wert (alpha). Diese Kanalwerte stehen innerhalb der Funktion zur Verfügung, um sie bei der Definition der Ausgabefarbkanalwerte zu verwenden:

• Der l-Kanalwert löst sich zu einer <number> zwischen 0 und 1 auf, einschließlich.
• Die a- und b-Kanäle lösen sich jeweils zu einer <number> zwischen -0.4 und 0.4 auf, einschließlich.
• Der alpha-Kanal löst sich zu einer <number> zwischen 0 und 1 auf, einschließlich.

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

In den ersten beiden Beispielen unten verwenden wir die relative Farbsyntax. Trotzdem gibt das erste Beispiel die gleiche Farbe wie die Ursprungsfarbe aus und das zweite Beispiel erzeugt eine Farbe, die überhaupt nicht auf der Ursprungsfarbe basiert. Sie schaffen wirklich keine relativen Farben! Es ist unwahrscheinlich, dass Sie diese jemals in einer echten Codebasis verwenden würden, und wahrscheinlich würden Sie stattdessen einfach einen absoluten Farbwert verwenden. Wir haben diese Beispiele als Ausgangspunkt zum Erlernen der relativen oklab()-Syntax aufgenommen.

Beginnen wir mit einer Ursprungsfarbe von hsl(0 100% 50%) (entspricht red). Die folgende Funktion gibt die gleiche Farbe wie die Ursprungsfarbe aus — sie verwendet die l-, a- und b-Kanalwerte der Ursprungsfarbe (0.627966, 0.22488 und 0.125859) als die Ausgabekanalwerte:

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

Die Ausgabe dieser Funktion ist die Farbe oklab(0.627966 0.22488 0.125859).

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:

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 erzeugt eine relative Farbe, die auf der Ursprungsfarbe basiert:

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

Dieses Beispiel:

• Konvertiert die hsl() Ursprungsfarbe in eine gleichwertige oklab()-Farbe — oklab(0.627966 0.22488 0.125859).
• Setzt die L- und b-Kanalwerte für die Ausgabefarbe auf diejenigen der oklab()-Äquivalenten der Ursprungsfarbe — Diese Werte sind 0.627966 und 0.125859 jeweils.
• 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 Alpha-Kanäle weder für die Ursprungs- noch für die Ausgabefarben explizit angegeben. Wenn der Alphakanal der Ausgabefarbe nicht angegeben ist, beträgt der Standardwert den gleichen Wert wie der des Alphakanals der Ursprungsfarbe. Wenn der Alpha-Kanal der Ursprungsfarbe nicht spezifiziert ist (und es sich nicht um eine relative Farbe handelt), beträgt der Standardwert 1. Daher beträgt der Ursprungs- und Ausgabewert des Alpha-Kanals 1 für die obigen Beispiele.

Sehen wir uns einige Beispiele an, die Ursprungs- und Ausgabewerte der Alpha-Kanäle angeben. Das erste Beispiel gibt den Ausgabewert des Alpha-Kanals als den gleichen wie den Ursprungswert des Alpha-Kanals an, während das zweite einen anderen Ausgabewert des Alpha-Kanals angibt, der nicht mit dem Ursprungswert des Alpha-Kanals zusammenhängt.

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 das oklab()-Äquivalent 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

Anpassung der Helligkeit

Das folgende Beispiel zeigt die Wirkung der Variation der Helligkeit, der a-Achse und der b-Achse während der Verwendung 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

Anpassung der Deckkraft

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 die Wirkung der Deckkraft zu demonstrieren. Dem red-alpha-Element eine Deckkraft von 0.4 zu geben, lässt es transparenter erscheinen 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

Anpassung der Farbachsen

Dieses Beispiel demonstriert die Effekte des Einstellens der a- und b-Werte der oklab()-Funktion auf die Enden und Mittelpunkte der a-Achse und b-Achse. Die a-Achse reicht von grün (-0.4) bis rot (0.4) und die b-Achse 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

Verwendung der CSS-background-color-Eigenschaft, um die a- und b-Werte der oklab()-Farbfunktions entlang der a-Achse und b-Achse variieren zu lassen, wodurch die Effekte von maximalen, mittleren und minimalen Werten in jedem Fall gezeigt werden.

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 ist am gelben Ende (-0.4) der b-Achse und die rechte Spalte am blauen Ende (0.4). Die obere Reihe zeigt die Farben am roten Ende der a-Achse (-0.4) und die untere Reihe am grünen Ende (0.4). Die mittlere Spalte und Zeile liegen an den Mittelpunkten jeder Achse, wobei die mittlere Zelle grau ist; sie enthält keinen 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 die Werte des oklab()-Funktion entlang der a-Achse (von rot zu grün) und entlang der b-Achse (von gelb zu blau) zu demonstrieren. In jedem Gradientenbild bleibt eine Achse statisch, während die andere Achse von niedrigen zu hohen Werten fortschreitet.

<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

Verwendung relativer Farben mit oklab()

Dieses Beispiel stylt drei <div>-Elemente mit unterschiedlichen Hintergrundfarben. Das mittlere bekommt die unmodifizierte --base-color, während die linken und rechten eine aufgehellte und eine abgedunkelte Variante dieser --base-color bekommen.

Diese Varianten werden unter Verwendung relativer Farben definiert — die --base-color benutzerdefinierte Eigenschaft wird in eine oklab()-Funktion übergeben, und die Ausgabefarben haben ihren Helligkeitskanal verändert, um den gewünschten Effekt durch eine calc()-Funktion zu erzielen. Die aufgehellte Farbe hat 0.15 (15%) zum Helligkeitskanal hinzugefügt, 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

Der Output ist wie folgt:

Spezifikationen

Browser-Kompatibilität

Siehe auch

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