Super Boring Tools

Search tools

Find a tool by name or what it does.

HWB Color Converter

Convert HEX, RGB, or HWB colors to the CSS hwb() format with live sliders and a swatch.

HEX, RGB, or HWB, or pick a color. Everything runs in your browser. Nothing is uploaded.

Adjust

Formats

HWBhwb(238.7 38.8% 5.5%)
HEX#6366f1
RGBrgb(99, 102, 241)
HSLhsl(239, 84%, 67%)

How to convert a color to HWB online

  1. Enter a color

    Paste a HEX, RGB, or HWB value into the field, or pick one with the color swatch.

  2. Adjust the sliders

    Drag the hue, whiteness, and blackness sliders to refine the color and watch every format update live.

  3. Copy the result

    Copy a single format with its row button, or copy all four formats at once with the main button.

Why use this tool

Three notations in, four formats out

Accepts HEX (3, 4, 6, or 8 digits), rgb() and rgba(), or hwb() input and reports hwb(), HEX, RGB, and HSL together.

Live HWB sliders

Hue, whiteness, and blackness sliders re-run the conversion instantly, so you can tune a color instead of retyping it.

Follows the CSS Color 4 rules

When whiteness plus blackness reaches 100% the color collapses to grey, and the tool flags it so the output is never a surprise.

Transparency carried through

Alpha from 8-digit HEX, rgba(), or hwb() with a slash is preserved in every output format and shown over a checker swatch.

Runs entirely in your browser

Everything happens on your device; no color value is ever uploaded or stored.

About this tool

HWB describes a color the way a painter mixes one: start from a pure hue on the color wheel, then add whiteness to tint it and blackness to shade it. It is part of the CSS Color 4 specification and works in every modern browser, which makes it a practical alternative to HSL when you want to lighten or darken a color without reasoning about saturation. This converter reads a HEX, RGB, or HWB value and reports the same color as hwb(), HEX, RGB, and HSL at once.

Paste any common notation: 3, 4, 6, or 8 digit HEX with or without the hash, rgb() or rgba() with numbers or percentages, or an existing hwb() string. The hue, whiteness, and blackness sliders update the result instantly, so you can nudge a value and watch every format follow. Alpha is carried through whenever the input has one. When whiteness and blackness add up to 100% or more, the hue no longer matters and the color collapses to grey, exactly as the CSS specification defines; the tool shows a note when that happens so you know why the swatch looks neutral.

Each format row copies with one click, and the main button copies all four formats together. For other CSS color spaces, try the HEX to OKLCH converter, convert HSL to RGB, or read a color as HSV values.

Frequently asked questions

What is the HWB color format?
HWB stands for hue, whiteness, blackness. It picks a pure hue from the color wheel (0 to 360 degrees), then mixes in a percentage of white and a percentage of black. It is written in CSS as hwb(hue whiteness% blackness%) and is supported by all modern browsers.
How does the conversion work?
For RGB or HEX input, hue is derived from the strongest and weakest color channels, whiteness is the weakest channel as a percentage, and blackness is how far the strongest channel falls short of full. Going the other way, the pure hue is blended toward white and black by the two percentages.
Which input formats are accepted?
HEX in 3, 4, 6, or 8 digit form with or without a leading hash, rgb() and rgba() with numbers or percentages and comma or space separators, and hwb() strings including an optional alpha after a slash.
What happens when whiteness plus blackness passes 100%?
The color collapses to a grey and the hue stops mattering, per the CSS Color 4 specification. The two percentages are scaled down proportionally, and the tool shows a note so the grey swatch is not a surprise.
Does it handle transparency?
Yes. Alpha from an 8-digit HEX code, an rgba() value, or an hwb() value with a slash is preserved and shown in all four output formats, and the swatch renders it over a checker pattern.
Is my color uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server.

Related tools