Converter HEX em HSL
HEX to HSL converts a hex colour into hue, saturation and lightness. The three channels are scaled to 0–1, then the largest and smallest of them produce the answer: lightness is their midpoint, saturation is how far apart they are, and hue is which channel is largest and by how much. The result is exact and reversible — but HSL's lightness is not the lightness your eye reports, which is worth knowing before you build anything on it.
A interface desta ferramenta está em inglês.
Enter a colour on the left. This accepts hex with or without the hash, rgb(), hsl(), oklch() and the CSS colour names.
O guia abaixo está disponível apenas em inglês.
How does HEX to HSL Converter work?
HSL is a different set of coordinates for the same three bytes. Scale each channel to 0–1, find the largest and the smallest, and the rest follows: lightness is their midpoint, chroma is the gap between them, and hue is determined by which channel is largest and how the other two sit relative to it.
Where the hue number comes from
The wheel is divided into six 60° sectors, one per primary and secondary. If red is the largest channel you are in the red sector, and the position within it is set by how far green leads or trails blue. For #ff8800: red is the maximum, green is 0.533, blue is 0, so the hue is (0.533 − 0) / 1 × 60 = 32°. Every hue calculation you have seen is this, written more compactly.
Saturation is relative, which surprises people
The same chroma produces a different saturation number depending on lightness, because the denominator changes: it is chroma / (1 − |2L − 1|). A very dark or very light colour has little room for chroma, so a small absolute gap between channels reports as high saturation. That is why #010200 comes back as 100% saturated — it is almost black, and within what is possible at that lightness it is as colourful as it gets.
HSL lightness is not perceived lightness
This is the thing worth taking away. hsl(60 100% 50%) is yellow and hsl(240 100% 50%) is blue, and HSL says both are 50% light. One is nearly white to the eye and the other nearly black. The formula weights all three channels equally, and the eye does not — green contributes about ten times more to perceived brightness than blue does.
The practical consequence: a tint ramp built by stepping HSL lightness has steps that look uneven however even the numbers are, and a palette rotated through HSL hues comes out with some colours glaring and others invisible. If the value is feeding a ramp, a mix, or any judgement about brightness, use OKLCH — it is in the output below, and every current browser accepts it in CSS.
A hex colour
#ff8800
Hue, saturation, lightness
hsl(32 100% 50%) max 255 / 255 = 1.000 (red) min 0 / 255 = 0.000 (blue) lightness = (1 + 0) / 2 = 50% chroma = 1 − 0 = 1.000 → saturation 100%
What options and edge cases does HEX to HSL Converter support?
| Parameter | Type | Default | Behaviour & edge cases |
|---|---|---|---|
| Hue | 0–360deg | 0 = red | Position on the wheel. 120 is green, 240 is blue. Wraps, so 370 and 10 are the same. |
| Saturation | 0–100% | — | Chroma relative to the most this lightness allows. 0% is grey at any hue. |
| Lightness | 0–100% | — | 0% is black and 100% is white at every hue. 50% is where a hue is most saturated. |
| Alpha | 0–1 | 1 | Written after a slash in modern syntax: hsl(32 100% 50% / 50%). |
| hsl() vs hsla() | — | same | hsl() takes alpha now. hsla() is a legacy alias and is not deprecated. |
| Grey | S = 0 | — | With no saturation the hue is arbitrary and carries no information. Reported as 0 here rather than as noise. |
| Round trip | exact | — | Hex to HSL and back returns the same colour. The formula is a change of coordinates, not an approximation. |
| OKLCH | alternative | — | Same idea — a hue angle, a chroma and a lightness — but with a lightness axis that matches what the eye reports. |
Frequently asked questions
How do I convert hex to HSL by hand?
Convert the hex to three 0–255 channels, divide each by 255, then take the largest and smallest. Lightness is (max + min) / 2. Chroma is max − min; if it is zero the colour is grey and you are finished. Otherwise saturation is chroma / (1 − |2L − 1|), and hue comes from which channel was largest: red gives ((G − B) / chroma) × 60, green gives ((B − R) / chroma + 2) × 60, blue gives ((R − G) / chroma + 4) × 60.
Why does a nearly black colour show 100% saturation?
Because HSL saturation is relative to the maximum chroma available at that lightness, not absolute. At 1% lightness there is almost no room for chroma at all, so a tiny difference between channels is as colourful as that lightness permits — and reports as 100%. It is behaving correctly; it is just measuring something other than what most people expect.
Is HSL lightness the same as brightness?
No, and this is the trap. HSL weights the three channels equally, while the eye weights green far more than blue. hsl(60 100% 50%) and hsl(240 100% 50%) claim the same lightness; one is a blinding yellow and the other is nearly black. For anything that depends on perceived brightness — a tint scale, a contrast decision, a mix — OKLCH gives the right answer where HSL gives a plausible wrong one.
Should I use HSL in CSS?
It is fine for what it is good at: nudging a hue, desaturating something, or writing a colour you want to be able to read at a glance. It is the wrong tool for generating a scale or interpolating between two colours, because its lightness axis is not perceptual. Those jobs want oklch(), which every current browser supports.
Does converting hex to HSL lose precision?
The conversion itself is exact — it is a change of coordinates on the same three bytes. What loses precision is printing: hue rounded to a degree and saturation to a tenth of a percent will not always convert back to the identical hex. The values here are printed at enough precision to round-trip, and if you need a guaranteed exact round trip, keep the hex.
How do I make a colour lighter or darker without shifting its hue?
Convert it to HSL and move the lightness alone. Holding hue and saturation fixed while stepping lightness — 50%, 60%, 70% — is what produces a tint scale that still reads as one colour. Adjusting a hex by hand cannot do this: adding the same amount to all three channels changes the hue as well as the brightness.