What is HWB color notation?

HWB stands for Hue, Whiteness, Blackness. It is a human-friendly color model defined in CSS Color Level 4. Hue is a degree on the color wheel (0–360), while Whiteness and Blackness are percentages that mix white or black paint into a pure hue.

How is HWB converted to RGBA?

HWB is first normalized so that Whiteness + Blackness do not exceed 100%. The pure hue is resolved to RGB via the standard HSL algorithm (Saturation = 100%, Lightness = 50%). Then each channel is scaled: channel = channel × (1 − w − b) + w, where w and b are the normalized whiteness and blackness fractions.

What happens when Whiteness + Blackness exceeds 100%?

Both values are proportionally scaled down so they sum to exactly 100%. This produces a neutral gray. The tool handles this automatically and shows a notice when normalization is applied.

What does the Alpha channel control?

Alpha controls transparency. A value of 1 is fully opaque, 0 is fully transparent, and values in between produce semi-transparent colors useful for overlays and blending in CSS and canvas.

Is the output suitable for direct use in CSS?

Yes. The output rgba() string can be pasted directly into any CSS property that accepts a color value, such as background-color, color, or border-color.

What does H=0, W=100, B=0 produce?

Pure white: rgba(255, 255, 255, 1). H=0, W=0, B=100 produces pure black: rgba(0, 0, 0, 1). H=0, W=0, B=0 produces pure red: rgba(255, 0, 0, 1).

HWB to RGBA Converter

Name: HWB to RGBA Converter
Availability: InStock
Author: Nham Vu

Enter HWB values and instantly get the equivalent RGBA values with a live color preview swatch.

HWB Input

Hue (deg) 0 – 360

Whiteness (%) 0 – 100

Blackness (%) 0 – 100

Alpha 0 – 1

RGBA Output

rgba(46, 173, 214, 1)

Red

Green

Blue

Alpha

W + B Mix 0%

White Black

Copied!

Summary

Enter HWB values and instantly get the equivalent RGBA values with a live color preview swatch.

How it works

Enter a Hue value between 0 and 360 degrees.
Set Whiteness and Blackness percentages (each 0–100). They are automatically normalized if they sum over 100.
Adjust the Alpha slider (0–1) to control transparency.
The RGBA values and live color preview swatch update instantly.
Click any Copy button to copy individual channel values or the full rgba() string.

Use cases

Convert HWB color values from CSS Color Level 4 specs into CSS rgba() strings.
Translate designer-friendly HWB colors into values usable in older browsers.
Inspect how whiteness and blackness adjustments affect the final RGBA output.
Add alpha transparency to a color originally defined in HWB notation.
Cross-reference HWB palette entries with RGBA equivalents for design systems.
Quickly obtain rgba() strings for use in canvas, SVG, or design tools.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu