Color
HWB Color Calculator
Pick a color by hue, whiteness, and blackness — with instant hex, RGB, and HSL conversion.
HWB Calculator
- HEX:#ff0000
- RGB:rgb(255, 0, 0)
- HSL:hsl(0, 100%, 50%)
About the HWB color calculator
This tool converts colors to and from HWB — Hue, Whiteness, Blackness — the CSS Color Module Level 4 color function. Type any CSS color into the text field (hex, rgb(), hsl(), hwb(), cmyk(), or a named color like rebeccapurple), or drag the three sliders, and the preview swatch plus the hex, rgb, and hsl readouts update immediately. Each readout has a Copy button that puts that exact string on your clipboard, ready to paste into CSS or code. Everything runs client-side in your browser — nothing you type is sent to a server.
Hue uses the same 0–360 wheel as HSL — the code literally computes HWB's hue by calling the HSL formula. Whiteness is min(r, g, b) and blackness is 1 - max(r, g, b), each expressed as a percentage of the 0–255 channel range: the smallest channel is how much white is mixed in, and the largest channel's shortfall from full brightness is how much black is mixed in. Converting back to RGB, if whiteness and blackness add up to over 100%, both get scaled down proportionally until they sum to exactly 100% — the normalization the CSS spec itself requires.
HWB isn't just an HSL rewording — whiteness and blackness map directly to how much white or black you'd mix into a pure hue, which is often a more direct way to reason about tints and shades than adjusting HSL's lightness. Reach for this tool when a design spec hands you an hwb() value and your code needs hex or rgb() instead (or vice versa), when you want to nudge a color lighter or darker by whiteness/blackness rather than lightness, or when you just want to see a color's hex, RGB, and HSL equivalents side by side while you experiment.
Examples
Input #3b82f6
hex #3b82f6
rgb rgb(59, 130, 246)
hsl hsl(217, 91%, 60%)
hwb hwb(217, 23%, 4%)Whiteness (23%) comes from the smallest channel — red at 59; blackness (4%) comes from how far the largest channel — blue at 246 — falls short of 255.
function rgbToWB(r, g, b) {
const w = Math.min(r, g, b) / 255;
const blk = 1 - Math.max(r, g, b) / 255;
return { w: Math.round(w * 100), b: Math.round(blk * 100) };
}
rgbToWB(59, 130, 246); // { w: 23, b: 4 } — hue (217) comes from the HSL formulaThis matches the tool's rgbToHwb exactly; hue is computed separately with the standard RGB-to-HSL hue formula, which HWB reuses unchanged.
Input hwb(0, 60%, 60%) (60 + 60 = 120%, over budget)
Normalized to w=50%, b=50% (each scaled by 100/120)
rgb rgb(128, 128, 128)
hex #808080Once whiteness + blackness hit 100%, hue stops mattering entirely — every hue collapses to the exact same gray.
Frequently asked questions
What is HWB color format?
HWB stands for Hue, Whiteness, Blackness — a CSS Color Module Level 4 function that describes a color as a hue (0–360°) plus a percentage of white and a percentage of black mixed into it. For example, hwb(217, 23%, 4%) is a blue hue with 23% white and 4% black mixed in.
What's the difference between HWB and HSL?
They share the exact same hue value — this tool computes HWB's hue by running the standard RGB-to-HSL hue formula. They differ in the other two channels: HSL uses saturation and lightness, while HWB uses whiteness and blackness, which map more directly onto how much white or black paint you'd mix into the pure hue.
Why did the whiteness and blackness values change from what I typed?
If whiteness and blackness add up to more than 100%, the tool scales both down proportionally until they sum to exactly 100% — that's the normalization the CSS Color 4 spec requires, not a bug. Once whiteness plus blackness reaches 100%, hue stops mattering: every hue produces the same shade of gray.
Why doesn't converting a hex color to HWB and back give the exact same hex?
Hue, whiteness, and blackness are each rounded to a whole number at every conversion step, and RGB channels are rounded to whole integers too. Chaining conversions can shift a channel by 1 — for example #3b82f6 becomes hwb(217, 23%, 4%), which converts back to #3b82f5. That's ordinary rounding error, not a bug.
What color formats can I type into the input box?
Hex (#rgb or #rrggbb), rgb()/rgba(), hsl()/hsla(), hwb(), cmyk(), or a CSS named color such as tomato — the tool detects whichever format you type and converts it to HWB. Anything it can't parse shows a "Wrong Color" error until you fix it.