HSL to Hex Converter
Runs in your browser — your data is never uploaded.
Convert an HSL colour to its hex code, with the RGB values shown alongside. This is the last step of the usual workflow: pick and adjust in HSL because the numbers are meaningful, then export hex because that is what most tools, brand guidelines and stylesheets expect.
How to use HSL to Hex
- 1
Enter hue (0–360), saturation and lightness as percentages.
- 2
Read the hex code and RGB values.
- 3
Copy the hex into your stylesheet or design tool.
Share
Embed this tool on your site
Paste this where you want the tool to appear. It runs entirely in your visitor's browser — no uploads, no account, no tracking.
Please keep the attribution line — it's what keeps these tools free.
Need a different size, a dark theme, or a different tool? Build an embed lets you preview it first.
Frequently asked questions
What do the three HSL numbers mean?+
Hue is a position on the colour wheel in degrees — 0 red, 120 green, 240 blue. Saturation is how vivid it is, 0% being grey. Lightness runs from 0% black through 50% (the pure hue) to 100% white.
Why did my colour come out grey or white?+
Saturation at 0% produces grey whatever the hue, and lightness at 0% or 100% produces black or white regardless of the other two. Both are correct behaviour rather than a conversion error.
What happens if hue is above 360?+
It wraps, because hue is an angle — 400° is the same colour as 40°. Negative values wrap the other way.