Funkcja CSS hwb()

definicja i użycie

CSS hwb() Funkcja CSS używa modelu tonacji-białego-czarnego (HWB) do określania kolorów. Można również dodać kanał przezroczystości (oznaczający przezroczystość koloru).

Przykład

Definiowanie różnych kolorów HWB(A):

#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%);}

Spróbuj sam

Gramatyka CSS

Gramatyka wartości absolutnej

hwb(hue whiteness blackness / A)
Wartość Opis
hue

Wymagane. Definiuje kąt na kole kolorów (0 do 360) - 0 (lub 360) to czerwony, 120 to zielony, 240 to niebieski.

Można również użyć none (równoważne 0deg).
whiteness

Wymagane. Definiuje biel mieszanki; 0% oznacza brak bieli, 100% oznacza pełną biel.

Można również użyć none (równoważne 0%).
blackness

Wymagane. Definiuje czarność mieszanki; 0% oznacza brak czarności, 100% oznacza pełną czarność.

Można również użyć none (równoważne 0%).
/ A

Opcjonalnie. Wartość kanału przezroczystości koloru (0% lub 0 oznacza całkowitą przezroczystość, 100% lub 100 oznacza całkowitą nieprzeźroczystość).

Można również użyć none (oznaczającego brak kanału przezroczystości).

Domyślna wartość to 100%.

Gramatyka wartości relatywnej

hwb(from color whiteness blackness / A)
Wartość Opis
from color

Zaczyna się od słowa kluczowego from, po którym następuje wartość koloru reprezentującego oryginalny kolor.

To jest oryginalny kolor, na którym opiera się relatywny kolor.
hue

Wymagane. Definiuje kąt na kole kolorów (0 do 360) - 0 (lub 360) to czerwony, 120 to zielony, 240 to niebieski.

Można również użyć none (równoważne 0deg).
whiteness

Wymagane. Definiuje biel mieszanki; 0% oznacza brak bieli, 100% oznacza pełną biel.

Można również użyć none (równoważne 0%).
blackness

Wymagane. Definiuje czarność mieszanki; 0% oznacza brak czarności, 100% oznacza pełną czarność.

Można również użyć none (równoważne 0%).
/ A

Opcjonalnie. Wartość kanału przezroczystości koloru (0% lub 0 oznacza całkowitą przezroczystość, 100% lub 100 oznacza całkowitą nieprzeźroczystość).

Można również użyć none (oznaczającego brak kanału przezroczystości).

Domyślna wartość to 100%.

Szczegóły techniczne

Wersja: CSS Color Module Level 4

Wsparcie przeglądarki

Liczby w tabeli oznaczają wersję przeglądarki, która w pełni obsługuje tę funkcję.

Chrome Edge Firefox Safari Opera
hwb()
101 101 96 15 87
Mieszanie liczb i procent w parametrach
121 121 122 Nieobsługiwane 107

Strony związane

Odnośniki:Kolory CSS

Odnośniki:Funkcja CSS hsl()

Odnośniki:Funkcja CSS lab()

Odnośniki:Funkcja CSS lch()

Odnośniki:Funkcja CSS oklab()

Odnośniki:Funkcja CSS oklch()