HEX to HSL Converter
Turn a HEX color into HSL — or type HSL and get the HEX — with a live swatch you can see as you go.
How it works
HEX and HSL describe the exact same color in different words. HEX packs red, green, and blue into six digits. HSL splits the color into hue (which color, 0–360°), saturation (how vivid, 0–100%), and lightness (how bright, 0–100%). The converter reads one and writes the other.
Paste a hex code and the HSL fields fill in; nudge the H, S, or L numbers and the hex updates to match. Because the swatch redraws on every keystroke, you can watch a color shift from muddy to vivid as you raise saturation.
HSL earns its keep when you're building a palette. Keep hue and saturation fixed, drop the lightness, and you have a darker version of the same color — much easier than guessing hex digits.
Frequently asked questions
How do you convert HEX to HSL?
First read the hex as RGB, then find the max and min of the three channels. Lightness is their average; saturation comes from their spread; hue is the angle of whichever channel is largest. The tool runs those formulas for you instantly.
Why does #FF0000 come out as hsl(0, 100%, 50%)?
Pure red has full red and no green or blue, so the hue angle is 0°, saturation is at its maximum 100%, and lightness sits right in the middle at 50%. That's the textbook HSL for red.
Does the conversion round-trip exactly?
HSL values are whole numbers here, so converting back to hex can land one or two units off the original in rare cases. For everyday design work the result is visually identical.