HEX to HSL Color Converter
FreeConvert HEX color codes to HSL (Hue, Saturation, Lightness). Enter #3B82F6, get hsl(217, 91%, 60%). Free, browser-based.
What's next
Settings guide
HSL value ranges:
| Property | Range | Meaning |
|---|---|---|
| Hue (H) | 0–360° | Color angle on the wheel: 0=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=magenta |
| Saturation (S) | 0–100% | 0% = gray, 100% = fully vivid |
| Lightness (L) | 0–100% | 0% = black, 50% = full color, 100% = white |
Practical HSL adjustments:
- ·Darken a color: Keep H and S, decrease L by 10–15%.
- ·Lighten a color: Keep H and S, increase L by 10–15%.
- ·Desaturate (mute): Keep H and L, decrease S to 20–40%.
- ·Create a tint: Increase L toward 90%, slightly decrease S.
CSS syntax options:
- ·Legacy:
hsl(217, 91%, 60%) - ·Modern (CSS Color Level 4):
hsl(217 91% 60%) - ·With alpha:
hsl(217 91% 60% / 0.5)
Format comparison
HSL vs HEX: HEX is compact and copy-paste friendly from design tools. HSL is human-readable and manipulable. Use HEX for final output; use HSL when you need to programmatically create lighter/darker variants.
HSL vs RGB: RGB defines color in terms of screen phosphors. HSL defines it in terms of human perception. Adjusting the blue channel in RGB has a different visual impact than adjusting the red channel. In HSL, adjusting H by 10° always means the same perceptual shift regardless of which color you start from.
HSL vs OKLCH: OKLCH (CSS Color Level 4) is perceptually uniform — equal L steps look equal to the human eye across all hues. HSL is not: a yellow at L=50% looks much lighter than a blue at L=50%. For precision design systems, OKLCH is better. For broad CSS compatibility and quick adjustments, HSL is the practical choice.
How it works
Enter HEX
Paste your HEX code — 3-digit, 6-digit, or 8-digit with alpha.
Convert
The HEX is converted to RGB first, then the RGB values are transformed to HSL via the standard algorithm.
Copy
Copy the HSL value as a CSS hsl() function, or copy H, S, L values individually.
About this format
HSL (Hue, Saturation, Lightness) is how designers think about color, while HEX is how browsers store it. Converting from HEX to HSL unlocks the most intuitive way to manipulate color in CSS: you can make a color lighter by increasing L, more muted by decreasing S, or shift it toward orange by adjusting H — without recalculating three separate channel values.
HEX codes like #3B82F6 (Tailwind's blue-500) are opaque strings. HSL equivalents like hsl(217, 91%, 60%) communicate intent: this is a moderately saturated blue at 60% lightness. When building design systems, theming, or dark-mode palettes, HSL makes the relationship between colors explicit and predictable.
CSS has supported HSL since CSS3. Modern CSS accepts both `hsl(217, 91%, 60%)` and the newer space-separated syntax `hsl(217 91% 60%)`. HSL also supports transparency via `hsla(217, 91%, 60%, 0.5)` or the modern `hsl(217 91% 60% / 0.5)` syntax.