HWB stands for Hue, Whiteness, and Blackness. It describes colors by starting with a pure hue and mixing in amounts of white or black, making it more intuitive than HSL for creating tints and shades.

Is hwb() supported in modern browsers?

Yes. HWB is part of CSS Color Level 4 and is supported in all major modern browsers as of 2022.

What happens when whiteness plus blackness exceeds 100%?

The two values are normalized proportionally so their sum equals 100%, producing a gray tone.

How is HWB different from HSL?

HSL uses saturation and lightness, which interact in non-obvious ways. HWB uses whiteness and blackness as separate additive components, making color mixing more predictable.

HEX to HWB Converter for CSS Color 4

Paste a HEX code and get the hwb() CSS value with whiteness and blackness percentages.

Color

Summary

Paste a HEX code and get the hwb() CSS value with whiteness and blackness percentages.

How it works

Enter a HEX color code
Copy the hwb() string from the output
Paste into your CSS file directly

Use cases

Adopt CSS Color Level 4 hwb() notation
Create tints and shades by adjusting whiteness or blackness
Understand color composition in a more intuitive model

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu