HEX to HSL Converter
Convert a HEX colour into hue, saturation and lightness so you can generate consistent tints and shades by adjusting one number instead of guessing.
Live Preview
rgb(37, 99, 235)
hsl(221, 83%, 53%)
Popular color conversions
About HEX to HSL Converter
HEX to HSL conversion expresses a hexadecimal color as hue (0–360°), saturation, and lightness. HSL is ideal for building palettes, hover states, and accessible lighter/darker variants.
Paste a HEX code like #2563EB. The converter shows the HSL equivalent and keeps HEX, RGB, and HSL in sync with a live preview.
#2563EB → hsl(217, 91%, 60%)
Once you have HSL, tweak lightness for hover/active states without guessing new HEX codes by hand.
Need all formats at once? Open the full Color Converter, or read the HEX to RGB CSS guide.
Frequently Asked Questions
Is HEX to HSL conversion perfectly lossless?
The underlying math is exact, but this and most tools round the displayed hue to the nearest degree and saturation/lightness to the nearest percent, so a round-trip back to HEX can land 1 unit off from the original in rare cases.
Why convert to HSL instead of just using HEX or RGB?
HSL separates a color's hue from how light or saturated it is, so you can generate a whole accessible palette — hover states, disabled states, tints — by only adjusting the lightness percentage of one hue.
What do the H, S, and L numbers mean?
H is the position on a 0–360° color wheel (0/360 = red, 120 = green, 240 = blue). S is how vivid the color is (0% = gray, 100% = fully saturated). L is how light or dark it is (0% = black, 100% = white).
Are my colors uploaded to a server?
No. Conversion runs entirely in your browser; nothing is sent to us.