HSL to HWB Converter

Summary

This tool converts colors from the HSL (Hue, Saturation, Lightness) model — the format used in CSS hsl() — to HWB (Hue, Whiteness, Blackness), the newer CSS hwb() format introduced in CSS Color Level 4. Enter any HSL triplet and get the corresponding HWB values with a live color swatch. A reverse panel lets you build a color from HWB sliders and read the HSL result.

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