HWB to HEX Converter
Convert HWB (Hue, Whiteness, Blackness) colors to HEX.
#1AA1E6rgb(26, 161, 230)hwb(200 10% 10%)How HWB to HEX conversion works
HWB (Hue, Whiteness, Blackness) is a CSS Color Module 4 color model that describes a color by its hue angle (0–360°) plus how much white and how much black are mixed into it. It's designed to be more intuitive for humans to tweak by hand than RGB. To convert to HEX, the hue first produces a pure, fully-saturated color (as in HSL with 100% saturation and 50% lightness), then that color is blended toward white by the whiteness percentage and toward black by the blackness percentage. If whiteness and blackness add up to 100% or more, the result is a neutral gray. For example, hwb(0 0% 0%) is pure red (#FF0000), and hwb(0 100% 0%) is pure white (#FFFFFF). All conversion happens locally in your browser — nothing is uploaded.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Converting an HWB colour into the hex form older tooling and design handoffs expect.
- Producing a fallback hex value for browsers that do not support the HWB function.
- Translating a colour defined by whiteness and blackness into a concrete value.
- Comparing an HWB colour against an existing hex palette.
- Getting a hex value from a model that is easier to reason about by hand.
Frequently Asked Questions
- What is HWB?
- Hue, Whiteness, Blackness — the CSS Color 4 model that describes a colour as a pure hue mixed with white and black. It maps onto how a painter thinks: pick the hue, add white to tint it, add black to shade it, rather than juggling saturation and lightness together.
- How is it converted to RGB?
- Take the pure hue as if it were HSL at 100% saturation and 50% lightness, then scale the result into the range between whiteness and blackness. So the hue sets the colour and the two other numbers set how much of the available range it occupies.
- What happens when whiteness plus blackness exceeds 100%?
- The hue is irrelevant and the result is a grey, mixed in proportion to the two values. The spec defines this explicitly rather than clamping — `hwb(120 60% 60%)` is a grey at exactly the ratio 60:60, and the green never appears at all.
- How does HWB differ from HSL?
- They describe the same colours through different axes. HSL's saturation and lightness interact — lowering lightness also changes apparent saturation — while HWB's whiteness and blackness are independent additions. For a tint or shade ramp, HWB usually needs one number changed where HSL needs two.
- Can I use hwb() directly in CSS?
- Yes — it is supported across current browsers as `hwb(120 20% 10%)`, with an optional slash-alpha. Converting to hex is still useful for design tools, older build pipelines and anywhere the value has to be a plain six-digit string.
Common errors and gotchas
- Letting whiteness and blackness sum above 100%, where the result is a grey and the hue stops mattering.
- Assuming HWB is supported everywhere, which is why the hex fallback exists.
- Treating HWB saturation as HSL's, when the model is defined differently.
- Losing alpha, which hex can carry as eight digits but only if the tooling expects it.
- Round-tripping repeatedly through 8-bit hex, which accumulates rounding error.