About the HEX to HSL
HSL describes a colour by hue, saturation and lightness, which is far more intuitive to adjust than HEX or RGB: to make a colour lighter you raise the lightness, to mute it you lower the saturation, to shift it you change the hue. This tool converts HEX to HSL so you can then tweak it meaningfully. Convert several at once, one per line.
The conversion normalises the three channels, finds the largest and smallest of them, and derives lightness from their average, saturation from their spread and hue from which channel came out on top. A grey has no spread at all, so its saturation is zero and its hue is genuinely undefined. The tool reports hue 0 in that case as a convention, not as a measurement, so there is no meaning to read into the hue of #808080.
In a real workflow this is the step before a theme exists. Convert the brand code once, note the hue, then hold that hue fixed and vary only lightness to produce a surface, a border and a hover state that all read as one family. Two colours sharing a hue and saturation always look related, which is very hard to guarantee when you nudge hex digits by eye and hope for the best.
To convert back, use HSL to HEX; to generate lighter and darker variants of a colour, the Shades Generator. Where the goal is a whole harmony rather than one family, the Palette Generator rotates the hue for you.
How to use
- Paste HEX codes, one per line.
- Copy the hsl() values.
- Adjust the lightness or saturation to tweak the colour.
Common questions
- Why use HSL over HEX?
- HSL makes colours easy to adjust: change lightness for tints and shades, saturation for muting, hue to shift the colour.
- Is alpha supported?
- Yes, an 8-digit HEX gives an hsla() value.
- What range are the values?
- Hue 0 to 360 degrees, saturation and lightness 0 to 100 percent.