CSS hwb() Funktion

Definition und Verwendung

CSS hwb() Die Funktion verwendet das Farbmodell Ton-Helligkeit-Sättigung (HWB), um Farben zu spezifizieren. Es kann auch ein optionaler Transparenzkanal hinzugefügt werden (der die Transparenz der Farbe darstellt).

Beispiel

Definieren Sie verschiedene HWB(A)-Farben:

#p1 {background-color:hwb(60 40% 20% / 0.5);}
#p2 {background-color:hwb(120 40% 20%);}
#p3 {background-color:hwb(120 40% 20% / 20%);}
#p4 {background-color:hwb(240 40% 20%);}
#p5 {background-color:hwb(240 50% 10%);}
#p6 {background-color:hwb(240 40% 20% / 0.3);}
#p7 {background-color:hwb(300 40% 20% / 0.5);}
#p8 {background-color:hwb(360 40% 20%);}
#p9 {background-color:hwb(360 90% 0%);}

Selbst ausprobieren

CSS-Syntax

Absolute Wertssyntax

hwb(hue whiteness blackness / A)
Wert Beschreibung
hue

Erforderlich. Definiert den Winkel auf dem Farbzyklus (0 bis 360) - 0 (oder 360) ist Rot, 120 ist Grün, 240 ist Blau.

Man kann auch none (das ist gleichbedeutend mit 0deg) verwenden.
whiteness

Erforderlich. Definiert den Weißanteil der Mischung; 0% bedeutet keinen Weißanteil, 100% bedeutet vollständiger Weißanteil.

Man kann auch none (das ist gleichbedeutend mit 0%) verwenden.
blackness

Erforderlich. Definiert den Schwarzanteil der Mischung; 0% bedeutet keinen Schwarzanteil, 100% bedeutet vollständiger Schwarzanteil.

Man kann auch none (das ist gleichbedeutend mit 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 keine Transparenzkanäle steht) verwenden.

Standardwert ist 100%.

Relative Wertssyntax

hwb(from color whiteness blackness / 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 der relative Farbton basiert.
hue

Erforderlich. Definiert den Winkel auf dem Farbzyklus (0 bis 360) - 0 (oder 360) ist Rot, 120 ist Grün, 240 ist Blau.

Man kann auch none (das ist gleichbedeutend mit 0deg) verwenden.
whiteness

Erforderlich. Definiert den Weißanteil der Mischung; 0% bedeutet keinen Weißanteil, 100% bedeutet vollständiger Weißanteil.

Man kann auch none (das ist gleichbedeutend mit 0%) verwenden.
blackness

Erforderlich. Definiert den Schwarzanteil der Mischung; 0% bedeutet keinen Schwarzanteil, 100% bedeutet vollständiger Schwarzanteil.

Man kann auch none (das ist gleichbedeutend mit 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 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 Versionsnummer der ersten Browser dar, die diese Funktion vollständig unterstützen.

Chrome Edge Firefox Safari Opera
hwb()
101 101 96 15 87
Zahl und Prozentsatz in den Parametern mischen
121 121 122 Nicht unterstützt 107

Verwandte Seiten

Referenz:CSS-Farbe

Referenz:CSS hsl() Funktion

Referenz:CSS lab() Funktion

Referenz:CSS lch() Funktion

Referenz:CSS oklab() Funktion

Referenz:CSS oklch() Funktion