Convert HEX codes to HWB with live, two-way sliders.
HWB describes a color the way a painter mixes one: start from a pure Hue, then add Whiteness and Blackness. hwb(217 4% 4%) is a vivid blue with a whisper of white and black mixed in; push W up and you get pastels, push B up and you get deep shades. It's arguably the most human-friendly of all the CSS color functions, and this converter turns any HEX code into its exact hwb() equivalent — along with RGB, HSL, HSB, OKLCH, LCH, LAB and CMYK.
HWB shares its hue wheel with HSL and HSB, so the H you see here matches those formats exactly — only the mixing model differs. Everything computes live in your browser as you type or drag, with nothing uploaded.
hwb() string heads the results, ready to paste into CSS.Need the reverse? Use the HWB to HEX converter, compare with HEX to HSB, or browse all our free color tools.
HWB stands for Hue, Whiteness, Blackness. It describes a color as a pure hue with white and black mixed in, mirroring how painters lighten and darken pigments. It became a native CSS function, hwb(), in all major browsers during 2022.
They share the same hue wheel, but HSL positions a color by saturation and lightness while HWB says how much white and how much black are mixed into the pure hue. hwb(0 40% 0%) is a pink (red plus white); the equivalent HSL needs less obvious numbers.
The color becomes a pure gray determined by the ratio of white to black, and the hue stops mattering. The CSS specification normalizes the two values, and this converter does the same.
Yes. HWB, like HSL and HSB, is a direct transformation of RGB, so every HEX code has one exact HWB equivalent and converting back lands on the identical color.
Completely. The conversion runs entirely in your browser with JavaScript, nothing you enter is uploaded or logged, and the page keeps working offline once loaded.