How to Convert RGB to Hex (With Worked Examples)

An RGB value like rgb(59, 130, 246) and a hex code like #3b82f6 are the same color written in two number systems. RGB gives the red, green and blue channels as ordinary decimal numbers from 0 to 255; hex writes each of those numbers as two base-16 digits and runs them together. Turning RGB into hex is a small piece of division, it never changes the color, and once you have done it a few times you can do it in your head.

If you only need the result, type the three channel values into the RGB to Hex converter. It shows the hex code, the matching CSS rgb() string and a live swatch as you type. The rest of this guide explains the arithmetic, so you can check a value, convert one without a tool, or deal with inputs that are not plain whole numbers.

Why two hex digits per channel

Each RGB channel is one byte: a whole number from 0 to 255, which is 256 possible values. Base 16 uses sixteen symbols - 0 to 9, then a = 10, b = 11, c = 12, d = 13, e = 14 and f = 15 - so two hex digits can count from 00 to ff, which is 0 to 255. One channel fits exactly into two hex digits, never more and never fewer. A full color is therefore six digits: two for red, two for green, two for blue, always in that order, with a # in front.

The conversion, step by step

1. Take one channel, for example red.
2. Divide it by 16. The whole-number part of the answer is the first hex digit.
3. The remainder (0-15) is the second hex digit.
4. Write any value from 10 to 15 as its letter, a to f.
5. Repeat for green and blue, then join the three pairs after a #.

Worked example with rgb(59, 130, 246), a common interface blue:

• Red: 59 / 16 = 3 remainder 11. 3 stays 3 and 11 becomes b, so 3b.
• Green: 130 / 16 = 8 remainder 2, so 82.
• Blue: 246 / 16 = 15 remainder 6. 15 becomes f, so f6.

Joined together that is #3b82f6. Check it by reversing: 3 x 16 + 11 = 59, 8 x 16 + 2 = 130 and 15 x 16 + 6 = 246. Two more to practise on: rgb(255, 99, 71) gives ff (15 r 15), 63 (6 r 3) and 47 (4 r 7), so #ff6347, the CSS color tomato. rgb(34, 139, 34) gives 22, 8b (8 r 11) and 22, so #228b22, forest green.

Always keep the leading zero

Any channel below 16 has a first digit of 0, and that zero must be written. rgb(9, 130, 246) is #0982f6: red is 9 / 16 = 0 remainder 9, so 09. If you drop the zero you get #982f6, which has five digits and is not a valid color at all, or, worse, gets read as a different one. The same goes for 0 itself, which is 00, so pure red rgb(255, 0, 0) is #ff0000. The converter pads every channel to two digits for you.

Shortening to three digits

CSS accepts a three-digit shorthand when every pair is a doubled character: #ff6600 can be written #f60, and #aabbcc as #abc. It only works when all three pairs double - #3b82f6 has no short form. A quick way to spot it from the RGB side: a channel shortens only when it is a multiple of 17 (0, 17, 34 ... 255), because 17 in hex is 11, and 2 x 17 = 34 is 22, 12 x 17 = 204 is cc, and so on. rgb(255, 102, 0) is 15 x 17, 6 x 17 and 0, so it shortens to #f60. Shorthand is purely a way of writing the code; the color is identical. The tool always outputs the full six-digit form, which works everywhere.

Adding transparency (rgba to 8-digit hex)

rgba() adds a fourth value, alpha, as a number from 0 (invisible) to 1 (solid). Hex can carry it too, as a fourth pair: #RRGGBBAA. Our converter handles the three color channels only, so do alpha by hand:

1. Convert red, green and blue exactly as above.
2. Multiply the alpha by 255 and round to a whole number.
3. Convert that number to two hex digits and add it on the end.

Example: rgba(59, 130, 246, 0.8). The color is #3b82f6 as before. 0.8 x 255 = 204, which is cc, so the result is #3b82f6cc. At 0.25 opacity, 0.25 x 255 = 63.75, which rounds to 64, or 40 in hex: #3b82f640. That rounding is why an alpha converted to hex and back can come out as 0.251 rather than exactly 0.25 - there are only 256 steps to choose from.

Inputs that are not whole numbers from 0 to 255

• Percentages. rgb(100%, 50%, 0%) is legal CSS. Multiply each percentage by 2.55 and round: 100% is 255 and 0% is 0, while 50% works out to 127.5, which rounds to 128, or 80 in hex.
• Decimals. A channel such as 59.6, often produced by a color calculation or an image tool, must be rounded first - 59.6 becomes 60, which is 3c. The converter only accepts whole numbers, so round before you type.
• Out-of-range values. Anything below 0 or above 255 is not a valid channel. Browsers quietly clamp rgb(300, 0, 0) to 255; the converter shows an error instead, so you notice the bad value rather than getting a color you did not intend.
• The space-separated syntax. Newer CSS writes rgb(59 130 246) or rgb(59 130 246 / 80%). The numbers are the same; only the commas are gone. Pull out the three channel values and convert them as usual.

Upper or lower case?

Hex digits are case-insensitive: #3B82F6 and #3b82f6 are the same color in every browser and design tool. Lowercase is the more common convention in style sheets and is what the converter prints; many brand guidelines use uppercase. Pick one and stay consistent so codes are easy to search for.

Going the other way

Reversing the process is multiplication: first digit x 16 plus second digit. The companion guide How to Convert Hex to RGB covers it in detail, and the Hex to RGB converter does it instantly. If you also need HSL, or you are not sure which format you have been given, the color converter accepts hex, rgb() or hsl() and shows them all at once.

Convert an RGB value now

Enter red, green and blue into the RGB to Hex converter to get the hex code, the rgb() string and a live preview. Everything runs in your browser - nothing is uploaded and there is no sign-up.