RGB to HWB Converter

Summary

Enter R, G, B values (0–255) and instantly get the HWB equivalent with a live color swatch and one-click copy.

How it works

1. Enter R, G, and B values (each between 0 and 255) in the input fields.
2. The HWB output — Hue (°), Whiteness (%), and Blackness (%) — updates instantly.
3. A color swatch previews the exact color you have entered.
4. Click "Copy HWB" to copy the hwb() CSS string to your clipboard.
5. Click "Copy RGB" to copy the rgb() string for the current color.
6. Use the HWB sliders in the Reverse panel to build a color and see the RGB values update live.

Use cases

• Convert RGB design specs to HWB for CSS Color Level 4 stylesheets.
• Understand how whiteness and blackness affect a hue intuitively.
• Build HWB color pickers and palette generators.
• Match brand colors in tools that support the HWB model.
• Validate color transformations during UI development.
• Learn color theory by exploring the HWB model interactively.
• Generate hwb() values for modern browser CSS without a preprocessor.
• Cross-check color output between design tools that use different models.

Frequently Asked Questions