Функция CSS hwb()

Определение и использование

CSS hwb() Функция использует модель цвета тона-белизна-чернота (HWB) для определения цвета. Также можно добавить опциональный канал прозрачности (представляющий прозрачность цвета).

Пример

Определение различных цветов 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%);}

Попробуйте сами

Синтаксис CSS

Синтаксис абсолютных значений

hwb(hue whiteness blackness / A)
Значение Описание
hue

Обязателен. Определяет угол на цветовом круге (от 0 до 360) — 0 (или 360) это красный, 120 это зеленый, 240 это синий.

Можно также использовать none (эквивалентно 0deg).
whiteness

Обязателен. Определяет белизну смешивания; 0% означает отсутствие белизны, 100% означает полную белизну.

Можно также использовать none (эквивалентно 0%).
blackness

Обязателен. Определяет черноту смешивания; 0% означает отсутствие черноты, 100% означает полную черноту.

Можно также использовать none (эквивалентно 0%).
/ A

Опционально. Значение канала прозрачности цвета (0% или 0 означает полное проходимость, 100% или 100 означает полное непрозрачность).

Можно также использовать none (что означает отсутствие канала прозрачности).

Значение по умолчанию 100%.

Синтаксис относительных значений

hwb(from color whiteness blackness / A)
Значение Описание
from color

Начинается с ключевого слова from, за которым следует значение цвета, представляющее исходный цвет.

Это исходный цвет, на котором основаны относительные цвета.
hue

Обязателен. Определяет угол на цветовом круге (от 0 до 360) — 0 (или 360) это красный, 120 это зеленый, 240 это синий.

Можно также использовать none (эквивалентно 0deg).
whiteness

Обязателен. Определяет белизну смешивания; 0% означает отсутствие белизны, 100% означает полную белизну.

Можно также использовать none (эквивалентно 0%).
blackness

Обязателен. Определяет черноту смешивания; 0% означает отсутствие черноты, 100% означает полную черноту.

Можно также использовать none (эквивалентно 0%).
/ A

Опционально. Значение канала прозрачности цвета (0% или 0 означает полное проходимость, 100% или 100 означает полное непрозрачность).

Можно также использовать none (что означает отсутствие канала прозрачности).

Значение по умолчанию 100%.

Технические детали

Версия: Уровень 4 Модуля цветов CSS

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.

Chrome Edge Firefox Safari Opera
hwb()
101 101 96 15 87
Смешение чисел и процентов в параметрах
121 121 122 Не поддерживается 107

Связанные страницы

См. также:Цвета CSS

См. также:Функция CSS hsl()

См. также:Функция CSS lab()

См. также:Функция CSS lch()

См. также:Функция oklab() в CSS

См. также:Функция oklch() в CSS