Converting Named Colors to HWB
To find the HWB (Hue, Whiteness, Blackness) equivalent of a CSS color keyword, enter the name into the converter above. The tool maps the keyword to its underlying RGB values, then calculates the exact percentages of white and black required to mix that specific shade.
Building Monochromatic Themes
Converting a named color to HWB is a highly effective way to build a monochromatic design system. Let's say you want to base your website's theme around the CSS color royalblue.
By converting royalblue to HWB, you get hwb(225deg 25% 11%). You now have a base hue of 225 degrees. To create a very light background color for your website that perfectly matches your brand, you keep the hue at 225, drop the blackness to 0%, and push the whiteness up to 95%.
This approach guarantees that all the tints and shades in your CSS share the exact same color DNA as the original named keyword.