HEX to HSL Converter
Paste a HEX value and get the exact HSL equivalent instantly — plus every other color format, a gamut check and one-click copy.
Gamut: srgb
Common HEX → HSL values
| Vivid Indigo | #6366f1 | hsl(238.7 83.5% 66.7%) | Details |
| Vivid Red | #ef4444 | hsl(0 84.2% 60.2%) | Details |
| Orange | #f97316 | hsl(24.6 95% 53.1%) | Details |
| Light Yellow | #eab308 | hsl(45.4 93.4% 47.5%) | Details |
| Vivid Green | #22c55e | hsl(142.1 70.6% 45.3%) | Details |
| Teal | #14b8a6 | hsl(173.4 80.4% 40%) | Details |
| Sky Blue | #0ea5e9 | hsl(198.6 88.7% 48.4%) | Details |
| Blue | #3b82f6 | hsl(217.2 91.2% 59.8%) | Details |
| Vivid Violet | #8b5cf6 | hsl(258.3 89.5% 66.3%) | Details |
| Vivid Pink | #ec4899 | hsl(330.4 81.2% 60.4%) | Details |
| Medium Gray | #78716c | hsl(25 5.3% 44.7%) | Details |
| Black | #000000 | hsl(0 0% 0%) | Details |
Reading an HSL value
hsl(239 84% 67%) means hue 239° on the color wheel, 84% saturation and 67% lightness. Hue 0 is red, 120 green and 240 blue.
Where HSL breaks down
Because lightness is computed from RGB extremes rather than perception, a fixed lightness step produces very different visual jumps across hues. That is why HSL-based scales need constant hand-tuning.
The OKLCH upgrade
OKLCH keeps the same three-axis mental model — lightness, chroma, hue — but the lightness axis is perceptually uniform, so a ramp generated from it looks even on the first try.
Frequently asked questions
- How is HSL calculated from HEX?
- Convert the HEX to RGB in the 0–1 range, then take the max and min channels. Lightness is their average, saturation depends on their spread, and hue comes from which channel is largest.
- Why do two colors with the same HSL lightness look different?
- HSL lightness is a maths shortcut, not a perceptual measure. hsl(60 100% 50%) yellow looks far brighter than hsl(240 100% 50%) blue. Use OKLCH when lightness needs to be trustworthy.
- Is HSL good for theming?
- It is convenient because hue, saturation and lightness are separate, but ramps built on it drift in perceived brightness. OKLCH keeps the same authoring convenience without the drift.