About the HSL to HEX
This tool converts hsl() values, and hsla() with alpha, into HEX codes for use in design tools and markup that expect HEX. It accepts values with or without the wrapper. Convert several at once, one per line.
Hue is an angle in degrees, so it wraps around: 380 is the same colour as 20, and a negative angle counts backwards from 360. Saturation and lightness are percentages and are clamped at 0 and 100. Lightness overrules everything else at the extremes, which is why hsl(146, 72%, 100%) and hsl(35, 79%, 100%) both come out as #ffffff despite having nothing else in common.
The round trip is not always exact. A HEX channel has 256 steps while HSL percentages are usually written as whole numbers, so a colour taken to HSL and brought back can land one unit away on a channel. Keep the HEX as the source of truth when the exact code matters, such as in a brand asset, and treat the HSL values as a working copy you adjust and then re-export.
HSL is a natural space to design in and HEX a natural space to hand off in, so this conversion is a common last step. To convert back, use HEX to HSL; to produce a whole ramp in one pass instead of converting values individually, try the Tints and Shades Generator.
How to use
- Paste hsl() values, one per line.
- Copy the HEX codes.
Common questions
- Do I need the hsl() wrapper?
- No, "146, 72%, 44%" works too.
- Is hsla supported?
- Yes, alpha becomes the last two hex digits.
- Are the percent signs required?
- They are accepted with or without; saturation and lightness are treated as percentages.