HWB Color Picker - Online Whiteness & Blackness Model

HWB stands for Hue-Whiteness-Blackness, a cylindrical-coordinate color model introduced by Alvy Ray Smith in 1996. It describes colors by their hue angle (0–360°), the amount of white mixed in (0–100%), and the amount of black mixed in (0–100%). The key constraint is that W + B ≤ 100%. HWB is considered more intuitive than HSL or HSV because it mirrors how artists physically mix paint — adding white to tint or black to shade a pure hue.

While HSL uses Saturation and Lightness, and HSV uses Saturation and Value (Brightness), HWB uses Whiteness and Blackness directly. This makes HWB much more intuitive: you start with a pure hue, then add white to lighten it or black to darken it. In HSL, adjusting lightness affects both white and black content simultaneously, which can be less predictable. HWB separates these two mixing operations cleanly.

When W + B exceeds 100%, the color becomes physically meaningless — you'd be adding more white and black than the total color can contain. In standard HWB, if W + B > 100%, the values are typically normalized proportionally so that W + B = 100%. The resulting color lies on the grayscale diagonal between pure white and pure black. Our tool automatically handles this normalization for you.

Yes! CSS Color Level 4 introduced the hwb() function. You can write color: hwb(210 20% 30%); in modern browsers (Chrome 101+, Firefox 96+, Safari 15.4+). This means HWB can be used directly in your stylesheets without manual conversion. Our tool generates ready-to-use hwb() CSS syntax for you.

The conversion works in two steps: First, the hue angle is converted to a fully-saturated RGB color (like HSL with S=100%, L=50%). Then, the RGB values are blended with white and black: Result = saturatedRGB × (1−W−B) + White × W + Black × B. Since white is (1,1,1) and black is (0,0,0) in normalized RGB, the formula simplifies. Our tool performs all conversions in real-time and displays HEX, RGB, HSL, and HWB formats simultaneously.

HWB is particularly advantageous for designers and artists because it matches the natural mental model of color mixing. It's excellent for generating tints (add white), shades (add black), and tones (add both). The model also makes it trivial to find grayscale equivalents — any color where W + B = 100% is a pure gray. This intuitive approach reduces the guesswork in color palette creation.

Start by selecting a hue using the rainbow slider at the top. Then, use the triangular 2D panel to visually explore whiteness and blackness combinations. The diagonal edge of the triangle represents pure grays. Click and drag within the triangle to see real-time color changes. You can also fine-tune values using the W and B sliders or number inputs. Paste any HEX code to load an existing color and see its HWB breakdown. Click the copy buttons to grab any format for your project.

In the HWB model, when W + B = 100%, the resulting color is always a neutral gray. The shade of gray is determined by the ratio of W to B: more white yields lighter grays, more black yields darker grays. When W + B < 100%, the color retains chromaticity from the hue. This makes HWB uniquely suited for understanding and controlling color saturation in an intuitive way.