CSS HWB Color Generator - Online Whiteness/Blackness Picker

HWB stands for Hue, Whiteness, Blackness. It's an intuitive color model introduced in CSS Color Level 4. Instead of mixing red, green, and blue, you pick a hue (the base color on the color wheel), then add white and/or black to lighten or darken it. It's often more natural for designers—similar to how artists mix paint: start with a pure pigment, then add white or black.

While HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) use saturation as a dimension, HWB replaces saturation with whiteness and blackness. This makes it easier to reason about: "I want this blue but lighter" just means increasing whiteness. In HSL, you'd need to adjust both saturation and lightness, which can be less intuitive. HWB is especially friendly for generating monochromatic palettes and tints/shades.

HWB is supported in all modern browsers: Chrome 101+, Firefox 96+, Safari 15+, and Edge 101+. As of 2025, global support exceeds 94%. For older browsers, always provide a fallback using RGB or HEX, which this tool generates automatically.

When w + b > 100%, the HWB model normalizes the values proportionally so they sum to exactly 100%. This means the "pure hue" component becomes zero, and the resulting color is a gray tone somewhere between white and black. The hue no longer affects the output—it's effectively achromatic. Our 2D panel visualizes this: the upper-right triangle (above the diagonal) represents this gray zone.

HWB excels when you need to quickly create variations of a color. Want a pastel version? Increase whiteness. Need a deeper shade? Increase blackness. It's perfect for design systems, theme generation, and accessibility adjustments. Since it maps closely to how humans think about color mixing, many designers find it more intuitive than RGB or HSL for everyday color tweaking.

The conversion involves three steps: (1) Normalize w and b so their sum ≤ 1. (2) Get the pure hue RGB from HSL(h, 100%, 50%). (3) Mix: R = w + (1-w-b) × R_hue (same for G and B). If w+b > 1, the hue component disappears and you get a gray. This tool performs all conversions in real-time and provides both HWB and RGB/HEX outputs.