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 is HWB converted to RGB?

First, if Whiteness + Blackness >= 100%, both are normalized so they sum to 100% (producing a gray). Next, the pure-hue RGB components for the given hue angle are computed. Each component is then scaled by (1 − W − B) and whiteness (W) is added. Finally, the resulting 0–1 values are multiplied by 255 and rounded to produce the integer R, G, B channels.

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, convert to rgb() using the values produced by this tool.

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.

Does this tool send my data anywhere?

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

HWB to RGB Converter

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

HWB Input

Hue (°) 210°

Whiteness (%) 10%

Blackness (%) 20%

Or pick a color to auto-fill HWB

rgb(26, 115, 204)

RGB Output

rgb(26, 115, 204)

Red 26 0–255

Green 115 0–255

Blue 204 0–255

Conversion Steps

Follow the math — each intermediate value is shown below.

Copied!

Summary

This tool converts HWB (Hue, Whiteness, Blackness) color values to the RGB format used in CSS and design applications. Adjust the hue angle (0–360°), whiteness (0–100%), and blackness (0–100%) sliders or type values directly. The tool shows the resulting rgb() string alongside a live color swatch, and breaks down every intermediate calculation step so you can follow the math.

How it works

Set the Hue (0–360°), Whiteness (0–100%), and Blackness (0–100%) using sliders or number inputs.
If Whiteness + Blackness >= 100%, both are normalized proportionally to sum to 100% (producing a gray).
The pure-hue RGB components are derived from the hue angle using the HWB algorithm.
Each component is scaled by (1 − W − B) and whiteness is added, yielding the final R, G, B values (0–255).
The Conversion Steps panel shows every intermediate value in the calculation.
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

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