Skip to content
ToolQivo

HWB Color Converter

Convert to and from HWB, the hue-whiteness-blackness notation.

Color Tools Reviews Free · no sign-up

HWB

CSS 
The hwb() value appears here

Quick Tool Overview

The HWB Color Converter moves between HWB — hue plus how much white and black are mixed in — and the usual notations, with sliders for all three components and the greying rule that catches people out made visible.

What it does
Converts HWB to HEX, RGB and HSL and back
You give it
Hue, whiteness and blackness, or any colour
You get back
Every notation, live, with a preview
Best for
Building tints, shades and tones of one hue
Color Tools Free, unlimited use No sign-up Runs in your browser

About the HWB Color Converter

HWB describes a colour the way someone mixing paint would: start with a pure hue, then say how much white and how much black you have stirred into it. It has been valid CSS since Color 4 and is supported everywhere, but it is still the least used of the notations.

It is worth knowing because it maps onto an intuition that HSL does not. Tints, shades and tones are exactly what the two numbers control: raise whiteness for a tint, raise blackness for a shade, raise both for a muted tone. Doing the same in HSL means moving saturation and lightness together in a way that is not obvious.

The converter runs both ways with sliders for all three components, and shows what happens when whiteness and blackness add up to more than 100% — the hue drops out entirely and you get a grey in proportion to the two, which is a rule people trip over.

Key features of the HWB Color Converter

Tints and shades directly

Raise whiteness for a tint, blackness for a shade, both for a tone — one number each, rather than moving two in HSL.

The greying rule shown

When whiteness and blackness exceed 100% the hue drops out entirely. The tool shows it happening rather than leaving you puzzled.

Both directions

Paste any colour to see its HWB components, or build one from the sliders.

Valid CSS today

hwb() works in every current browser, and the HEX conversion is here as the fallback.

Live preview

A large swatch, because three percentages tell you very little on their own.

How to use the HWB Color Converter

  1. 1

    Set hue, whiteness and blackness

    Drag the sliders, or paste an hwb() string.

  2. 2

    Read the conversions

    HEX, RGB and HSL are produced alongside, with a live swatch.

  3. 3

    Or convert back

    Paste a HEX or RGB colour and its HWB components are worked out.

  4. 4

    Try a tint or a shade

    Raise whiteness alone for a tint, blackness alone for a shade, both for a tone.

Frequently asked questions

The hue is ignored and the result is a grey, mixed in the ratio of the two values. hwb(200 60% 60%) is exactly the same grey as hwb(20 60% 60%).

Reviews of the HWB Color Converter

What people who use the HWB Color Converter think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the HWB Color Converter. It takes half a minute and no account.

Write the first review

More color tools