HEX to RGB Converter
A hex colour is three pairs of hexadecimal digits, one per channel: split it and convert each pair from base 16 to base 10. FF5733 becomes rgb(255, 87, 51), because FF is 255, 57 is 87 and 33 is 51. The converter shows that pair, plus hsl(11, 100%, 60%) and a --color: #FF5733; CSS variable, and works in both directions.
Color Formats
Contrast Checker
Complementary Color
About HEX to RGB Converter
This converter reads a colour in one notation and prints it in four. Type six hex digits into the HEX colour box and the R, G and B tiles update as you type; switch to the RGB fields and edit any channel and the hex string is rebuilt; switch to HSL and the hue, saturation and lightness sliders drive both of the others. Nothing has to be pressed, and the Colour formats panel below carries a copy button for each of the four strings: #FF5733, rgb(255, 87, 51), hsl(11, 100%, 60%) and --color: #FF5733;.
The arithmetic is a base conversion, not an approximation. Each channel is one byte written as two hex digits, so it runs from 00 to FF, which is 0 to 255 in decimal. FF5733 splits into FF = 255, 57 = 87 and 33 = 51. Values are clamped: an RGB channel above 255 or below 0 is pulled back into range, and a hex string shorter than six characters is padded with zeros rather than rejected, so a half-typed code still produces a colour.
Two panels go beyond the conversion. The contrast checker computes the ratio of the current colour against white and against black and labels each with its WCAG grade: FF5733 scores 3.15:1 on white text, which is AA Large only, and 6.66:1 on black text, which is AA. The complementary colour panel gives the opposite hue on the wheel — #00A8CC for FF5733, #FF00FF for pure green.
What it does not do: it never touches CMYK, because converting to CMYK depends on an ink and paper profile that a web page cannot know, and it handles opaque colours only, so RGBA and eight-digit hex are out of scope. Everything runs in your browser.
Use Cases
How to use
Type or paste six hexadecimal digits into the HEX colour box. The hash is optional and short input is padded with zeros.
Read the R, G and B tiles, which update as you type, and the swatch that shows the colour itself.
To go the other way, switch to the RGB fields and set R, G and B from 0 to 255; the hex string is rebuilt beneath them.
Use the HSL fields for hue from 0 to 360, saturation and lightness from 0 to 100, when you want to shift a colour rather than replace it.
Open the Colour formats panel and press the copy button on the line you need: HEX, RGB, HSL or the CSS variable.
Check the contrast panel for the ratio against white and black with the WCAG grade, and the complementary panel for the opposite hue.
Pro Tips
- The hex box takes six characters and pads short input with zeros rather than refusing it, so FF becomes FF0000 and shows red. Type all six digits before reading the result.
- You do not need the leading hash. The field strips it, and the Colour formats panel adds it back in the HEX line, so pasting #FF5733 and FF5733 give the same answer.
- The RGB fields clamp rather than warn: enter 300 in R and it becomes 255 when the value is applied. If a channel looks wrong, check that it was inside 0-255 to begin with.
- Read both contrast figures, not one. A colour can pass against black and fail against white, as FF5733 does at 6.66:1 and 3.15:1, and the label you put on it decides which one matters.
- The CSS Variable line is ready to paste into a :root block. Copy it, rename --color to something meaningful, and the same value drives every rule that references it.
Troubleshooting
A short hex code shows the wrong colour.
The field pads anything shorter than six characters with zeros instead of waiting: F00 is read as F00000, not as the three-digit shorthand for red. Type all six digits — FF0000 — and the R, G and B tiles will show 255, 0, 0.
An RGB value I typed changed by itself.
Each channel is clamped to 0-255 when it is applied, because that is the whole range one byte can hold. A 300 becomes 255 and a negative becomes 0. Check the number you meant, and remember that percentages are not accepted here — use the HSL fields for those.
I need CMYK values and cannot find them.
This converter does not produce CMYK, and no browser tool can do it reliably: the conversion depends on the ink set, the paper and the colour profile your printer uses. Take the hex or RGB value here into your design application and convert it there against the right profile.
Frequently Asked Questions
Split the six digits into three pairs and read each pair as a base-16 number. FF5733 gives FF = 255, 57 = 87 and 33 = 51, so it is rgb(255, 87, 51). Type the code into the HEX colour box here and the three channel tiles show those numbers immediately, with a copyable rgb() string in the formats panel.
rgb(0, 255, 0), pure green: the red and blue pairs are both 00 and the green pair is FF, the maximum for one byte. In HSL the same colour is hsl(120, 100%, 50%). Its contrast against black is 15.30:1, an easy WCAG AAA pass, while white text on it manages only 1.37:1.
It is rgb(255, 0, 0), pure red, because FF is 255 and each 00 is zero. The tool also gives hsl(0, 100%, 50%) and the CSS variable line. Its contrast is 4.00:1 against white and 5.25:1 against black, so white text on red only reaches AA for large sizes.
A mid grey: rgb(153, 153, 153), since 99 in hexadecimal is 153 and all three channels are equal. Equal channels always mean a neutral, which is why its HSL is hsl(0, 0%, 60%) with zero saturation. It fails against white text at 2.85:1 but reaches AAA against black at 7.37:1.
They describe the same three channels, just written differently: hex uses two base-16 digits per channel, RGB uses a decimal number from 0 to 255. Neither carries any extra information, which is why this converter can move between them exactly, with no rounding at all.
For an opaque colour they are equivalent and hex is shorter, which is why stylesheets tend to use it. Prefer rgb() when you need to build a value from separate channels, and remember that CSS also accepts an alpha channel in both notations. HSL is the better choice when you want to derive lighter or darker variants of one hue.
R = the first two digits in base 16, G = the middle two, B = the last two. In JavaScript that is parseInt(hex.slice(0,2), 16) and so on for the other pairs; in Python, int(hex[0:2], 16). Going back the other way, each channel is converted with toString(16) and padded to two digits.
In Python, tuple(int(h[i:i+2], 16) for i in (0, 2, 4)) with h as the six-character string. In JavaScript, [0, 2, 4].map(i => parseInt(hex.substr(i, 2), 16)). Both produce the same three numbers this page shows, since the conversion is exact and has no rounding step.
No, and be sceptical of any web tool that says it can. RGB is light and CMYK is ink, so the mapping depends on the press, the paper and the colour profile in use. Convert here to get exact RGB or HSL, then let your design application handle CMYK against the profile you will actually print with.
Not in this converter: it works with six-digit hex and opaque RGB. For transparency, take the rgb() string it gives you and add the alpha yourself, as rgba(255, 87, 51, 0.5), or append two hex digits for an eight-digit code. The channel values are the same either way.