Convert HSL to HWB
Convert CSS hsl(...) colors into HWB values like hwb(188 13% 7%)—fast, private, and right in your browser.
- Paste a single HSL color or a whole palette
- Use one color per line for batch conversion
- Copy your HWB results instantly
Quick start
- Paste your HSL color(s) into the input.
- Use one color per line.
- Copy the HWB results.
Single color
Input:
hsl(188, 86%, 53%)Output:
hwb(188 13% 7%)Palette / batch conversion
Input:
hsl(340, 100%, 50%)
hsl(188, 86%, 53%)
hsl(221, 39%, 11%)Output:
hwb(340 0% 0%)
hwb(188 13% 7%)
hwb(221 7% 85%)Small rounding differences are normal. Hue is typically rounded to whole degrees and percentages to whole numbers.
What HSL means (Hue, Saturation, Lightness)
HSL describes a color using three values:
- Hue (H): the “color family” around a color wheel (0–360°)
- 0° = red, 120° = green, 240° = blue
- Saturation (S): how vivid the color is (0% gray → 100% vivid)
- Lightness (L): how light/dark it is (0% black → 100% white)
HSL is popular because it’s easy to design with:
- keep Hue stable and adjust Lightness for a scale
- desaturate a color for muted UI states
- rotate Hue to explore different color families
What HWB means (Hue, Whiteness, Blackness)
HWB represents color using:
- Hue (H): the base color around a wheel (0–360°)
- Whiteness (W): how much white is mixed in (0–100%)
- Blackness (B): how much black is mixed in (0–100%)
A simple mental model:
- Hue chooses the “base” color.
- Increase Whiteness to make a tint (lighter).
- Increase Blackness to make a shade (darker).
Some people find HWB more intuitive than HSL when creating tints/shades because it matches the idea of “add white / add black.”
When HWB is useful
HWB is great when you want predictable tweaks:
- lighter → increase Whiteness
- darker → increase Blackness
- keep identity → keep Hue stable
That makes it handy for:
- hover/active/disabled UI states
- quick tint/shade generation
- documentation that explains palettes clearly
How HSL → HWB conversion works
Conceptually, the converter does this for each line:
- Interpret the HSL color (Hue + Saturation + Lightness)
- Convert to an internal RGB representation (screen color)
- Compute HWB:
- Hue (degrees)
- Whiteness = “how close to white”
- Blackness = “how close to black”
Practical takeaway:
- HSL is a strong “design/edit” format
- HWB is a strong “tint/shade” format
Common mistakes (and quick fixes)
Extra spaces at the start/end of a line
Leading and trailing spaces are ignored.
✅ hsl(340, 100%, 50%)
🚫 hsl(340, 100%, 50%)
Missing % signs for S and L
Saturation and Lightness are percentages:
✅ hsl(221, 39%, 11%)
🚫 hsl(221, 39, 11)
Hue outside 0–360
Keep Hue within a normal degree range:
✅ hsl(340, 100%, 50%)
🚫 hsl(420, 100%, 50%)
Practical uses
- Convert HSL palettes into HWB for tint/shade workflows
- Create UI states by adjusting Whiteness/Blackness instead of juggling HSL sliders
- Generate consistent scales while keeping Hue stable
- Explain colors in docs with simple “more white / more black” intuition
If you like designing in HSL but tweaking tints/shades in a more direct way, HSL → HWB is a great bridge.
