HEX to HWB converter
Enter a color code to get its three HWB values and a ready CSS string.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter hex color.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
H is the HSV hue, W = smallest channel ÷ 255 and B = 1 − largest channel ÷ 255, as percentages.
Example
Inputs: HEX color = #3399CC. Result: CSS hwb(): hwb(200 20% 20%); Hue H: 200 °; Whiteness W: 20%.
#3399CC
hwb(200 20% 20%)
Limits and caveats
- Grays have no hue, so H shows as 0.
- 8-digit codes with alpha are not accepted.
Questions about this tool
How do I lighten a color with HWB?
Raise whiteness W and keep the hue, so the color moves toward white without changing its base hue.
Is the HWB hue the same as the HSL hue?
Yes. Hue H is the same in HSL, HSV and HWB.
Why is whiteness plus blackness at most 100% here?
The smallest channel cannot exceed the largest, so the sum reaches 100% only for grays.