Converter RGB em HSL
RGB to HSL re-describes three colour channels as an angle, a saturation and a lightness. Only the largest and smallest channel matter: their midpoint is the lightness, the gap between them is the chroma, and which one is largest picks the 60° sector the hue falls in. The middle channel's position inside that sector gives the exact angle.
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 RGB to HSL Converter work?
The whole conversion turns on two numbers: the largest channel and the smallest. Scale all three to 0–1, then lightness is the midpoint of those two and chroma is the distance between them. If chroma is zero the three channels are equal, the colour is a grey, and there is no hue to compute.
Which channel is largest picks the sector
The wheel splits into six 60° sectors. Red largest puts you in the sector spanning magenta through yellow; green largest, the one spanning yellow through cyan; blue largest, cyan through magenta. Where exactly you land depends on the middle channel: for a red maximum the angle is ((G − B) / chroma) × 60, and for the other two the same expression with an offset of 2 or 4 sectors.
That expression can come out negative — when blue exceeds green on a red-dominant colour — which is why every correct implementation adds 360 and takes the remainder. An implementation that skips the wrap returns a negative hue for roughly a sixth of all colours, and the bug is invisible until something downstream tries to sort by it.
Saturation is measured against what is possible
Saturation is not the raw chroma; it is chroma divided by the most chroma that lightness allows, which is 1 − |2L − 1|. That denominator goes to zero at both extremes, so a near-black or near-white colour with a tiny channel difference reports as highly saturated. It is correct and it is not what most people expect the number to mean.
What HSL is good for, and what it is not
It is a good notation for a human. “Same colour, less saturated” and “same colour, a bit darker” are one-number edits in HSL and three-number edits in RGB, and a hue slider only makes sense in a polar space. That is a real advantage and it is why HSL has survived.
It is a bad basis for arithmetic. Its lightness axis weights the three channels equally, and human vision weights green about ten times more than blue, so equal lightness numbers do not look equally light. Any ramp, mix or contrast judgement built on HSL inherits that error. OKLCH is the same shape of notation — angle, chroma, lightness — with an axis that matches what the eye reports, and it is in the output below.
RGB channels
rgb(255 136 0)
Hue, saturation, lightness
hsl(32 100% 50%) max = 255 (red) → 1.000 min = 0 (blue) → 0.000 chroma = 1.000 lightness = (1.000 + 0.000) / 2 = 50% hue = ((0.533 − 0.000) / 1.000) × 60 = 32°
What options and edge cases does RGB to HSL Converter support?
| Parameter | Type | Default | Behaviour & edge cases |
|---|---|---|---|
| max, min | 0–1 | — | The largest and smallest of the three scaled channels. Everything else derives from these two. |
| chroma | max − min | — | How far the colour is from grey. Zero means a grey, and the hue is then undefined. |
| lightness | (max + min) / 2 | — | The midpoint. Note that it ignores which channels those were, which is the source of HSL's perceptual problem. |
| saturation | chroma / (1 − |2L − 1|) | — | Chroma relative to the maximum available at that lightness — not an absolute measure. |
| hue, red max | ((G − B) / C) × 60 | — | Can be negative when B > G; add 360 and take the remainder. |
| hue, green max | ((B − R) / C + 2) × 60 | — | The same expression offset by two sectors. |
| hue, blue max | ((R − G) / C + 4) × 60 | — | Offset by four sectors. |
| grey | C = 0 | hue 0 | Reported as 0 rather than as whatever the arithmetic produces from three equal numbers. |
Frequently asked questions
How do I convert RGB to HSL?
Divide each channel by 255. Take the largest and the smallest: lightness is their midpoint and chroma is their difference. If chroma is zero the colour is grey and you are done. Otherwise saturation is chroma / (1 − |2L − 1|), and hue depends on which channel was largest: red gives ((G − B) / chroma) × 60, green gives ((B − R) / chroma + 2) × 60, blue gives ((R − G) / chroma + 4) × 60. Add 360 and take the remainder if the result is negative.
Why does my hue come out negative?
Because the red-maximum branch subtracts blue from green, and when blue is the larger of the two the result is below zero. The fix is the modulo every correct implementation has: add 360 and take the remainder. It affects about a sixth of the colour space — the magenta side of red — and typically goes unnoticed until something tries to sort or interpolate by hue.
What does saturation actually measure in HSL?
Chroma relative to the most chroma that lightness can hold, not chroma itself. That is why rgb(2 0 0) — almost black — reports 100% saturation: within what is possible at 0.4% lightness, it is as colourful as a colour can be. If you want an absolute measure of colourfulness, that is what OKLCh's chroma is.
Is HSL better than RGB for CSS?
For editing by hand, often yes: desaturating or darkening is one number instead of three, and a hue is something you can reason about. For anything generated — a scale, a gradient, an interpolated state — it is worse than it looks, because its lightness is not perceptual and evenly spaced numbers produce unevenly spaced colours. Use it where a person types it and OKLCH where a program computes it.
Does the conversion lose anything?
Not mathematically — HSL and RGB describe exactly the same set of colours and the mapping is reversible. Precision is lost in how the result is written: a whole-number hue and a tenth of a percent cannot distinguish every one of 16.7 million sRGB values, so two colours can print as the same HSL. The values here carry enough decimals to round-trip.
Why do two very different colours report the same hue?
Because hue records only the direction of a colour, not how much of it is there. rgb(255 0 0) and rgb(40 30 30) both sit at hue 0 and differ entirely in saturation and lightness. That separation is the point of HSL — one axis for which colour it is, two for how intense and how bright — and it is why a nearly grey colour can still report a confident-looking hue.