About HWB Color

HWB color is a color model that represents colors with three components: hue, whiteness, and blackness. Hue specifies the base color tone, while whiteness and blackness specify how much white and black are mixed in, making it intuitive to lighten, darken, or move a color toward gray.

For example, major colors such as red can be represented as follows.

To include transparency, add an alpha value. For example, semi-transparent red can be represented as hwb(0deg 0% 0% / 0.5).

Handling of hue, whiteness, and blackness

Hue is handled as an angle, and values greater than 360deg or negative values are normalized to the range from 0deg to 360deg. For example, hwb(360deg 0% 0%) is handled as the same color as hwb(0deg 0% 0%), and hwb(-120deg 0% 0%) as the same color as hwb(240deg 0% 0%).

Whiteness and blackness are handled in the range from 0% to 100%. Larger whiteness values move the color closer to white, and larger blackness values move it closer to black. When the sum of whiteness and blackness is 100% or more, the color is handled as a grayish color regardless of hue.

Difference between HWB and HSL

HSL adjusts color with saturation and lightness, so it is suitable for specifying vividness and brightness. HWB adjusts color by the amount of white and black mixed in, making operations such as “make it whiter with the same hue” or “add black to darken it” easy to describe.

However, HWB is also not a perceptually uniform color space. When you want to handle visual brightness or color differences more easily, color spaces such as Lab, LCH, Oklab, and Oklch may be used.