Colour Converter — HEX, RGB and HSL
Read a colour however it is written — a hex code, an rgb() value or an hsl() value — and see all three notations at once, with a live swatch.
—
What this tool does
The same colour has at least three standard spellings, and different tools expect different
ones. A design file hands over a hex code, a stylesheet may use rgb(), and a
charting or theming library often wants hsl() so it can rotate the hue or build a
lighter tint. This tool reads whichever form you have and prints all three, so you never have to
translate by hand or open a full design application just to convert one value.
How the three notations relate
All three describe the same sRGB colour. Hex and RGB give the same information: the amount of
red, green and blue, each a whole number from 0 to 255. A six-digit hex code is simply those
three bytes written in base 16 — #4682b4 is 0x46, 0x82,
0xb4, which is 70, 130 and 180 in decimal. A three-digit code like
#f00 is shorthand that doubles each digit, so #f00 is
#ff0000.
HSL describes the same colour differently. The hue H is the position on the colour wheel in degrees — 0° red, 120° green, 240° blue. The saturation S and lightness L are percentages: saturation is how far the colour is from grey, and lightness runs from black (0%) through the full colour (50%) to white (100%). That is why HSL is convenient for building a palette: keeping H fixed and moving L up or down gives a consistent family of tints and shades.
Examples
| HEX | RGB | HSL |
|---|---|---|
#ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
#4682b4 | rgb(70, 130, 180) | hsl(210, 14%, 49%) |
#000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
#ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
Because HSL is displayed rounded, converting its rounded values back can land one step away on a channel. The hex and RGB columns above are exact.
Why the HSL figure is worth having
Suppose you need a darker border for a button that is #4682b4. In RGB you would have
to guess at three separate numbers. In HSL you can read the value as
hsl(210, 14%, 49%) and simply lower the lightness to 35% for a border and raise it to
65% for a hover tint — the hue stays put, so the family stays consistent. That is the whole
reason HSL exists alongside RGB, and it is the form most design systems store.
Frequently asked questions
What do HEX, RGB and HSL actually describe?
They are three ways of writing the same sRGB colour. HEX and RGB give the red, green and blue amounts directly (each 0–255). HSL re-describes that same mixture as a hue (0–360°), a saturation and a lightness, which is easier to reason about when you want a lighter tint or a colour rotated to a different hue.
Why does converting to HSL and back change the value by one?
HSL is shown rounded to whole degrees and whole percents so it is readable, and that rounding can shift a red, green or blue channel by up to one step when the value is converted back. The HEX and RGB forms are exact; treat the HSL figure as the readable description and copy the HEX or RGB when an exact value is needed.
Which input formats are accepted?
A three- or six-digit hex code with or without the # (#f00 or #ff0000), an rgb() or rgba() value with byte or percentage channels, and an hsl() or hsla() value with percentage saturation and lightness. Anything it cannot read is reported instead of guessed at.
Is the on-screen swatch the same on every device?
It is the standard sRGB interpretation of the value. A wide-gamut display or a colour profile can render the same number slightly differently, but the numeric value itself is unambiguous — and that is what you copy.
Can I pick a colour instead of typing one?
Yes. Use the colour field in the tool to choose visually; the hex code is written back into the text box and everything updates. Typing or pasting a code still works the same way.
Is anything uploaded?
No. The parsing and conversion are plain arithmetic in your browser; the colour never leaves your device.
Go deeper
Longer explanations of the problems this tool solves:
Sources
- CSS Color Module Level 4, W3C — the definitions of the
rgb(),hsl()and hex notations used here. w3.org/TR/css-color-4 - sRGB, IEC 61966-2-1 — the colour space these values are interpreted in.
Everything runs in your browser — nothing you type is uploaded.