HSL to HEX

What this tool is used for

• Producing a concrete hex value from an HSL exploration.
• Converting a theme's HSL variables into static values for a design handoff.
• Getting hex for a tool that will not accept HSL.
• Producing a fallback value for an older context.
• Comparing an HSL colour against an existing hex palette.

Frequently Asked Questions

Why would I convert away from HSL?

Because many contexts do not accept it: HTML email, some design tools, older CSS, canvas APIs, and most image formats. Hex is the universally understood notation, which is why it remains the delivery format.

What happens to values outside the normal range?

Hue wraps modulo 360, so 400 becomes 40 — legal and often surprising. Saturation and lightness clamp to 0-100%. Negative hue also wraps, which is useful when generating a palette by rotation.

Does hex support transparency?

Yes, through 8-digit #RRGGBBAA, supported in all modern browsers. The alpha pair is the same 00-FF scale, so 50% is roughly #80. Older tooling only understands the 6-digit form and will ignore or reject the extra pair.

Why did my colour shift slightly?

Rounding. HSL written with integer percentages cannot address every one of the 16.7 million sRGB colours, so the nearest is chosen. The shift is at most one unit per channel and is not visible in isolation.

Can I shorten the result to three digits?

Only when each pair repeats — #FFCC00 shortens to #FC0. It is purely cosmetic and cannot represent most colours, so a converter emitting six digits is being correct rather than verbose.

Why do equal lightness values look different across hues?

Because HSL lightness is arithmetic, not perceptual. Yellow at 50% lightness reads far brighter than blue at 50%, since the model weights all three channels equally where human vision does not — the reason `oklch` exists.

Is a hex colour affected by the display's colour profile?

Yes. A hex value is an sRGB triple, and a wide-gamut display renders it through its own profile, so the same code can look more saturated on one screen than another. The bytes are exact; the appearance is not.

Common errors and gotchas

• Expecting a tidy hex, since most HSL values do not land on round channel numbers.
• Losing alpha in the conversion unless the eight-digit hex form is used.
• Assuming hue 0 and hue 360 are different, when they are the same colour.
• Producing a hex value and then editing it by hand, which loses the relationship the HSL expressed.
• Rounding lightness before converting, which shifts the result more at the extremes.