Convert HSL to HEX
Paste a HSL color to get its HEX 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
-
HSL to HEX, explained
HSL describes a color by hue (0–360°), saturation and lightness (both percentages), which makes building tints and shades intuitive.
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.
Worked example
hsl(38, 92%, 50%) converts to #f59e0b. The converter above is pre-filled with this color — edit it or pick your own to see the result update live.
HSL to HEX reference table
| Color | HSL | HEX |
|---|---|---|
| Amber | hsl(38, 92%, 50%) | #f59e0b |
| Navy | hsl(212, 60%, 10%) | #0a1828 |
| Red | hsl(0, 72%, 51%) | #dc2626 |
| Green | hsl(142, 76%, 36%) | #16a34a |
| Sky | hsl(199, 89%, 48%) | #0ea5e9 |
Common uses
Once you've dialled in a colour by hue, saturation and lightness, you'll usually need the HEX code to drop it into a design tool or stylesheet.
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 HSL to HEX?
Paste your HSL value into the converter above and it shows the HEX equivalent — along with every other format — instantly. For example, hsl(38, 92%, 50%) becomes #f59e0b.
What is HSL hsl(38, 92%, 50%) in HEX?
hsl(38, 92%, 50%) in HEX is #f59e0b.
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.