HEX to HWB Converter
Convert HEX colors to the CSS HWB (Hue, Whiteness, Blackness) format.
How HEX to HWB conversion works
HWB (Hue, Whiteness, Blackness) is a CSS Color Module 4 color model that's designed to be more intuitive for humans to reason about than RGB. Hue is the angle on the color wheel (0–360°), just like in HSL. Whiteness is how much white is mixed into the color (0–100%), and blackness is how much black is mixed in (0–100%). Increasing both whiteness and blackness moves a color toward gray, since the two together can never exceed 100%. To convert, the hue is calculated the same way as HSL, then whiteness is derived from the minimum RGB channel value and blackness from the inverse of the maximum RGB channel value. This tool performs the conversion entirely in your browser — your colors are never sent anywhere.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Converting an existing hex palette into a model that is easier to adjust by hand.
- Producing HWB values for CSS where whiteness and blackness are the natural controls.
- Building a tint and shade scale from a base colour more intuitively.
- Comparing two hex colours by their whiteness and blackness.
- Getting a starting HWB value from a designer's hex specification.
Frequently Asked Questions
- How is HWB derived from RGB?
- Whiteness is the minimum channel and blackness is one minus the maximum, both as fractions — so they read the distance from pure colour toward white and toward black directly. The hue comes from the same sector arithmetic HSL uses.
- What does a whiteness of 0 and blackness of 0 mean?
- A fully saturated pure hue — the colour at the outer edge of the wheel. `hwb(0 0% 0%)` is pure red, exactly `#FF0000`. Every other colour is that hue with some white or black mixed in, which is what makes the model so direct for building tints and shades.
- Why can two different hex values give the same HWB hue?
- Because hue is only one of three components. `#FF8080` and `#800000` are both hue 0 — one is red with whiteness added, the other red with blackness added. The hue tells you which family a colour belongs to and nothing about how light or vivid it is.
- Is the conversion lossless?
- Mathematically yes, in continuous arithmetic — HWB and RGB describe the same sRGB colours. Rounding is where it degrades: reporting whiteness and blackness as whole percentages quantises the space enough that a round trip can shift a channel by a value or two.
- When is HWB the more useful model?
- Building a tint or shade ramp from one hue, because each direction is a single independent number. In HSL the same ramp requires moving lightness and compensating saturation together, which is why HSL ramps so often drift in apparent hue.
Common errors and gotchas
- Assuming HWB is universally supported, which is why a hex fallback is still needed.
- Reading HWB saturation as HSL's, when the model is defined differently.
- Overlooking that whiteness and blackness summing above 100% produces a grey regardless of hue.
- Losing alpha, which needs the four- or eight-digit hex form to carry.
- Reading the whiteness figure as a tint percentage, when it is one of two components that interact.