Hex codes are how colours get written down, but HSL is how designers actually think about them: a hue you can rotate, a saturation you can calm down, a lightness you can step up and down to build hover states and shades. This hex to HSL converter bridges the two. Type or pick any hex colour — the full 6-digit form like #0f766e or the 3-digit shorthand — and you get the HSL triplet (hue in degrees, saturation and lightness as percentages), the RGB values, and a CSS-ready hsl() line, all with a live swatch so the numbers are never a guess. Everything runs in your browser with plain colour maths: each hex pair is one RGB channel, and HSL is the same colour re-described around a cylinder instead of a cube. No upload, no sign-up, nothing leaves the page.
How a hex code becomes HSL
Start with the channels. In #0f766e the pairs read 0f = 15 red, 76 = 118 green, 6e = 110 blue. HSL then asks three different questions about that colour. Hue is the angle on the colour wheel: because green is the strongest channel here and blue sits close behind it, the angle lands around 175° — the teal-green stretch of the wheel. Lightness is the midpoint between the strongest and weakest channels, (118 + 15) / 2 on the 0–255 scale, which works out near 26%. Saturation measures how far the colour is from grey at that lightness: the gap between the strongest and weakest channels is large here, so saturation is a vivid 77%. That is exactly what the tool shows for the default colour — h 175, s 77%, l 26% — and you can verify the same maths on pure red #ff0000, which gives the textbook answer hsl(0, 100%, 50%).
Why convert hex to HSL at all?
Because hex is a storage format, not a thinking format. Nobody can look at #0f766e and know what its lighter version should be, but in HSL the job is trivial: keep h 175 and s 77, raise l from 26% to 40%, and you have a highlight shade that is unmistakably the same colour family. Interface palettes, chart series and state colours (hover, active, disabled) are all built this way — one hue, stepped lightness. HSL is also forgiving for accessibility work: darkening a text colour until it passes a contrast target means walking lightness down in small honest steps rather than guessing at new hex values. And in modern CSS, hsl() is a first-class citizen, so the converted value pastes straight into your stylesheet with no further translation.
Edge cases worth knowing
Greys are the honest exception: when all three channels are equal, hue and saturation are mathematically undefined, and this converter reports h 0, s 0% — only lightness carries meaning. Black is l 0%, white is l 100%. The 3-digit shorthand doubles each digit, so #0f8 expands to #00ff88 before converting; a hex string with any other length is rejected rather than guessed at. Alpha channels are out of scope here — an 8-digit hex with transparency needs an HSLA-aware tool, and stripping the alpha pair silently would misreport the colour, so the honest answer for those is a different converter.
Frequently asked questions
What HSL is #0f766e?
hsl(175, 77%, 26%) — a deep teal-green. The converter above is preloaded with it so you can see the full worked example the moment the page opens.
Is HSL the same as HSV (HSB)?
No. They share the hue angle, but lightness (HSL) and value/brightness (HSV) are different scales — the same colour has different numbers in each. This tool converts to HSL specifically.
Can I type hex without the # sign?
Yes, the # is optional, and both the 6-digit and 3-digit forms work. Uppercase and lowercase digits are treated identically.
Does the tool save or upload my colours?
No. The conversion is arithmetic done by JavaScript in your browser; nothing is sent anywhere, and closing the tab forgets everything.
Related tools
Versión en español: Conversor de HEX a HSL — Obtén Valores HSL desde Cualquier Color Hexadecimal. You may also like: RGB to HSL Converter — Convert RGB Colours to HSL Instantly · HSL to RGB Converter — Turn HSL Colours into RGB and Hex.
Embed this tool on your website — free
Copy the code below to add this working tool to your own page. A small credit link stays with it — that’s all we ask.