CSS oklch() function

CSS

Definition and usage in oklch() The function is used to specify colors in the OKLCH color space.

oklch() The function is very intuitive: you need to consider the amount of brightness/lightness (L) you want to use, the strength of the hue (gray), and the color itself (H). In addition, you can also choose to add a transparency channel value (A) to represent the opacity of the color.

instances

Define different oklch() Color:

/* Different brightness levels of green /
#p1 {background-color: oklch(30% 0.4 150);}
#p2 {background-color: oklch(60% 0.4 150);}
#p3 {background-color: oklch(100% 0.4 150);}
/ Gelb mit verschiedenen Helligkeiten /
#p4 {background-color: oklch(30% 0.4 100);}
#p5 {background-color: oklch(60% 0.4 100);}
#p6 {background-color: oklch(100% 0.4 100);}
/ Rot mit verschiedenen Helligkeiten */
#p7 {background-color: oklch(30% 0.4 20);}
#p8 {background-color: oklch(60% 0.4 20);}
#p9 {background-color: oklch(100% 0.4 20);}

Versuchen Sie es selbst

CSS-Syntax

Absolute Wert-Syntax

oklch(L C H / A)
Wert Beschreibung
L

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

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

Man kann auch none (das dem 0% entspricht) verwenden.
C

Notwendig. Definiert den Farbton (Menge der Farbe), kann eine Zahl oder ein Prozentsatz sein.

Muss eine Zahl zwischen -0.4 und 0.4 oder ein Prozentsatz zwischen -100% und 100% sein.

Bei einem Mindestwert (0% oder -0.4) ist die Farbe näher an Grau.

Man kann auch none (das dem 0% entspricht) verwenden.
H

Notwendig. Definiert die Farbe selbst, kann eine Zahl oder ein Winkel (von 0 bis 360) sein.

Man kann auch none (das dem 0deg entspricht) verwenden.
/ A

Optional. Stellt den Transparenzkanalwert der Farbe dar (0% oder 0 bedeutet vollständig transparent, 100% oder 100 bedeutet vollständig undurchsichtig).

Man kann auch none (was für keine Transparenzkanäle steht) verwenden.

Standardwert ist 100%.

Relative Wert-Syntax

oklch(from color L C H / A)
Wert Beschreibung
from color

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

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

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

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

Man kann auch none (das dem 0% entspricht) verwenden.
C

Notwendig. Definiert den Farbton (Menge der Farbe), kann eine Zahl oder ein Prozentsatz sein.

Muss eine Zahl zwischen -0.4 und 0.4 oder ein Prozentsatz zwischen -100% und 100% sein.

Bei einem Mindestwert (0% oder -0.4) ist die Farbe näher an Grau.

Man kann auch none (das dem 0% entspricht) verwenden.
H

Notwendig. Definiert die Farbe selbst, kann eine Zahl oder ein Winkel (von 0 bis 360) sein.

Man kann auch none (das dem 0deg entspricht) verwenden.
/ A

Optional. Stellt den Transparenzkanalwert der Farbe dar (0% oder 0 bedeutet vollständig transparent, 100% oder 100 bedeutet vollständig undurchsichtig).

Man kann auch none (was für keine Transparenzkanäle steht) verwenden. Standardwert ist 100%.

Technische Details

Version: CSS Color Module Level 4

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser-Version dar, die diese Funktion vollständig unterstützt.

Chrome Edge Firefox Safari Opera
oklch()
111 111 113 15.4 97
Zusammen混用数字和百分比在参数中
116 116 113 16.2 102

Verwandte Seiten

Referenz:CSS-Farbe

Referenz:CSS hsl() Funktion

Referenz:CSS hwb() Funktion

Referenz:CSS lab() Funktion

Referenz:CSS lch() Funktion

Referenz:CSS oklab() Funktion