ColorKitFree hex to HSL converter
Hex to HSL with the lightness knob attached
Free and with no signup: type a hex code and this page returns hue, saturation and lightness in the comma spelling, in the CSS Color 4 spelling, and at one decimal place — the precision that reproduces all 16,777,216 sRGB colors exactly. The ring beside the field puts the hue at a spot on 360° you can drag, and the ladder underneath holds hue and saturation still while lightness steps from 95% down to 10%. Three-, four-, six- and eight-digit codes all parse, and an eight-digit code carries its alpha through to hsla().
- 100% free
- No signup
- Draggable 360° hue ring
- 10-rung lightness ladder
- Round-trip check on every code
Press Ctrl+V anywhere on the page to drop in a hex code — no need to click the field first.
#2563eb
H 221° · S 83% · L 53%
- CSS, comma form
- CSS Color 4 form
- One decimal place
Rounding costs you 1 of 255 on a channel — hsl(221, 83%, 53%) converts back to #2463eb, not #2563eb. Ship the one-decimal line above if the exact code matters.
0° red · 60° yellow · 120° green · 240° blue
Same hue, same saturation, lightness stepped
| Swatch | Lightness | HSL | Hex | Load |
|---|---|---|---|---|
| 95% | hsl(221, 83%, 95%) | #e8eefd | ||
| 90% | hsl(221, 83%, 90%) | #d0defb | ||
| 80% | hsl(221, 83%, 80%) | #a2bcf6 | ||
| 70% | hsl(221, 83%, 70%) | #739bf2 | ||
| 60% | hsl(221, 83%, 60%) | #447aee | ||
| 53%your color | hsl(221, 83%, 53%) | #2463eb | ||
| 50% | hsl(221, 83%, 50%) | #1659e9 | ||
| 40% | hsl(221, 83%, 40%) | #1147bb | ||
| 30% | hsl(221, 83%, 30%) | #0d358c | ||
| 20% | hsl(221, 83%, 20%) | #09235d | ||
| 10% | hsl(221, 83%, 10%) | #04122f |
How to convert a hex code to HSL
Three steps, and you leave with a triple you can nudge rather than one you have to look up again.
Drop the code into the field
The field takes #2563eb, 2563eb without the hash, the shorthand #24b, the eight-digit #2563ebcc, and every one of the 148 CSS keyword names — rebeccapurple arrives as #663399. Anything the parser cannot read is flagged as an error rather than quietly becoming black, so a mistyped digit shows up as a mistyped digit.
Take the triple in the spelling your file wants
Three lines come back. hsl(221, 83%, 53%) is what Sass, Less and most design-tool exports emit; hsl(221 83% 53%) is the CSS Color 4 spelling that Chrome 65, Firefox 52 and Safari 12.1 and later all accept; the third keeps one decimal, and it is the only one of the three guaranteed to convert back to the code you started from.
Move the lightness and leave the hue alone
Each rung of the ladder is your hue and saturation at a different lightness, with the rung nearest your own value marked. Press Use on a rung and the ring, the read-outs and the round-trip check all follow it. To shift hue instead, drag the marker around the ring or focus it and press an arrow key — one degree per press, ten with Shift held.
Technical specifications
| Accepted hex forms | #rgb, #rgba, #rrggbb and #rrggbbaa, each also without the leading hash, plus the 148 CSS color keywords |
|---|---|
| Output notations | hsl(221, 83%, 53%), hsl(221 83% 53%), hsla() and hsl(221 83% 53% / 80%) once alpha drops below 100% |
| Reversible precision | One decimal on H, S and L, which reproduces every one of the 16,777,216 sRGB colors exactly — checked across the whole cube, not sampled |
| Integer round-trip | 1,775,538 of 16,777,216 codes return unchanged from a whole-number triple, or 10.58% |
| Worst-case drift | 5 of 255 on a single channel; 35.0% of codes move by 2 or more, and the panel under the outputs names the hex you get back |
| Lightness ladder | Ten rungs at 95, 90, 80, 70, 60, 50, 40, 30, 20 and 10 percent with hue and saturation held fixed |
| Hue ring | 360 one-degree positions, draggable with a pointer or stepped with the arrow keys, ten degrees with Shift |
| What is stored | Nothing — no swatch list, no history, no cookie, and the URL is never rewritten with your color |
Frequently asked questions
Why does my hex code not come back after a trip through HSL?
Because an integer HSL triple cannot address most of the sRGB cube. Whole-number hue, saturation and lightness leave 3,672,360 addressable combinations against 16,777,216 colors, so only 10.58% of hex codes survive unchanged and one channel can move by as much as 5 of 255. The one-decimal line on this page is exact for every code in the cube, and the panel under the outputs names the hex your rounded triple actually returns so you can judge whether the difference matters.
Is hsl(221, 83%, 53%) the same color as #2563eb?
Not quite — it renders as rgb(36, 99, 235), one step short on red. The exact triple for #2563eb is hsl(221.212, 83.193%, 53.333%), and rounding all three components pushes the result a fraction of a channel in each direction; red is the one that lands on the wrong side of a boundary. A color picker held over two screenshots will show the difference, though nobody will see it in a running interface.
What does a three-digit hex expand to before it is converted?
Each digit is doubled, so #24b is read as #2244bb and converts to hsl(227, 69%, 43%). That expansion is defined by CSS rather than invented here, and it has a consequence worth knowing: the shorthand can name one sRGB color in every 4,096, which is why so few codes shorten at all. #2244bb is also one that loses ground on the way back, returning rgb(34, 67, 185) instead of rgb(34, 68, 187).
Does the alpha in an eight-digit hex survive the conversion?
Yes, and the output switches to hsla() and to the slash spelling as soon as alpha drops below 100%. The last pair of an eight-digit code is alpha on 0-255, so the cc in #2563ebcc is 204, which is 0.8 exactly, giving hsla(221, 83%, 53%, 0.8) and hsl(221 83% 53% / 80%). Only pairs that divide cleanly land on a round percentage — #2563eb80 is 128 ÷ 255 = 0.502, not the 0.5 people expect.
How do I make a color 20% lighter without changing the color?
Raise L by 20 points and leave hue and saturation untouched — that is the whole reason to be in this notation. What you cannot assume is that 20 points of L means 20% more light: the scale is linear in HSL and the eye is not, so a step from 30% to 50% reads as a far bigger jump than one from 70% to 90%. The ladder here is spaced 10 points apart through the middle and 5 apart at the top for exactly that reason.
Should I paste the spelling with commas or the one without?
Both resolve to identical channels, so pick by what has to read the file. The comma form is what Sass, Less and most design-tool exports still emit and what an ageing build step is likeliest to parse; the space-separated form is CSS Color 4 and is the only one of the two that accepts the slash for alpha inside the same function. Neither is faster and neither is more accurate.
Can I paste a CSS color name instead of a hex code?
Yes — all 148 keywords resolve to their hex value before the conversion runs. rebeccapurple becomes #663399 and then hsl(270, 50%, 40%), which happens to be one of the codes that round-trips perfectly, while darkslateblue becomes #483d8b and hsl(248, 39%, 39%), which comes back one step light on red and blue.
About hex codes and the HSL cylinder
A hex code is three bytes in a trench coat: two digits of red, two of green, two of blue, and nowhere in it a coordinate that means lighter. Producing a hover state from #2563eb means editing all three pairs in step and hoping the hue survives, which is a fiddly way to perform an operation designers perform constantly. HSL, which reached browsers with CSS Color Module Level 3, replots the same colors as a cylinder — hue around the rim, saturation outward from the axis, lightness up it — and the hover state becomes one number. The hex to RGB page shows the byte view of the same code when what you need is the channels themselves.
The part most converters skip is that the trip is lossy in one direction. Integers on all three components address 3,672,360 points, the cube holds 16,777,216 colors, and the shortfall is not spread evenly — it lands hardest exactly where brand colors live. A saturated color at mid lightness survives the round trip about 7% of the time, against 20% for a near-grey and 23% for a tint above 90% lightness, and the mean error climbs from 0.86 of a channel in the least saturated tenth of the cube to 1.50 in the most saturated. That is why this page prints the code your rounded triple returns instead of leaving you to discover the drift in a screenshot comparison later, and why the one-decimal line is there at all: a single decimal place is enough to make the conversion reversible for every color in sRGB.
Once the triple is on screen the hue becomes an address rather than a number, which is what the ring is for. 221° is a short arc from 240° pure blue and a long way from 30° amber, and seeing that distance is the difference between guessing at a partner color and choosing one — the color wheel takes the same angle and names the complements and triads that sit around it. When the value you are holding is already three channels rather than a code, start at RGB to HSL, which shows the arithmetic as it goes; to send a finished triple back the other way, HSL to RGB resolves it into channels, hex and the float triples a canvas or a shader wants.
Where the hex you paste goes
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
Nothing here outlives the tab. No swatch list, no history, no cookie, and the color you entered never reaches the URL — closing the page is the entire cleanup procedure.