Hex to HSL Converter

What is a hex to HSL conversion?

A hex code like #3b82f6 packs a color into three bytes written in base 16, one each for red, green, and blue. HSL describes the same color a different way, as hue (a position on the color wheel, 0 to 360 degrees), saturation (how far the color sits from grey), and lightness (how far it sits from black or white). A hex to HSL conversion takes the first description and produces the second, without changing the color itself.

The two formats are suited to different jobs. Hex is what you paste into a stylesheet, a design tool, or a chat message, because it is compact and unambiguous. HSL is what you reason with, because “rotate the hue by 15 degrees” or “make it 10% lighter” are direct edits to a single number, where the equivalent edit in hex means recomputing three bytes by hand.

This page does the arithmetic: paste a hex value and it returns the matching hsl(), along with a swatch so you can confirm the color visually before you use it.

How to convert hex to HSL

1. Paste the hex code. Type or paste it into the text field — 3, 4, 6, or 8 digits, with or without the leading #. There are no separate channel fields on this page; the hex value is the only thing you type.
2. Read the HSL value. The swatch and the hsl() result update as you type, with no submit button. Click the value to copy it straight to your clipboard.
3. Check the other formats. The Other formats row below shows the same color as rgb() and as hex, also click-to-copy, and there is a nearest-named-color link plus a link to the full color picker if you want to adjust the color further.

Building tints and shades from a brand color

The most common reason to go from hex to HSL is that you already have a fixed color — a brand blue from a style guide, a hex value copied out of a logo file — and you need related colors around it: a hover state a shade darker, a disabled state a shade lighter, a background tint at low saturation. In hex, producing any of those means recomputing three separate byte values and hoping the ratios stay right. In HSL, it is one number: keep the hue, and move lightness or saturation.

This also matters for building a small palette that reads as a family. Holding hue and saturation constant while stepping lightness up or down produces colors that visibly belong together, in a way that three independently adjusted hex codes usually do not.

Once you have the hue, saturation, and lightness figures you want, most CSS and design tools are happy to keep working in hsl() directly — you do not necessarily need to convert back to hex at all, which sidesteps the rounding question in the next section entirely.

How accurate is a hex to HSL conversion?

The conversion itself loses nothing. Done in full precision, converting every one of the 16,777,216 possible sRGB colors to HSL and straight back returned the identical color in every case — 0 failures out of 16,777,216. The math was also checked independently against Python's colorsys module across more than 60,000 colors, including every grey and a sweep of pure hues, with no disagreement on hue, saturation, or lightness.

The catch is display, not math. This tool, like every HSL display, rounds the result to whole degrees and whole percents, because the exact figures behind this page's own starting colour, hsl(210, 76.85%, 57.65%), are not something anyone wants to type into a stylesheet. That rounding is where information is actually discarded: measured across all 16,777,216 colors, converting hex to rounded HSL and then back to hex returns the exact original color for only 1,775,570 of them, 10.58%. The remaining 89.42% come back as a different hex, though a close one — off by 1 in the largest channel for 54.38% of colors, by 2 for 32.06%, by 3 for 2.89%, by 4 for 0.09%, and by 5 for just 108 colors out of 16.7 million. The worst measured case is #02E4E6, which displays as hsl(181, 98%, 45%) and converts back to #02DFE3.

This is not a bug in this tool or any other; it is arithmetically unavoidable. Rounded HSL has only 360 × 101 × 101 = 3,672,360 distinct hue, saturation and lightness triples, while there are 16,777,216 sRGB colors — fewer than a quarter as many labels as colors, so at least 78.11% of colors are guaranteed to share a label with some other color. The measured 89.42% sits above that floor, as it must.

The practical takeaway: use the HSL value this page gives you to reason about or adjust the color, but keep your original hex code as the one you actually store. If you round-trip a color through displayed HSL more than once, expect it to drift by a shade rather than stay put. One genuine edge case: for a grey, where red, green and blue are equal, hue has no defined direction on the wheel at all, and this tool follows the usual convention of reporting it as 0.

Why is this free?

The conversion runs entirely in your browser — the hex code you type never leaves your machine, there is nothing to upload, and there is no server call to pay for. That means no account, no watermark, and no usage cap: paste as many hex codes as you like.