HWB

Warning: This color format is not widely supported at the moment. Be cautious when using it, and avoid relying on it in production environments.

HWB stands for Hue-Whiteness-Blackness, it is a color format close to HSL, but often seen as an easier option for humans to understand and work with.

The HWB parameters represent the following:

• Hue: an angle in the color circle/wheel.
• Whiteness: a percentage that represents the amount of white to mix into the color. The higher the value, the clearer/whiter the color.
• Blackness: a percentage that represents the amount of black to mix in. The higher the value, the darker/blacker the color will be.

As this is a new color function, it automatically comes with the space-separated notation and there is no comma-separated notation (and not hwba). This is the only syntax to use:

If the values of white and black add up to 100% (after normalization), the color will be achromatic: a shade of gray without any hint of the original hue value.

This simple syntax allows for 6 different combinations to represent the same color:

color: hwb(180 0% 0%);
color: hwb(180 0% 0% / 1);  
color: hwb(180 0% 0% / 100%);
color: hwb(180deg 0% 0%);
color: hwb(180deg 0% 0% / 1);
color: hwb(180deg 0% 0% / 100%);

None of the tested browsers supported the hwb() function.