HWB to RGB Converter

Summary

Enter HWB values and instantly get the RGB color with a live preview swatch and step-by-step conversion breakdown.

How it works

1. Set the Hue (0–360°), Whiteness (0–100%), and Blackness (0–100%) using sliders or number inputs.
2. If Whiteness + Blackness >= 100%, both are normalized proportionally to sum to 100% (producing a gray).
3. The pure-hue RGB components are derived from the hue angle using the HWB algorithm.
4. Each component is scaled by (1 − W − B) and whiteness is added, yielding the final R, G, B values (0–255).
5. The Conversion Steps panel shows every intermediate value in the calculation.
6. Click Copy RGB or Copy CSS to copy the result to your clipboard.

Use cases

• Convert CSS hwb() values to rgb() for tools that do not support CSS Color Level 4.
• Understand the HWB color model by inspecting each intermediate conversion step.
• Build color palettes by tinting (adding whiteness) or shading (adding blackness) a hue.
• Validate HWB-to-RGB output during frontend or design-tool development.
• Translate design tokens expressed in HWB to RGB for game engines or image editors.
• Learn how whiteness and blackness parameters affect the final RGB channels.
• Cross-check color values between design tools that use different color spaces.
• Generate RGB values for brand palette swatches defined with HWB.

Frequently Asked Questions