HEX to HSL
Convert any HEX color to HSL and back. Paste a code like #2f6b4f, or drag the hue, saturation and lightness sliders, and copy the HSL, HEX, RGB or a ready-made CSS snippet.
Accepts #rgb, #rgba, #rrggbb and #rrggbbaa, with or without #.
Lightness scale Same hue and saturation, click to load
How to use the HEX to HSL
- Paste a HEX code such as #2f6b4f or #fa0 and press Convert (it also converts as you type).
- Read the HSL value in the results, for example hsl(152, 39%, 30%), along with HEX and RGB.
- Adjust the color with the H, S and L sliders or number boxes; the HEX code updates instantly.
- Add transparency with the alpha slider to get hsla() and an 8-digit HEX.
- Press Copy next to any format, or copy the CSS snippet with ready-made custom properties.
HEX to HSL formula
Take #2f6b4f as an example:
- Split into channels and divide by 255: R = 0x2f = 47 → 0.184, G = 0x6b = 107 → 0.420, B = 0x4f = 79 → 0.310.
- Max = 0.420 (green), min = 0.184, difference d = 0.235.
- Lightness L = (max + min) ÷ 2 = 0.302 → 30%.
- Saturation S = d ÷ (1 − |2L − 1|) = 0.235 ÷ 0.604 = 0.390 → 39%.
- Hue when green is the max: H = 60 × ((B − R) ÷ d + 2) = 60 × (0.536 + 2) = 152°.
Result: hsl(152, 39%, 30%).
Common colors in HEX and HSL
| Color | HEX | HSL |
|---|---|---|
| Red | #ff0000 | hsl(0, 100%, 50%) |
| Orange | #ffa500 | hsl(39, 100%, 50%) |
| Yellow | #ffff00 | hsl(60, 100%, 50%) |
| Green | #008000 | hsl(120, 100%, 25%) |
| Dodger blue | #1e90ff | hsl(210, 100%, 56%) |
| Purple | #800080 | hsl(300, 100%, 25%) |
| Gray | #808080 | hsl(0, 0%, 50%) |
| White | #ffffff | hsl(0, 0%, 100%) |
Working with HSL in CSS
- Shades and tints: keep hue and saturation, change only lightness. Lower L by 5–10% for hover and active states.
- Muted versions: lower saturation to make a color calmer without changing its hue.
- Color themes: store hue, saturation and lightness as CSS custom properties and combine them with
calc(), as in the snippet above. - Transparency: add an alpha value, hsl(152 39% 30% / 0.5), instead of creating a separate color.
Frequently asked questions
How do I convert HEX to HSL?
Split the HEX code into red, green and blue (00–FF each) and divide by 255. Lightness is (max + min) ÷ 2, saturation is (max − min) ÷ (1 − |2L − 1|), and hue depends on which channel is largest. For #2f6b4f this gives hsl(152, 39%, 30%).
What does HSL stand for?
Hue, saturation and lightness. Hue is the position on the color wheel from 0 to 360 degrees (0 red, 120 green, 240 blue), saturation is the color intensity from 0% (gray) to 100%, and lightness runs from 0% (black) through 50% (pure color) to 100% (white).
Why doesn't HSL convert back to exactly the same HEX?
HSL values are usually rounded to whole numbers, which can shift a channel by one step when converting back. The exact HSL row shows decimal values that round-trip precisely.
Can I use HSL in CSS?
Yes. All modern browsers support hsl(152, 39%, 30%) and the newer space-separated form hsl(152 39% 30%), including an alpha value like hsl(152 39% 30% / 0.5).
Why use HSL instead of HEX?
HSL is easier to adjust by hand: you can make a color lighter, darker or more muted by changing one number, and build consistent shades for buttons, hovers and themes from a single hue.
What is an 8-digit HEX color?
The last two digits are the alpha (opacity) from 00 (transparent) to FF (opaque). #2f6b4f80 is the same green at about 50% opacity, equal to hsla(152, 39%, 30%, 0.5).