Color Picker — HEX, RGB & HSL Converter

Color formats

HEX — common in CSS and design tools
RGB — red/green/blue 0–255
HSL — hue, saturation, lightness

Three boxes showing one colour, and they are not equally faithful

Hex, RGB and HSL all describe the same colour here, and the swatch follows whichever you apply last. Hex and RGB are two ways of writing the same three bytes, so moving between them loses nothing. HSL is a different shape of the same space, and this page stores it rounded to whole numbers, which means it cannot always get back to where it started.

That asymmetry is the most useful thing to know about this tool, so it comes first.

Pressing Apply HSL can change your colour

The HSL boxes hold whole numbers: hue to the degree, saturation and lightness to the percent. There are 16,777,216 colours in 24-bit RGB and 360 × 101 × 101 whole-number HSL triples, so the rounding has to lose something. Measured, by setting a hex value and then pressing Apply HSL without touching any box:

#5b8cff becomes #5c8dff
#123456 becomes #123354
#abcdef becomes #a9ccef
#7f7f7f becomes #808080
#010203 becomes #010304
#fe01fd becomes #fe01fe

Six of the eight colours we tested moved. Only fully saturated values that sit exactly on an HSL grid point, such as #ff0000 and #00ff88, survived unchanged. The shifts are small, a value or two per channel, and they are permanent: the original is gone once you apply.

So treat the HSL boxes as a way to explore and the hex box as the record. Use HSL to find a colour you like, then copy the hex and work from that. If you need an exact brand colour to stay exact, do not press Apply HSL at all.

Setting saturation to zero destroys the hue permanently

A grey has no hue, so when saturation reaches zero there is nothing left to remember it by, and the hue box resets to 0. Measured:

#00ff88, which is hsl(152, 100%, 50%), with saturation set to 0 becomes #808080 at hsl(0, 0%, 50%). Putting saturation back to 100 gives #ff0000, which is red.
The same happens from blue and from orange. Every colour we tried came back red.

This is not a bug in the arithmetic, it is what greyscale means, and almost every HSL control behaves this way. It is worth stating because the sequence feels undoable and is not. Reach for the hex box to get back, not the saturation slider.

What each box accepts, measured

Hex. Six digits or three-digit shorthand, upper or lower case, with or without the leading hash. #abc, #ABCDEF and abcdef are all accepted. Eight-digit hex with an alpha channel, such as #12345678, is refused, as are CSS colour names like rebeccapurple. On a refusal the message reads “Invalid HEX. Use #RGB or #RRGGBB”, your invalid text stays in the box, and the swatch and the other fields keep the last good colour. The box and the swatch therefore disagree until you fix it.

RGB. Values outside 0 to 255 are clamped to the nearest end: 999 becomes 255, −5 becomes 0. Anything that is not a number, including an empty box, becomes 0. Decimals are rounded, so 91.6 becomes 92. That is worth noting because several other tools on this site truncate instead, and the two conventions disagree by one.

HSL. Hue is clamped before it is wrapped, which produces an answer you might not expect. 361 is first reduced to 360 and then wrapped to 0, and −30 is raised to 0, so both give red rather than the colours one degree past red and thirty degrees before it. Saturation and lightness clamp to 0 and 100.

There is no alpha channel anywhere in this tool, in any of the three notations.

HSL lightness is not brightness, and the gap is enormous

Lightness in HSL is a geometric position in a cylinder, not a measure of how bright a colour looks. Every fully saturated hue sits at 50% lightness, and they are nothing like each other to the eye. Measured by taking each colour from this page and its WCAG relative luminance:

hsl(60, 100%, 50%) is #ffff00, luminance 0.9278, which is 1.07:1 against white and 19.56:1 against black.
hsl(240, 100%, 50%) is #0000ff, luminance 0.0722, which is 8.59:1 against white and 2.44:1 against black.
hsl(120, 100%, 50%) is #00ff00, luminance 0.7152, 1.37:1 against white.
hsl(0, 100%, 50%) is #ff0000, luminance 0.2126, 4.00:1 against white.

Four colours with identical lightness numbers, spanning almost the whole contrast scale. The practical consequence: you cannot build an accessible palette by holding lightness constant and changing hue. Pick the colours here and then check each pair in Color Contrast Checker, which uses the luminance formula rather than the HSL cylinder.

What this tool deliberately does not do

It has no alpha channel, so it cannot describe a translucent colour in any notation.
It does not round-trip HSL exactly, because HSL is held as whole numbers.
It does not remember a hue through a grey, so saturation zero is a one-way door.
It does not accept CSS colour names, rgb() or hsl() function syntax, or any wide-gamut notation such as oklch() or lab(). Everything here is 8-bit sRGB.
It does not build palettes. No tints, shades, complements or harmonies, and no saved history.
It does not pick a colour off your screen. The native picker is limited to its own dialog.
It does not check contrast or colour blindness. Nothing here says whether two colours can be told apart.
Nothing is uploaded. The conversions run in your browser and no colour leaves your device.

Sources

How hsl() is defined over sRGB, and why lightness is a geometric coordinate rather than a measure of perceived brightness: CSS Color Module Level 4, W3C. w3.org/TR/css-color-4
The relative luminance definition used for the contrast figures above: WCAG 2.2 glossary, W3C Recommendation. w3.org/TR/WCAG22
Why the native swatch control offers no transparency and always yields six-digit hex: <input type="color">. developer.mozilla.org

Every behaviour and every value on this page was measured against this tool as it is published, in a browser, on 14 October 2026. The round-trip results come from applying each hex value and then pressing Apply HSL with no other change.

Frequently asked questions

Why did my colour change when I pressed Apply HSL?

Because the HSL boxes hold whole numbers and there are far more RGB colours than whole-number HSL triples, so the conversion back cannot always land where it started. Measured, #5b8cff comes back as #5c8dff and #abcdef as #a9ccef. Six of the eight colours we tested moved by a value or two per channel.

How do I avoid losing an exact brand colour?

Keep the hex as your record and do not press Apply HSL on it. Use the HSL boxes to explore, then take the hex of what you find. Hex and RGB convert between each other with no loss at all, so moving between those two is always safe.

I set saturation to 0 and now I cannot get my colour back.

You cannot, from the HSL boxes. A grey carries no hue, so the hue resets to 0 and raising saturation again gives red whatever you started from. Measured from green, blue and orange, all three came back red. Paste the original hex to recover.

Can I use a colour with transparency?

No. There is no alpha channel in the hex, RGB or HSL boxes, and eight-digit hex such as #12345678 is refused. The native swatch control has no transparency either.

I typed an invalid hex and the swatch did not change.

That is intended, though it does leave the two disagreeing. On an invalid value the message says “Invalid HEX. Use #RGB or #RRGGBB”, your text stays in the box so you can correct it, and the swatch and the other boxes keep the last colour that worked.

Why does hue 361 give me red instead of a near-red?

Because the value is clamped to the 0 to 360 range before it is wrapped, so 361 becomes 360 and then 0. A negative hue is raised to 0 the same way. Both give red rather than wrapping round the wheel.

Two colours have the same lightness, so why does one look so much brighter?

Because HSL lightness is a position in a cylinder, not a measure of brightness. Measured, yellow at hsl(60, 100%, 50%) and blue at hsl(240, 100%, 50%) share a lightness of 50% and have relative luminances of 0.9278 and 0.0722. Against white that is 1.07:1 and 8.59:1.

Can I build an accessible palette by keeping lightness fixed?

No, and the figures above are why. Holding lightness constant while changing hue produces colours that span nearly the whole contrast range. Choose here, then check every pair you intend to use in our Color Contrast Checker.

Color Picker & Converter