Hex To RGB

Hex to RGB

Type or paste a code into Hex colour: three, four, six or eight digits, with or without the #. You can also choose one with Pick a colour.

The box isn’t limited to hex. Paste rgb(), hsl() or any of the 148 CSS colour names and it’s read just the same. Type tomato, for example, and you get #ff6347 and every other row for that colour.

The results update as you type. You get the red, green and blue values, rgb(), rgba(), rgb() in percent, hsl(), the cleaned-up hex code, its short form if it has one, and the closest CSS colour name. For eight-digit codes you also get the opacity. A swatch shows how white and black text read on the colour.

Example

#e76f51, a warm orange:

That last pair is worth noticing. Orange buttons with white labels are everywhere, but at this shade white text only passes for large text. Black text passes AA.

Reading a hex code yourself

A six-digit code is three pairs: red, green, blue. Each pair is a number in base 16, where the letters a to f stand for 10 to 15. Multiply the first digit by 16 and add the second:

• e7 → 14 × 16 + 7 = 231
• 6f → 6 × 16 + 15 = 111
• 51 → 5 × 16 + 1 = 81

The conversion is exact in both directions. Every hex code is exactly one RGB colour, so nothing is lost or approximated.

Short codes

A three-digit code is shorthand, and each digit is doubled. #f80 means #ff8800, not #f80000. It’s a common mistake to think the missing digits are zeros. The notes spell out the expansion whenever you enter a short code.

Four-digit codes work the same way, with the fourth digit as opacity: #f80c is #ff8800cc.

Eight digits: the last pair is opacity

In an eight-digit code, the last two digits set opacity, from 00 (invisible) to ff (solid). #e76f51b3 is the same orange at b3, which is 179 out of 255, or 70.2%. The notes show which pair is the opacity and what percentage it means.

If you write CSS by hand, you’ll want these often:

Most of these are rounded, because 255 steps don’t divide evenly into percentages. 80 is really 50.2%, and b3 is 70.2%.

Android puts the opacity first. Android colour resources use #AARRGGBB, while CSS uses #RRGGBBAA. So #80000000 in an Android app is 50% black. In CSS, the same eight digits mean a dark red at 0% opacity, which is invisible. If a colour copied from an Android project disappears in the browser, this is almost always why. Move the first pair to the end.

Contrast for see-through colours

A translucent colour looks different depending on what’s behind it. The contrast ratios assume it sits on a white page.

At full strength, #e76f51 scores 3.09:1 with white text. At 70% (#e76f51b3), it blends into the white underneath and becomes a lighter salmon, rgb(238 154 133). White text drops to 2.19:1, which fails, while black rises to 9.60:1, which passes AAA. If your colour sits on a dark background instead, the real result will be different.

The grades follow WCAG 2: 7:1 for AAA, 4.5:1 for AA, 3:1 for large text only (at least 24px, or about 18.7px bold), and below that it fails.

Which row to copy

• Red, green, blue as plain numbers for design apps that have a separate field for each channel.
• rgba() when you plan to adjust the opacity. It always includes the alpha value, so it’s ready to edit.
• rgb() in percent for software that wants channels from 0 to 1, such as UIColor on iOS: divide by 100, so 90.6% becomes 0.906.
• hsl() for making lighter or darker shades: change the last number and keep the rest.
• Hex for the code cleaned up: lowercase, six or eight digits, # added. If you pasted rgb(), hsl() or a name, this is the hex code for it. Turn on Uppercase letters if your project writes #E76F51.

FAQ

Why does my code show an error?

A hex colour has 3, 4, 6 or 8 digits, using only 0–9 and a–f. The usual causes are a code with 5 or 7 digits, where one was lost or doubled when copying, or the letter O typed instead of a zero. The message lists the lengths that work, and the last valid colour stays on screen.

Is #E76F51 the same as #e76f51?

Yes. Hex codes aren’t case-sensitive.

Will this give the same answer as RGB to Hex?

Yes. RGB to Hex uses the same code to read and write colours, so converting there and back always matches. To find a colour visually, try the Wheel Color Picker.

Is anything sent to a server?

No. The conversion runs in your browser.