Hex to HSL color converter online
Hex to HSL/HSLA: short hex and alpha supported, live color preview.
HSL separates hue, saturation, and lightness — tweaking “a bit darker” is often easier than editing hex nibbles.
Eight-digit hex with alpha maps to hsla; opaque colors output hsl.
Minor differences vs. design apps can happen across color spaces — trust the preview swatch.
How to convert
- Enter hex
- Check HSL output and swatch
- Copy into CSS
What HSL is useful for
- Build lighter/darker variants in CSS variables.
- Align code with hex from design handoff.
- Instant preview cuts trial and error.
Scenarios
- Brand hex → hsl custom property
- Button hover via lightness shift
- Inspect alpha in an 8-digit hex
Tips
- Hash `#` optional on input.
- Short `#abc` expands to `#aabbcc`.
- Copy hsl vs. hsla depending on alpha need.
Examples
| Input | Output | Note |
|---|---|---|
| #FF5733 | hsl(...) | Opaque |
| #FF573380 | hsla(...) | Semi-transparent |
Hex to HSL FAQ
- Relation to RGB converter?
- Site also has hex↔RGB. HSL is often nicer for perceptual light/dark tweaks.
- Mismatch vs. Figma?
- Rounding and gamut differ — judge on your target browser.