RGB to HEX: How to Convert RGB to Hex (Formula + Examples)

Three steps turn any RGB triplet into a six-digit hex code. Here is the formula done by hand, then in the three languages you will actually use.

To convert RGB to hex, convert each channel (0 to 255) into a two-digit hexadecimal number and join them. rgb(255, 87, 51) becomes #ff5733 because 255 is ff, 87 is 57, and 51 is 33 in hexadecimal. Pad any single-digit result with a leading zero, so rgb(0, 10, 200) becomes #000ac8.

The 3-step formula

An RGB color is three numbers, one each for red, green, and blue, each from 0 to 255. A hex code is those same three numbers written in hexadecimal (base 16), two digits per channel. The conversion is three steps:

  1. Convert the red value to hexadecimal.
  2. Convert the green value to hexadecimal.
  3. Convert the blue value to hexadecimal, then join all three with a # in front.

To convert a decimal number to hexadecimal by hand, divide by 16. The quotient gives the first digit, the remainder gives the second. For example, 255 divided by 16 is 15 remainder 15, and 15 in hexadecimal is f, so 255 becomes ff. For 87: 87 divided by 16 is 5 remainder 7, so 87 becomes 57. For 51: 51 divided by 16 is 3 remainder 3, so 51 becomes 33.

Now the full example. Take rgb(255, 87, 51): red 255 becomes ff, green 87 becomes 57, blue 51 becomes 33. Joined together with the hash sign, the hex code is #ff5733. That is a warm orange-red, and it is the same color you would write in CSS as rgb(255, 87, 51).

The leading-zero rule

Every channel must be exactly two hex digits, so values under 16 get a leading zero. Take rgb(46, 134, 193): 46 divided by 16 is 2 remainder 14, and 14 in hexadecimal is e, so 46 becomes 2e. 134 divided by 16 is 8 remainder 6, so 134 becomes 86. 193 divided by 16 is 12 remainder 1, and 12 in hexadecimal is c, so 193 becomes c1. The hex code is #2e86c1, a steel blue.

Skip the padding and you get broken colors. rgb(0, 10, 200) converts to 00, 0a, and c8. Without the leading zero on the green channel, you would write #0ac8, which is four digits and not a valid six-digit hex code. Always pad to two digits: #000ac8 is correct.

Edge cases that teach the pattern

Three special values are worth memorizing because they show the whole system at work. Black is rgb(0, 0, 0), and 0 in hexadecimal is 00, so black is #000000. White is rgb(255, 255, 255), and 255 is ff, so white is #ffffff. Pure red is rgb(255, 0, 0), which is ff for red and 00 for the rest: #ff0000. Notice the rule in action: the channel with the light is high, the channels without are 00.

RGBA to hex: adding the alpha channel

When you need transparency, RGBA adds a fourth value, the alpha, from 0 (fully transparent) to 1 (fully opaque). The hex equivalent is an 8-digit code with two extra digits for alpha. Multiply the alpha by 255 and convert to hex, with the same two-digit padding.

Take rgba(255, 87, 51, 0.5), our orange-red at half opacity. The color channels convert exactly as before: ff, 57, 33. The alpha: 0.5 times 255 is 127.5, which rounds to 128, and 128 divided by 16 is 8 remainder 0, so 128 becomes 80. The full 8-digit hex is #ff573380. Full opacity (alpha 1) gives 255, which is ff, so rgba(255, 87, 51, 1) is simply #ff5733ff.

Converting back: hex to RGB

The reverse direction uses the same steps in reverse order. Split the six digits into three pairs and convert each pair from hexadecimal to decimal. For #2e86c1: the red pair 2e is 2 times 16 plus 14, which is 46. The green pair 86 is 8 times 16 plus 6, which is 134. The blue pair c1 is 12 times 16 plus 1, which is 193. So #2e86c1 is rgb(46, 134, 193), the steel blue from the previous section.

One more, to lock in the pattern: #ff0000 splits into ff, 00, 00, which is 255, 0, 0, or rgb(255, 0, 0), pure red. Once you can go both directions, you can read any color value you meet in code, stylesheets, or design files without reaching for a tool.

In code: JavaScript, Python, Excel

function rgbToHex(r, g, b) { return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join(''); }

In Python, the :02x format specifier does the padding for you:

hex_code = f'#{r:02x}{g:02x}{b:02x}'

In Excel or Google Sheets, with the red value in cell A1, use DEC2HEX with 2 places: =DEC2HEX(A1,2)&DEC2HEX(B1,2)&DEC2HEX(C1,2), then add the # in front. The 2 in the second argument is the leading-zero padding, so do not leave it out.

When you need the reverse

Going the other direction, hex to RGB, uses the same steps in reverse: split the six digits into three pairs and convert each pair from hexadecimal to decimal. If you just need the answer without the hand math, the free color converter translates RGB to hex and hex to RGB instantly, and it also explains what each format means in our hex color code guide.

Frequently asked questions

How do you convert RGB to hex?

Convert each channel (red, green, blue, each 0 to 255) to a two-digit hexadecimal number and join them with a # in front. rgb(255, 87, 51) becomes #ff5733 because 255 is ff, 87 is 57, and 51 is 33 in hexadecimal. Pad any single-digit result with a leading zero.

What is the hex code for rgb(255, 87, 51)?

The hex code is #ff5733. Red 255 converts to ff, green 87 converts to 57, and blue 51 converts to 33.

Why does my hex code have a zero at the start of a channel?

Each channel must be exactly two hexadecimal digits, so values below 16 get a leading zero. rgb(0, 10, 200) becomes #000ac8, not #0ac8, because the green channel 10 converts to 0a, not a.

How do I convert RGBA to hex with transparency?

Convert the three color channels as usual, then multiply the alpha (0 to 1) by 255 and convert that to two hex digits. rgba(255, 87, 51, 0.5) becomes #ff573380, where the trailing 80 is the half-opacity alpha.

How do I convert RGB to hex in JavaScript?

Use v.toString(16).padStart(2, '0') on each channel and join them: '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join(''). The padStart call is what keeps the leading zeros correct.

Skip the hand math. The free color converter translates HEX, RGB, and HSL instantly, with a live preview, click-to-copy values, and auto-generated tints and shades.

Try the free color converter