HWB to HEX Converter

About the HWB to HEX Converter

What is HWB to HEX conversion?

HWB builds a color the intuitive way — pick a Hue, mix in Whiteness, mix in Blackness — and CSS supports it natively as hwb(). But HEX remains the universal currency of the web, design tools and documentation. This converter turns any HWB triple into its exact #RRGGBB, listing RGB, HSL, HSB, OKLCH, LCH, LAB and CMYK beside it.

The three sliders make it a genuinely pleasant color picker: sweep the hue wheel, then temper the color with white or black and watch the live gradients update. When W and B together exceed 100% the result normalizes to a gray, exactly as the CSS specification says it should. All of it runs locally in your browser.

How to Use This Tool

1. Set your HWB values. Drag Hue (0–360°), Whiteness and Blackness (0–100%) or type exact numbers from an hwb() declaration.
2. Read the HEX code. It leads the results with a live preview of the rendered color.
3. Mix like paint. More W for pastels, more B for shadows, both for muted grays.
4. Copy any format. Each listed value has a one-click copy button; the main button copies HEX.

Common Use Cases

• From modern CSS to HEX: Decode hwb() values from a stylesheet into codes any tool accepts.
• Pastel & shade design: Design in HWB's intuitive mixing model, export HEX for the codebase.
• Compatibility: Generate hex fallbacks for browsers or emails that predate hwb() support.
• Palette exploration: Fix a hue and walk W and B to generate a full tonal family, grabbing HEX at each stop.
• Quick visualization: Type an hwb() from documentation and immediately see and copy the color.

Going the other way? Use the HEX to HWB converter, work in HSB instead, or browse all our free color tools.

Frequently Asked Questions

How do I convert HWB to HEX?

Set the Hue angle and the Whiteness and Blackness percentages with the sliders or number boxes; the HEX code updates instantly. Internally the pure hue is generated first, then white and black are mixed in per the CSS algorithm.

What if Whiteness plus Blackness is more than 100%?

The result is an achromatic gray set by the ratio between the two, and the hue no longer matters. That is the normalization the CSS specification defines, and the converter applies it identically.

How do I make pastels and shades in HWB?

Keep the hue fixed and raise Whiteness for pastels (hwb(340 40% 0%) is a soft pink) or raise Blackness for shades (hwb(340 0% 40%) is a deep wine). Raising both mutes the color toward gray.

Is HWB the same as HSB/HSV?

They are related but not identical. HSB uses saturation and brightness; HWB uses white and black amounts. Conversion between them is exact, and this page shows the HSB value too so you can compare.

Is this tool free and private?

Completely. The conversion runs entirely in your browser with JavaScript, nothing you enter is uploaded or logged, and the page keeps working offline once loaded.