CSS: HWB color (hue whiteness blackness)

What is HWB color

HWB stand for Hue Whiteness Blackness. It is a color model similar to HSL Color and is supposed to be intuitive for humans.

think of it as starting with a color and mix it with amounts of white and black.

Syntax

hwb(hue whiteness blackness)

• hue → integer from 0 to 360, or a Angle Unit (deg rad grad turn)
• whiteness → percentage. (the % can be omitted)
• blackness → percentage. (the % can be omitted)

opacity

hwb(hue whiteness blackness / opacity)

• opacity → a number from 0 to 1.

example

.x {

 color: hwb(180 12 8);

/* dropping the percentage % sign */
 color: hwb(180 12% 8%);

 /* first arg can be any angle unit */
 color: hwb(180deg 12 8);
 color: hwb(0.5turn 12 8);
}

.x {
 /* with opacity  */
 color: hwb(120 30 10 / 0.5);
 /* or */
 color: hwb(120 30% 10% / 0.5);
}

HWB color samples

when both whiteness and blackness is above 50%, or if they add up to 100, the color becomes gray.