HEX to HSL Converter
Turn a HEX color code into hue, saturation and lightness, the notation that makes color variants easy.
Convert HEX Colors to HSL
HEX codes are compact but hard to reason about: nobody can tell by looking at #0A84FF how to make it 10 percent darker. HSL describes the same color the way people think about it, so a hover state, a disabled state or a dark-mode variant becomes a change to a single number.
This page opens the Color Converter with HEX input selected and an example loaded.
Reading an HSL value
| Part | Range | In hsl(210, 100%, 52%) |
|---|---|---|
| Hue | 0–360° | 210°: a blue between cyan (180°) and pure blue (240°) |
| Saturation | 0–100% | 100%: as vivid as possible, no grey mixed in |
| Lightness | 0–100% | 52%: just above the midpoint between black and white |
How HEX becomes HSL
The converter first turns the HEX code into RGB, then scales each channel to 0–1. Lightness is the average of the largest and smallest channel. Saturation depends on how far apart those two are, relative to lightness. Hue comes from which channel is largest and how the other two compare. For #0A84FF the result is 210.1°, 100% and 51.96%, rounded to hsl(210, 100%, 52%).
Building variants with HSL
- Hover or pressed state: lower lightness by 5 to 10 points.
- Disabled state: lower saturation and raise lightness.
- Tints for backgrounds: keep hue and saturation, set lightness to 90–97%.
- Dark mode: raise lightness so the color stays readable on dark surfaces.
The Palette tab automates this with an eleven-step scale from 50 to 950, and the harmonies below it rotate the hue to find complementary and analogous colors.
Perceptual caveat
HSL lightness is not perceived lightness: a yellow and a blue at 50% look very different in brightness. When contrast matters, test the actual pair in the Color Contrast Checker or use the OKLCH value the converter also shows. For plain channel values, see HEX to RGB.