О цвете HWB

Цвет HWB — это цветовая модель, которая описывает цвет тремя компонентами: оттенком, белизной и чернотой. Оттенок задает базовый цветовой тон, а белизна и чернота показывают, сколько белого и черного добавлено. Поэтому осветление, затемнение и приближение цвета к серому описываются достаточно наглядно.

Например, основные цвета, такие как красный, можно представить следующим образом.

Чтобы включить прозрачность, добавьте альфа-значение. Например, полупрозрачный красный можно записать как hwb(0deg 0% 0% / 0.5).

Обработка оттенка, белизны и черноты

Оттенок обрабатывается как угол, а значения больше 360deg или отрицательные значения нормализуются в диапазон от 0deg до 360deg. Например, hwb(360deg 0% 0%) обрабатывается как тот же цвет, что и hwb(0deg 0% 0%), а hwb(-120deg 0% 0%) — как тот же цвет, что и hwb(240deg 0% 0%).

Белизна и чернота обрабатываются в диапазоне от 0% до 100%. Чем больше белизна, тем ближе цвет к белому; чем больше чернота, тем ближе он к черному. Если сумма белизны и черноты равна 100% или больше, цвет обрабатывается как сероватый независимо от оттенка.

Разница между HWB и HSL

HSL регулирует цвет с помощью насыщенности и светлоты, поэтому подходит для задания яркости и светлоты. HWB регулирует цвет количеством добавленного белого и черного, поэтому легко описывает операции вроде «сделать белее при том же оттенке» или «добавить черный, чтобы затемнить».

Однако HWB также не является перцептуально равномерным цветовым пространством. Если нужно удобнее работать с видимой яркостью или различиями цветов, можно использовать цветовые пространства, такие как Lab, LCH, Oklab и Oklch.