Hex to HSL color converter
Convert a hex color (#ff8800) to HSL (hsl(32, 100%, 50%)). HSL is what designers reach for when they want to tweak saturation or lightness while keeping the hue.
# conversion
| format | foreground | background |
|---|---|---|
| hex | #ff8800 | #ffffff |
| rgb | rgb(255, 136, 0) | rgb(255, 255, 255) |
| hsl | hsl(32, 100%, 50%) | hsl(0, 0%, 100%) |
# context
HSL (Hue, Saturation, Lightness) is more intuitive for adjustments than hex or RGB. Hex → HSL goes through RGB first: convert to RGB, then compute hue from the dominant channel, saturation from the range, lightness from the midpoint.
→ Open in color picker (pre-filled)
# notes
- Hue is 0-360 (degrees on the color wheel). Saturation and Lightness are 0-100%.
- Pure red is hsl(0, 100%, 50%). Pure white is hsl(0, 0%, 100%). Pure black is hsl(0, 0%, 0%).
- For "make this color 10% darker", change lightness (50% → 40%). HSL makes this intuitive in a way hex/RGB do not.