How to Convert Hex to RGB (With Worked Examples)

A hex color code like #3b82f6 and an RGB value like rgb(59, 130, 246) are the same color written two ways. Both describe how much red, green and blue light to mix, on a scale from 0 to 255. Hex packs the three numbers into six characters of base-16; RGB spells them out in ordinary decimal. Converting between them is pure arithmetic - no color science, no rounding, and nothing lost in either direction.

If you just need the answer, paste the code into the Hex to RGB converter and it shows the rgb() value, each channel on its own line and a live swatch. The rest of this guide shows how the conversion works, so you can do it in your head, check a value, or handle the formats a simple converter will not accept.

What a hex code is made of

Strip the # and a six-digit hex code is three pairs of characters: the first pair is red, the second green, the third blue. #3b82f6 splits into 3b, 82 and f6.

Each pair is a two-digit number in base 16. Base 16 needs sixteen symbols, so after 0-9 it borrows letters: a = 10, b = 11, c = 12, d = 13, e = 14 and f = 15. Case does not matter - #3B82F6 and #3b82f6 are the same color. Two hex digits can count from 00 to ff, which is 0 to 255 in decimal: exactly the range of one RGB channel. That is why hex and RGB map onto each other perfectly.

The conversion, step by step

To turn one pair into a decimal number, multiply the first digit by 16 and add the second:

1. Drop the # and split the code into three pairs: RR, GG, BB.
2. Replace any letters with their values (a = 10 through f = 15).
3. For each pair, compute first digit x 16 + second digit.
4. Write the three results as rgb(R, G, B).

Worked example with #3b82f6, a common interface blue:

• Red: 3b = 3 x 16 + 11 = 48 + 11 = 59
• Green: 82 = 8 x 16 + 2 = 128 + 2 = 130
• Blue: f6 = 15 x 16 + 6 = 240 + 6 = 246

So #3b82f6 is rgb(59, 130, 246). One more to check your method: #ff6347 (the CSS named color tomato) gives ff = 15 x 16 + 15 = 255, 63 = 6 x 16 + 3 = 99 and 47 = 4 x 16 + 7 = 71, so rgb(255, 99, 71).

A few pairs are worth memorising because they come up constantly: 00 is 0, 80 is 128 (the halfway point), cc is 204, and ff is 255. That is enough to read #ffffff as white, #000000 as black, #808080 as mid-grey and #ff0000 as pure red at a glance.

Three-digit shorthand

CSS lets you shorten a hex code to three digits when each pair is a repeated character. To expand it, double every digit: #abc becomes #aabbcc, and #f60 becomes #ff6600. Then convert as usual - #abc is rgb(170, 187, 204), because aa = 10 x 16 + 10 = 170, bb = 187 and cc = 204.

The common mistake is padding with zeros instead of doubling. #abc is not #a0b0c0; that is a different, darker color. The converter accepts both the three-digit and six-digit forms, with or without the #, and expands shorthand by doubling.

Hex codes with transparency (8 digits)

Modern CSS also accepts an eight-digit form, #RRGGBBAA, where the last pair is alpha (opacity), plus a four-digit shorthand #RGBA. Our Hex to RGB tool only reads the three- and six-digit forms, so for these do the alpha pair by hand:

1. Convert the first six digits exactly as above.
2. Convert the last pair to decimal the same way (0-255).
3. Divide it by 255 to get an opacity between 0 and 1.

Example: #3b82f680. The color part is rgb(59, 130, 246) as before. The alpha pair 80 is 128, and 128 / 255 = 0.502, so the result is rgba(59, 130, 246, 0.5). Going the other way, 50% opacity is 0.5 x 255 = 127.5, which rounds to 128, or 80 in hex. Because 255 does not divide evenly by 100, some percentages cannot be hit exactly in hex alpha, which is why an opacity that looks round in one format looks slightly ragged in the other.

Going back: RGB to hex

The reverse is division instead of multiplication. Divide each channel by 16: the whole-number result is the first hex digit and the remainder is the second. For 246, 246 / 16 = 15 remainder 6, giving f6. Always write two digits per channel - 9 must become 09, not 9, or the whole code shifts and turns into a different color. The RGB to Hex converter does this for you, and the color converter takes hex, rgb() or hsl() and shows all three at once.

When you need RGB instead of hex

In a plain CSS color property the two are interchangeable, so the choice is mostly habit. RGB is the better fit when:

• You want transparency with a readable syntax - rgba(59, 130, 246, 0.5), or the newer rgb(59 130 246 / 50%).
• You are adjusting a color in code, where three numbers are easier to lighten, darken or animate than a string.
• A design tool, charting library or game engine asks for separate red, green and blue fields.
• You are working with image data, where every pixel is already stored as R, G, B (and A) bytes.

Hex wins where a compact, copy-pasteable token matters: brand guidelines, design handoff and style sheets.

Common errors

• Wrong number of digits. A hex color has 3, 4, 6 or 8 digits. Five or seven means a character was lost or added when copying.
• Letters beyond f. Only 0-9 and a-f are valid, so a stray g or o (often a mistyped 0) makes the code invalid.
• Reading the pairs in the wrong order. Hex in CSS is always red, green, blue - never BGR.
• Dropping a leading zero when converting back. rgb(9, 130, 246) is #0982f6, not #982f6 - the short version is a different, invalid code.

Convert a hex code now

Type or paste any three- or six-digit code into the Hex to RGB converter to get the rgb() value and a live preview swatch. It runs entirely in your browser, with nothing uploaded and no sign-up.