How to convert HEX to HSL
- Paste your hex code into the box — with or without the
#, full (#1657D8) or three-digit shorthand (#15d). You can also click the color swatch to pick a color visually. - The HSL value appears instantly, along with RGB, the normalized HEX and a live preview. If the code is not valid, a red note appears under the input.
- Click Copy next to the format you need and paste it straight into your CSS or design tool.
Why designers convert HEX to HSL
HEX codes are compact but opaque — you cannot look at #1657D8 and know how to make it 10% darker. HSL splits a color into three adjustable values: Hue (the position on the color wheel, 0–360°), Saturation (how vivid it is, 0–100%) and Lightness (0% is black, 100% is white, 50% is the pure color). Once a color is in HSL, building a palette is simple arithmetic: a hover state is the same hue and saturation with lightness lowered by 6–8 points, a muted background is the same hue with saturation cut in half, and a tint for a banner is the same hue at 94–96% lightness.
A worked example: #1657D8
The converter splits the hex into three bytes: 16 = 22, 57 = 87, D8 = 216. Divided by 255 these become roughly 0.086, 0.341 and 0.847. Lightness is the midpoint of the largest and smallest channel: (0.847 + 0.086) / 2 = 0.467, which rounds to 47%. Saturation is the spread between them (0.761) divided by 0.933, about 0.815, shown as 82%. The largest channel is blue, so the hue sits in the blue sector: 60 × (4 + (R − G) / spread) = 60 × 3.665, about 220°. Result: hsl(220, 82%, 47%).
Edge cases and limits of this tool
- Greys have no hue.
#808080converts tohsl(0, 0%, 50%). The 0° is a placeholder; any hue would look identical at 0% saturation. Black ishsl(0, 0%, 0%)and white ishsl(0, 0%, 100%). - Rounding. Output is rounded to whole degrees and percentages, so a round trip is not always byte-identical: converting
hsl(220, 82%, 47%)back to HEX gives#1657DA, two steps off in the blue channel. Invisible to the eye, but worth knowing if you compare codes character by character. - Lightness is not perceived brightness.
hsl(60, 100%, 50%)(yellow) looks far brighter thanhsl(240, 100%, 50%)(blue) although both read 50%. For text contrast, check a contrast ratio rather than trusting the L value. - Only 3- and 6-digit hex is accepted. Codes with an alpha pair (such as
#1657D8CC) and named colors likenavyare rejected. - Modern CSS syntax. The tool prints the comma form. Current browsers also accept the space form
hsl(220 82% 47%), so you can delete the commas if your style guide prefers it.
Same color, three notations
#1657D8, rgb(22, 87, 216) and hsl(220, 82%, 47%) describe the identical color in the same sRGB space. Need other directions such as HSL to HEX? Use the Color Converter. Want a hex from a photo first? The Image Color Picker reads any pixel with one click.
Is it private and safe?
Yes. The math runs in your browser with a few lines of JavaScript; the code you type is never uploaded or logged. It also keeps working offline once the page has loaded.
Related guides
For the theory behind the three notations, read RGB vs HEX vs HSL. A step-by-step version of this conversion is in How to convert HEX to HSL, and if your starting point is a photo, see how to get the hex code from an image.
Frequently asked questions
How do I convert HEX to HSL?
Paste the hex code into the input box and the HSL value appears immediately with a copy button. Shorthand codes like #15d are expanded to #1155DD first, and the leading # is optional.
What does HSL stand for?
Hue is the color's angle on the wheel from 0 to 360 degrees (0 is red, 120 green, 240 blue). Saturation is vividness from 0 to 100 percent, and Lightness runs from black at 0 percent through the pure color at 50 percent to white at 100 percent.
Why use HSL instead of HEX?
HSL lets you adjust a color by reasoning about it: lower lightness for a darker hover state, lower saturation for a muted variant, rotate the hue for a related accent. With HEX you would have to recompute all three channels by hand.
Is the conversion exact?
HEX and HSL describe the same sRGB color, so the math is exact, but the result is rounded to whole degrees and percentages. Converting back can differ by a step or two in a channel, for example hsl(220, 82%, 47%) returns #1657DA instead of #1657D8.
Why does my gray show hue 0 and saturation 0%?
When red, green and blue are equal there is no dominant color, so hue is undefined and the tool reports 0 by convention. Only lightness matters for greys, for instance #808080 is hsl(0, 0%, 50%).
Can I convert hex codes with transparency, like #1657D8CC?
No. This tool accepts 3-digit and 6-digit hex only and will show "Not a valid hex code" for 4- or 8-digit values. Remove the last two digits to convert the color, then add the alpha yourself as hsl(220 82% 47% / 80%).
Is it free and private?
Yes, there is no sign-up and no limit. The conversion happens locally in your browser, and nothing you enter is sent to a server.