HWB to HEX Converter

Summary

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

How it works

1. Set the Hue (0–360°), Whiteness (0–100%), and Blackness (0–100%) using sliders or number inputs.
2. The HEX code updates instantly as you adjust values.
3. A color swatch shows the exact resulting color.
4. Click "Copy HEX" to copy the hex string (with #) to your clipboard.
5. Use the Reverse panel: paste or type any HEX code to see its HWB values.
6. 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