Hex to HSL Converter
Hex to HSL converter
Convert HEX/HEXA into HSL and CSS formats, with alpha handling, palette + shade previews, and WCAG contrast checks.
Inputs
2Live
01
HEX
#10b981
Hue 160.12 deg, saturation 84.08%, lightness 39.41%.
+9 more rows
Live update
Color preview
#10b981
#10b92c
#109db9
#8110b9
#b91048
#085e41
#0ea473
#14eba4
#5bf1bf
#a1f7da
HEX
#10b981HEXA
#10b981ffHSL
hsl(160.12, 84.08%, 39.41%)HSLA
hsla(160.12, 84.08%, 39.41%, 1)CSS RGB
rgb(16, 185, 129)CSS RGBA
rgba(16, 185, 129, 1)Contrast on white
2.537:1 (Fail WCAG contrast targets)Contrast on black
8.279:1 (Pass AA and AAA for normal text)Palette
#10b981, #10b92c, #109db9, #8110b9, #b91048Shades
#085e41, #0ea473, #14eba4, #5bf1bf, #a1f7daFormula
Convert hex to RGB then RGB to HSL Symbol legend
| Symbol | Meaning | Unit | Copy |
|---|---|---|---|
H | Hue angle | degrees | |
S | Saturation | percent | |
L | Lightness | percent |
- Parse hex into RGB channels.
- Normalize RGB to unit interval.
- Compute HSL with standard color-space equations and pair it with optional alpha output.
Example
Worked example: #10b981
- 1 Hex parsed to RGB channels
- 2 RGB normalized for conversion
- 3 HSL values computed
#10b981 converts to HSL output plus CSS, palette, shades, and WCAG contrast summaries.
How
- Enter a hex color value.
- Convert to HSL/HSLA and CSS-ready formats.
- Review palette, shade, and contrast outputs.
Avoid
- Assuming hue is measured in percent instead of degrees.
- Ignoring alpha when mixing transparent overlays.
- Providing malformed hex input.
FAQ
What range does hue use?
Hue is expressed in degrees from 0 to below 360.
Are saturation and lightness percentages?
Yes, both are reported as percentages.
Can this support short hex?
Yes, short hex is normalized before conversion.
Does it handle alpha channel?
Yes, you can provide alpha separately and copy HSLA/RGBA plus HEXA outputs.
Switch
Switch12
No match.