Convert HEX to HSL
Convert HEX color codes to HSL (hue, saturation, lightness) format. Easier to create color variations. Free online converter.
Formula: HEX → RGB → HSL (hue 0-360°, saturation 0-100%, lightness 0-100%)
Quick example: #2563EB → hsl(217, 82%, 53%)
Color Preview
#2563EB
Color Values
#
HEXR
RGBH
HSLC
CMYK84%, 58%, 0%, 8%A
Alpha100%
T
Tailwindblue-600#2563ebclose matchWCAG Contrast Checker
Foreground
#2563ebBackground
#ffffffContrast Ratio
5.17:1
Sample Text Preview
AA Large: PassAA Normal: PassAAA: Fail
Analogous Palette
About This Conversion
HSL (Hue, Saturation, Lightness) is the most intuitive color model for humans. Unlike HEX or RGB where adjusting a single channel changes the perceived color unpredictably, HSL lets you independently control the color type (hue), its vibrancy (saturation), and brightness (lightness). This makes HSL ideal for generating color palettes, creating hover states (increase lightness by 10%), and building design systems. Converting from HEX to HSL requires an intermediate RGB step, then mathematical transformation to the cylindrical HSL model.
Frequently Asked Questions
Why use HSL instead of HEX?
HSL is more intuitive for humans. Want a lighter shade? Increase lightness. Want a muted version? Decrease saturation. With HEX/RGB, achieving the same effect requires adjusting multiple values.
How do I create lighter or darker shades in HSL?
Keep hue and saturation the same, and adjust the lightness value. Lightness 50% is the pure color, higher values are lighter, lower values are darker.
Is HSL supported in all browsers?
Yes. HSL has been supported in all major browsers since IE9. Modern CSS also supports hsl() with optional alpha: hsl(217 82% 53% / 0.8).