CSS-Funktion oklab()

Definition und Verwendung

CSS- oklab() Funktionen, um Farben im OKLAB-Farbraum zu spezifizieren. Dieser Farbraum ist darauf ausgelegt, die Art und Weise zu simulieren, wie das menschliche Auge Farben wahrnimmt.

Beispiele

Definieren Sie verschiedene oklab() Farbe:

#p1 {background-color:oklab(0 40% 20% / 0.5);}
#p2 {background-color:oklab(0.3 -40% -20%);}
#p3 {background-color:oklab(0.4 30% -20% / 20%);}
#p4 {background-color:oklab(0.5 60% 20%);}
#p5 {background-color:oklab(0.6 50% -10%);}
#p6 {background-color:oklab(0.7 70% -80% / 0.3);}
#p7 {background-color:oklab(0.8 70% 20% / 0.5);}
#p8 {background-color:oklab(0.9 80% -20%);}
#p9 {background-color:oklab(1 90% -100%);}

Versuchen Sie es selbst

CSS Syntax

absolute Werte Syntax

oklab(L a b / A)
Wert Beschreibung
L

Erforderlich. Definiert die wahrgenommene Helligkeit der Farbe, die ein Zahl zwischen 0 und 1 oder ein Prozentsatz zwischen 0% und 100% sein kann.

0 (oder 0%) bedeutet Schwarz, 1 (oder 100%) bedeutet Weiß.

Man kann auch None (entspricht 0%) verwenden.
a

Erforderlich. Definiert eine Zahl zwischen -0.4 und 0.4 oder einen Prozentsatz zwischen -100% und 100%.

Definiert den Abstand der Farbe entlang der a-Achse, was die Rot-Grün-Komponente der Farbe darstellt.

-0.4 bedeutet Grün, 0.4 bedeutet Rot. Man kann auch none (entspricht 0%) verwenden.
b

Erforderlich. Definiert eine Zahl zwischen -0.4 und 0.4 oder einen Prozentsatz zwischen -100% und 100%.

Definiert den Abstand der Farbe entlang der b-Achse, was die Gelb-Blau-Komponente der Farbe darstellt.

-0.4 bedeutet Blau, 0.4 bedeutet Gelb. Man kann auch none (entspricht 0%) verwenden.
/ A

Optional. Der Wert des Transparenzkanals der Farbe (0% oder 0 bedeutet vollständig transparent, 100% oder 100 bedeutet vollständig undurchsichtig).

Man kann auch none (was für den Transparenzkanal 'kein' bedeutet) verwenden. Standardwert ist 100%.

relative Werte Syntax

oklab(from color L a b / A)
Wert Beschreibung
from color

Beginnt mit dem Schlüsselwort 'from', gefolgt von dem Wert der ursprünglichen Farbe.

Dies ist die ursprüngliche Farbe, auf der die relative Farbe basiert.
L

Erforderlich. Definiert die wahrgenommene Helligkeit der Farbe, die ein Zahl zwischen 0 und 1 oder ein Prozentsatz zwischen 0% und 100% sein kann.

0 (oder 0%) bedeutet Schwarz, 1 (oder 100%) bedeutet Weiß.

Man kann auch none (entspricht 0%) verwenden.
a

Erforderlich. Definiert eine Zahl zwischen -0.4 und 0.4 oder einen Prozentsatz zwischen -100% und 100%.

Definiert den Abstand der Farbe entlang der a-Achse, was die Rot-Grün-Komponente der Farbe darstellt.

-0.4 bedeutet Grün, 0.4 bedeutet Rot. Man kann auch none (entspricht 0%) verwenden.
b

Erforderlich. Definiert eine Zahl zwischen -0.4 und 0.4 oder einen Prozentsatz zwischen -100% und 100%.

Definiert den Abstand der Farbe entlang der b-Achse, was die Gelb-Blau-Komponente der Farbe darstellt.

-0.4 bedeutet Blau, 0.4 bedeutet Gelb. Man kann auch none (entspricht 0%) verwenden.
/ A

Optional. Der Wert des Transparenzkanals der Farbe (0% oder 0 bedeutet vollständig transparent, 100% oder 100 bedeutet vollständig undurchsichtig).

Man kann auch none (was für den Transparenzkanal 'kein' bedeutet) verwenden. Standardwert ist 100%.

Technische Details

Version: CSS Color Module Level 4

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Funktion vollständig unterstützen.

Chrome Edge Firefox Safari Opera
oklab()
111 111 113 15.4 97
Die Kombination von Zahlen und Prozentsätzen in den Parametern
116 116 113 16.2 102

zugehörige Seiten

Referenz:CSS-Farbe

Referenz:CSS hsl() Funktion

Referenz:CSS hwb() Funktion

Referenz:CSS lch() Funktion

Referenz:CSS lab() Funktion

Referenz:CSS oklch() Funktion