HWB stands for Hue, Whiteness, and Blackness. It describes a color by its position on the color wheel (hue, 0-360°) plus how much white (0-100%) and black (0-100%) are mixed in. It was designed to be more intuitive than HSL for choosing tints and shades.

How is HWB different from HSL?

HSL uses saturation and lightness, which can be harder to reason about. HWB replaces those with whiteness and blackness — more natural concepts. For example, a pastel is a hue with high whiteness; a dark shade is a hue with high blackness.

Does alpha affect the HWB conversion?

Alpha does not affect hue, whiteness, or blackness — those depend only on the R, G, B channels. Alpha is carried over separately into the hwba() CSS string output.

Can I use the output directly in CSS?

Yes. Modern browsers support the hwb() function from CSS Color Level 4. You can paste hwb(210, 20%, 5%) or hwba(210, 20%, 5%, 0.8) directly into a stylesheet.

What if whiteness + blackness exceeds 100%?

When W + B > 100%, the color is normalized by the browser to a neutral gray. This tool computes the mathematically correct values; the browser handles the normalization at render time.

RGBA to HWB Converter

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

RGBA Input

Red (0 – 255)

Green (0 – 255)

Blue (0 – 255)

Alpha (0 – 1)

Color Preview

rgba(99, 149, 237, 1)

HWB Output

Hue

218°

Whiteness

39%

Blackness

CSS hwb()

hwb(218 39% 7%)

CSS hwb() with alpha

hwb(218 39% 7% / 1)

Summary

This tool converts RGBA color values — red, green, blue (each 0-255) and alpha (0-1) — into their HWB equivalents: hue (0-360°), whiteness (0-100%), and blackness (0-100%). HWB is a CSS Color Level 4 format designed to be intuitive: mix a pure hue with white and black. Conversion runs entirely in your browser with a live swatch updating in real time.

How it works

Enter the Red value (0 to 255) in the R field.
Enter the Green value (0 to 255) in the G field.
Enter the Blue value (0 to 255) in the B field.
Enter the Alpha value (0 to 1) in the A field.
The HWB output and color preview update instantly.
Click any Copy button to copy the individual value or the full CSS string.

Use cases

Convert design-tool RGBA colors into CSS HWB variables for modern stylesheets.
Create lighter or darker tints by adjusting whiteness and blackness.
Understand the white and black content of any color at a glance.
Translate colors from image editors into CSS Color Level 4 HWB format.
Compare hue relationships between colors in a more intuitive color model.
Generate hwb() and hwba() CSS strings directly from RGBA inputs.

Frequently Asked Questions

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