Convert HEX to HSL
Paste a HEX color to get its HSL value — and every other format — with a live swatch. All in your browser.
That doesn't look like a valid color.
- HEX
-
- RGB
-
- HSL
-
- OKLCH
-
HEX to HSL, explained
A HEX code writes the red, green and blue channels as a six-digit hexadecimal number prefixed with #, the format most design tools and stylesheets use.
HSL describes a color by hue (0–360°), saturation and lightness (both percentages), which makes building tints and shades intuitive.
Worked example
#f59e0b converts to hsl(38, 92%, 50%). The converter above is pre-filled with this color — edit it or pick your own to see the result update live.
HEX to HSL reference table
| Color | HEX | HSL |
|---|---|---|
| Amber | #f59e0b | hsl(38, 92%, 50%) |
| Navy | #0a1828 | hsl(212, 60%, 10%) |
| Red | #dc2626 | hsl(0, 72%, 51%) |
| Green | #16a34a | hsl(142, 76%, 36%) |
| Sky | #0ea5e9 | hsl(199, 89%, 48%) |
Common uses
Turning a HEX code into HSL makes it easy to build lighter or darker variants by nudging the lightness, or to find related hues for a palette.
Related conversions
Need another format? The full color converter reads HEX, RGB, HSL, OKLCH and CSS named colors and shows them all at once.
Frequently asked questions
How do I convert HEX to HSL?
Paste your HEX value into the converter above and it shows the HSL equivalent — along with every other format — instantly. For example, #f59e0b becomes hsl(38, 92%, 50%).
What is HEX #f59e0b in HSL?
#f59e0b in HSL is hsl(38, 92%, 50%).
Is my color sent to a server?
No. Every conversion runs locally in your browser using the canvas color parser and standard color math, so nothing you enter is uploaded.