Colour Converter: What Separates HEX, RGB and HSL
HEX and RGB are the same numbers written in different bases. HSL is a different coordinate system altogether — which is why rounding it to whole numbers changes the colour, and why this tool shows a decimal place.
Colour on a screen is three brightnesses: red, green and blue. HEX and RGB are two notations for those same three numbers. #6366f1 is base 16 and rgb(99, 102, 241) is base 10, and they name exactly the same colour.
HSL is doing something else. It re-expresses that colour along three axes — hue, saturation, lightness — chosen so that human judgements like "a bit lighter" or "less intense" become simple moves.
Whole-number HSL has fewer boxes than there are colours
Writing HSL with integers shifts the colour slightly. Not because the formula is wrong — because of counting.
sRGB holds 16,777,216 colours. Hue 0–360, saturation 0–100% and lightness 0–100% as whole numbers give 3,682,561 combinations. There are 4.6 times more colours than boxes to put them in, so colours have to share boxes, and once two colours share one there is no way to tell which you started with.
Measured across the space, 89% of sRGB colours fail to return to themselves after a trip through integer HSL, drifting by up to five levels per channel. The difference is hard to see, but a converter showing you a HEX and an HSL that are not the same colour has failed at the one thing it exists to do.
So this tool prints HSL to one decimal place. At that precision a sweep of 636,056 colours produced zero round-trip error, and CSS accepts values like hsl(238.7, 83.5%, 66.7%) directly.
What each notation is for
| Notation | Example | What it is | Good for |
|---|---|---|---|
| HEX | #6366f1 | RGB in base 16 | Storing, passing between design tools |
| RGB | rgb(99, 102, 241) | Brightness per primary | When you need alpha |
| HSL | hsl(238.7, 83.5%, 66.7%) | Hue, saturation, lightness | Deriving variants, building colour scales |
When HSL earns its place
Say you have a button colour and need a darker version for the pressed state. In HEX there is no obvious answer about which digits to change or by how much. In HSL you drop the lightness by ten and you are done.
The same applies to building a scale of tints and shades. Hold hue and saturation, vary lightness, and the steps line up naturally. This is how most design-system colour ramps are generated.
One caveat: HSL lightness is not perceived brightness. Yellow at 50% lightness and blue at 50% lightness look nothing alike in brightness. For judging text against a background, use the contrast checker rather than the HSL numbers.
Greys have no hue
When saturation is zero the hue value means nothing — the colour leans in no direction at all. This tool reports hue as 0 in that case.
It also means near-greys have unstable hue. In a colour like rgb(128, 127, 126), changing one channel by one moves the hue a long way. Do not read meaning into the hue number when saturation is very low.
What you can do here
- •Paste any of the three notations and the others update to match.
- •Pick from the colour field and take all three notations at once.
- •Use the eyedropper, in browsers that support it, to lift any colour on your screen.
- •Read a ramp of lightness steps for the current hue and take the one you need.
Extended FAQ
Why does the HSL have a decimal?
Deliberately. Truncating to integers produces a different colour from the HEX beside it. CSS accepts fractional hsl() values, so you can copy it as it stands.
Another converter gives me slightly different HSL.
Almost always rounding. If it shows whole numbers, those numbers name a slightly different colour than the one you started with. Convert back to HEX in both and the difference is immediate.
What is three-digit HEX?
A shorthand where each digit is doubled, so #f00 means #ff0000. Only colours whose channels are made of repeated digits can be written that way.
How do I express transparency?
Eight-digit HEX (#rrggbbaa) or rgba(). What a transparent colour actually looks like depends on what is behind it, so check contrast against the composited result rather than the transparent value.
Are the colours I enter stored?
No. Everything is computed in your browser.