Convert HWB to HSL
Convert HWB values like hwb(188 13% 7%) into CSS hsl(188, 86%, 53%)—fast, private, and right in your browser.
- Paste a single HWB color or a whole palette
- Use one color per line for batch conversion
- Copy your HSL results instantly
Quick start
- Paste your HWB color(s) into the input.
- Use one color per line.
- Copy the HSL results.
Single color
Input:
hwb(188 13% 7%)Output:
hsl(188, 86%, 53%)Palette / batch conversion
Input:
hwb(340 0% 0%)
hwb(188 13% 7%)
hwb(221 7% 85%)Output:
hsl(340, 100%, 50%)
hsl(188, 86%, 53%)
hsl(221, 39%, 11%)Small rounding differences are normal. Hue is typically rounded to whole degrees and percentages to whole numbers.
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).
Because it’s basically “add white / add black,” HWB can be a very intuitive way to tweak colors.
What HSL means (Hue, Saturation, Lightness)
HSL describes color using:
- Hue (H): color family around the wheel (0–360°)
- Saturation (S): vividness (0% gray → 100% vivid)
- Lightness (L): light/dark (0% black → 100% white)
HSL is popular because it’s the classic “designer-friendly” model:
- keep Hue stable and adjust Lightness for a scale
- desaturate for muted UI states
- rotate Hue to explore different palettes
How HWB → HSL conversion works
Conceptually, the converter does this for each line:
- Interpret HWB (Hue + Whiteness + Blackness)
- Convert to an internal RGB representation (screen color)
- Convert that RGB into HSL:
- Hue (degrees)
- Saturation (%)
- Lightness (%)
Practical takeaway:
- HWB is great for tint/shade intuition
- HSL is great for designing palettes and UI scales
Common mistakes (and quick fixes)
Extra spaces at the start/end of a line
Leading and trailing spaces are ignored.
✅ hwb(188 13% 7%)
🚫 hwb(188 13% 7%)
Missing % signs for W and B
Whiteness and Blackness are percentages:
✅ hwb(221 7% 85%)
🚫 hwb(221 7 85)
Hue outside 0–360
Keep Hue within a normal degree range:
✅ hwb(340 0% 0%)
🚫 hwb(420 0% 0%)
W + B too large
In HWB, Whiteness + Blackness should not exceed 100% for a normal color.
✅ hwb(188 13% 7%)
🚫 hwb(188 70% 50%)
If W + B is over 100%, many systems clamp/normalize the values, which can produce unexpected results.
Practical uses
- Convert HWB tweaks into HSL for CSS themes
- Design in HSL after tint/shade exploration in HWB
- Build UI scales using Lightness once you’ve picked the right hue
- Document palettes in a familiar CSS-friendly format
If you like exploring colors with “more white / more black,” HWB is a great starting point—then HSL gives you classic controls for saturation and lightness in CSS.
