The converter accepts every CSS hex form: 6-digit #3366cc, 3-digit shorthand #36c, and the 4- and 8-digit forms with an alpha channel, with or without the #. It shows the hsl() or hsla() string, the plain values and a per-component breakdown - plus a reverse HSL to HEX row when you need to go the other way. Everything runs in your browser - no upload, no account, no limits.
HEX to HSL Converter
Runs entirely in your browser - no upload, no sign-up.
CSS
hsl(220, 60%, 50%)How it converts
Hue220
Saturation60%
Lightness50%
Going the other way? HSL to HEX
#3366ccHow do I convert HEX to HSL?
First read the hex code as red, green and blue (0-255), then restate that color as hue, saturation and lightness. Hue is the angle on the color wheel (0-360), saturation is how vivid it is (0-100%) and lightness how bright (0-100%). #3366cc becomes hsl(220, 60%, 50%). This tool does it instantly as you type.
How to use
- 1Enter a hex code. Type or paste a hex color like #3366cc (or #36c), or pick one with the color swatch. The # is optional.
- 2Read the HSL value. The hsl() string, the plain values and a live color preview update as you type, with a per-component breakdown for hue, saturation and lightness.
- 3Copy the format you need. Click Copy next to the hsl() string or the raw values. Need the reverse? Enter hue, saturation and lightness below to get the hex code back.
Who it's for
- Front-end developers switching a hex code to hsl() so they can tweak lightness for hover and focus states without picking a whole new color.
- Designers building palettes who keep hue fixed and step saturation and lightness to generate tints and shades from one brand color.
- Theme and design-token authors storing colors as HSL because it is far easier to read and adjust by hand than a hex string.
- Anyone matching colors across tools where one wants hex (Figma, most CSS) and another wants HSL (SCSS helpers, some color systems).
FAQ
Is this HEX to HSL converter free?
Yes - it's 100% free with no sign-up and no limits. It runs entirely in your browser.
Are my colors uploaded anywhere?
No. The conversion is plain JavaScript running on your device - nothing is sent to a server, and it keeps working offline once the page is loaded.
What is HSL?
HSL stands for hue, saturation and lightness. Hue is an angle from 0 to 360 degrees on the color wheel, saturation is how vivid the color is from 0 to 100 percent, and lightness runs from 0 percent (black) through the pure color at 50 percent to 100 percent (white).
How do you convert hex to HSL by hand?
Convert the hex to red, green and blue and divide each by 255. Take the max and min of the three: lightness is their average, saturation is (max - min) divided by (1 - |2L - 1|), and hue comes from which channel is the max, scaled to 0-360 degrees.
Does it support 3-digit shorthand like #36c?
Yes. In CSS shorthand each digit is doubled, so #36c expands to #3366cc and converts to hsl(220, 60%, 50%). The 4-digit form works the same way, with the last digit as alpha.
How does it handle transparency (HSLA)?
An 8-digit hex code carries alpha in its last pair. That byte (0-255) is divided by 255 to get the 0-1 alpha that hsla() expects, rounded to three decimals - so #3366cc80 becomes hsla(220, 60%, 50%, 0.502).
Can it convert HSL back to HEX?
Yes. Use the HSL to HEX row under the result: enter hue (0-360) plus saturation and lightness (0-100%) and it returns the hex code instantly. Out-of-range values are clamped.
Why is HSL useful instead of hex?
HSL is human-readable: you can lighten a color by raising L, mute it by lowering S, or shift its family by changing H - all without guessing hex digits. That makes it ideal for building consistent palettes, hover states and design tokens.