HSL to HWB Converter

Summary

Enter HSL values and instantly get the equivalent HWB (Hue, Whiteness, Blackness) color with a live preview and one-click copy.

How it works

1. Enter the Hue (0–360), Saturation (0–100), and Lightness (0–100) values in the HSL input fields.
2. The converter first derives the intermediate HSV Value: V = L/100 + (S/100)·min(L/100, 1−L/100). Then Whiteness W = (2·L/100 − V)·100 and Blackness B = (1 − V)·100. Hue is unchanged.
3. A live color swatch and picker update to show the exact color being converted.
4. Use the reverse HWB sliders to build a color from Whiteness and Blackness and see the HSL result update live.
5. Click Copy to grab the hwb() or hsl() string for use in your CSS.

Use cases

• Convert CSS hsl() values to the modern hwb() format supported in all current browsers.
• Understand how much white and black a color contains when designing accessible palettes.
• Translate design tokens from HSL-based design tools into HWB for CSS Color Level 4 projects.
• Explore how adjusting Whiteness and Blackness affects a hue compared to Lightness.
• Validate color transformations during UI or brand kit development.
• Cross-reference HSL and HWB representations of the same color for documentation.

Frequently Asked Questions