HWB describes a color as a mixing recipe: a hue angle on the color wheel, a whiteness percentage saying how much white is folded in, and a blackness percentage saying how much black. With both at zero you get the pure hue at full strength, and every other value of the hue comes from stirring white or black into it. It is part of CSS Color 4, written hwb(330 55% 13%), and it is the notation closest to how painters actually mix color.

How is HWB different from HSL?

They share the same hue wheel, so the first number means the same thing in both. The other two dials differ. HSL steers a color with saturation and lightness, two abstract axes you adjust until it looks right. HWB steers it with the amount of white and the amount of black mixed into the pure hue, which maps straight onto the old painter vocabulary: white only makes a tint, black only makes a shade, both together make a tone. The same color can always be written both ways; they are two recipes for one result.

What happens when whiteness and blackness add up to 100 or more?

The hue runs out of room. Whiteness and blackness each claim a share of the mix, and once the two shares fill it completely there is nothing left for the hue to color. CSS resolves the overflow by scaling the two values down to fit, and the result is the neutral grey given by whiteness divided by the sum of the two. So hwb(330 80% 60%) is the same mid grey you would get at any other hue angle, because the 330 never gets a say.

Do browsers support hwb() in CSS?

Yes. The hwb() function is part of CSS Color 4 and has shipped in every major engine since early 2022, so any current browser reads it. The syntax separates the three values with spaces rather than commas, hwb(330 55% 13%), and an alpha channel goes after a slash, hwb(330 55% 13% / 0.5). If you need to reach further back than 2022 era browsers, serve the same color as hex or rgb() and keep hwb() as the readable source of truth.

HWB: Pick a Hue, Add White, Add Black

The color code hwb(330 55% 13%) is a set of mixing instructions. Take the hue that sits at 330 degrees on the color wheel, an electric rose pink. Stir in 55 percent white. Add 13 percent black. What comes out is sakura, the soft petal pink #DE8CB5, and unlike every other notation in CSS, you could have followed that recipe with actual paint: a cherry blossom is not a gentle pigment, it is a loud one drowned in white. Hex hides its meaning in base sixteen, HSL asks you to reason about saturation, but HWB just tells you what went into the jar: a hue, some white, some black.

What HWB Actually Is

HWB stands for hue, whiteness, blackness, and those are its three dials. The hue is the same angle HSL uses, one lap around the color wheel: 0 at red, 120 at green, 240 at blue, back to red at 360. Whiteness is how much white is folded into that hue, and blackness is how much black. Set both to zero and you get the pure hue at full strength, the loudest version of that color the screen can show. Everything else the hue can become is some mixture of it with white and black.

Run the sakura pink backwards and you can watch the recipe. Its pure hue at 330 degrees is #FF0080, a shocking rose with nothing mixed in, closer to a neon sign than to a flower. Fold in the 55 percent white and it lifts into a petal. Add the 13 percent black and it settles into #DE8CB5, the pink a cherry branch actually wears. Only a third of the mix is still the raw hue; the rest is mostly white doing what spring does.

Painters have named these moves for centuries, and HWB writes the names as numbers. White alone makes a tint, the pastel direction: hwb(330 40% 0%) is the bubble gum #FF66B3. Black alone makes a shade, the deep direction: hwb(330 0% 40%) is the raspberry #99004D. White and black together make a tone, the muted middle ground: hwb(330 30% 30%) is the dusty rose #B34D80. Every tint, shade and tone of a hue is just a different spot on those two dials.

The three sliders below are the whole model. The left swatch holds the pure hue; the right one is the mix. Drag the whiteness or the blackness and the mix pulls away from the pure hue while the pure hue stands still. Drag the hue and both move together, because you swapped the pigment in the jar.

Drag the whiteness or the blackness and the mix pulls away while the pure hue holds. Push the two past one hundred together and the hue vanishes into grey.

When White and Black Fill the Jar

The two percentages share one jar, and that gives HWB its one strange rule. Whiteness and blackness each take their share of the mix, and whatever room is left belongs to the hue. At 55 percent white and 13 percent black, about a third of the mix is still hue. At 50 and 50 there is no room left at all, and the hue, whichever one you picked, colors nothing. The result is plain grey.

Push past 100 and CSS scales the two values down to fit, keeping their proportions. So hwb(330 80% 60%) does not get pinker for the 330; the 80 and 60 are squeezed into 57 percent white and 43 percent black, and the color lands on the grey #929292. Every notation has an edge case; this is the only one you can explain with a full jar.

Reading Colors as Recipes

Once you can read the notation, colors start confessing how they were made. A pastel is a color with a big whiteness number and almost no black: the powder blue #B3D9FF reads as hwb(210 70% 0%), seventy percent white barely tinted by a blue hue. A deep, rich color is the reverse, blackness doing the work: the bottle green #0A4D33 carries almost seventy percent black. And the dusty, muted colors that interfaces lean on, the slates and sages and clays, all hold some of each, which is exactly what makes them read as calm.

That makes HWB a useful reading of a palette even when the palette was built in another notation entirely. A row of hover states that all share one hue with whiteness stepping up is a family; the odd one out shows its wrong number immediately. When a brand color needs a lighter hover or a darker pressed state, the HWB reading names the dial to turn: add white for one, add black for the other, and the hue never drifts.

An entire theme can live on one shelf of the recipe book. Codigrate's Sakura theme is a light editor theme built the way this post's pink was mixed: blossom hues carried almost all the way to white for the surfaces, with just enough black held back in the syntax colors to keep the code sharp. Soft on the eyes for exactly the reason a petal is.

Writing hwb() in CSS

The notation is part of CSS Color 4 and every current browser reads it. The three values sit inside hwb() separated by spaces, no commas: hwb(330 55% 13%). The hue takes no unit, the other two take percent signs, and an alpha channel goes after a slash, hwb(330 55% 13% / 0.5). Support arrived across all the major engines by early 2022, so unless you maintain something genuinely old, you can ship it as is; and if you do need the fallback, the same color as hex on the line above costs nothing.

Converting in and out is the easy part. The HEX to HWB converter reads any hex code as its recipe, the HWB to HEX converter mixes a recipe back into a hex code with the worked math on the page, and the color tool lists the HWB reading alongside every other notation for any color you give it.

The next time a color needs adjusting, try naming the change before touching a picker: more white, more black, or a different hue. That is the entire model, and it is usually the entire fix.