HWB stands for Hue, Whiteness, Blackness. Hue is the color angle (0–360°), Whiteness is the proportion of white added (0–100%), and Blackness is the proportion of black added (0–100%). It is part of CSS Color Level 4 and is designed to be more intuitive than HSL because you tint or shade a hue directly.

How does HWB convert to HEX?

HWB is first converted to RGB: if Whiteness + Blackness >= 100%, both are normalized so they sum to 100% (producing a gray). Otherwise each pure-hue component is scaled by (1 − W − B) and then W is added. The resulting R, G, B values (0–255) are each converted to a 2-digit hex pair and concatenated into a #RRGGBB string.

What happens when Whiteness + Blackness exceed 100%?

Both values are scaled down proportionally so they sum to 100%. The result is a gray tone between pure white and pure black, which matches the CSS Color Level 4 specification behavior.

Is hwb() supported in browsers?

Yes. The hwb() function is part of CSS Color Level 4 and is supported in Chrome 101+, Firefox 96+, and Safari 15+. If you need to support older browsers, use the HEX equivalent produced by this tool.

Does this tool send my data anywhere?

No. All conversion math runs entirely in your browser using JavaScript. Nothing is sent to any server.

What is the difference between HWB and HSL?

HSL uses a single Lightness axis that goes from black through the pure hue to white. HWB separates whiteness and blackness into two independent axes, making tinting and shading more predictable and intuitive.

HWB to HEX Converter

Enter HWB values and instantly get the HEX color code with a live preview — plus reverse HEX-to-HWB lookup.

HWB Input

Hue (°) 33°

Whiteness (%) 0%

Blackness (%) 0%

Or pick a color to auto-fill HWB

#ff8b00

HEX Output

#FF8B00

Reverse: HEX to HWB

Paste a HEX code below to see its HWB values.

Hue (°)

Whiteness (%)

Blackness (%)

Copied!

Summary

This tool converts HWB (Hue, Whiteness, Blackness) color values to the six-digit HEX format used in CSS, HTML, and design tools. Adjust the hue angle (0–360°), whiteness (0–100%), and blackness (0–100%) sliders or type values directly, and the tool outputs the matching HEX code with a live color swatch. A reverse panel lets you paste any HEX code and instantly see its HWB breakdown.

How it works

Set the Hue (0–360°), Whiteness (0–100%), and Blackness (0–100%) using sliders or number inputs.
The HEX code updates instantly as you adjust values.
A color swatch shows the exact resulting color.
Click "Copy HEX" to copy the hex string (with #) to your clipboard.
Use the Reverse panel: paste or type any HEX code to see its HWB values.
Click the color picker icon to sample a color from your screen and see its HWB and HEX.

Use cases

Convert CSS hwb() values to HEX for tools that do not support CSS Color Level 4.
Build color palettes by tinting (adding whiteness) or shading (adding blackness) a hue.
Validate HWB-to-HEX output during frontend development.
Design accessible color schemes by controlling lightness via whiteness and blackness.
Translate design tokens expressed in HWB to HEX for legacy systems.
Learn the HWB color model interactively with instant visual feedback.
Cross-check color values between design tools using different color spaces.
Generate HEX swatches for brand palettes defined with HWB.

Frequently Asked Questions

Last updated: 2026-05-28 · Reviewed by Nham Vu