How to Convert HEX to RGB (and RGB to HEX) Step by Step

Your design file lists a color as #F4A261, but the API, canvas code or email template you are working on wants three numbers. Learning to convert HEX to RGB by hand takes a few minutes, and once it clicks you can read color codes at a glance, spot typos and write your own conversion helpers. This guide walks through the math in both directions with worked examples, covers 3-digit shorthand and 8-digit alpha codes, and ends with JavaScript you can paste into a project.

What a HEX Code Actually Contains

A HEX color is three numbers written in base 16 (hexadecimal) instead of base 10. Hexadecimal needs sixteen digits, so after 0–9 it uses letters for the values 10 to 15:

A 6-digit code like #F4A261 splits into three pairs: F4 for red, A2 for green and 61 for blue. Each pair runs from 00 (0) to FF (255), exactly the same range as an RGB channel. That is why the two formats are interchangeable: 256 values on each of three channels gives 16,777,216 possible colors in both. Because HEX and RGB both describe colors in the sRGB space, converting between them is lossless. For a wider overview of the formats, read HEX, RGB and HSL color codes explained.

How to Convert HEX to RGB by Hand

The rule for each pair is: first digit × 16 + second digit. The first digit is the "sixteens" place and the second is the "ones" place, just as the 4 in 42 is the tens place in decimal.

Worked example: #F4A261

1. Red, F4: F is 15, so 15 × 16 + 4 = 240 + 4 = 244.
2. Green, A2: A is 10, so 10 × 16 + 2 = 160 + 2 = 162.
3. Blue, 61: 6 × 16 + 1 = 96 + 1 = 97.

Result: #F4A261 = rgb(244, 162, 97), a warm sandy orange that sits very close to the CSS named color sandybrown.

Worked example: #1E90FF

1. Red, 1E: 1 × 16 + 14 = 30.
2. Green, 90: 9 × 16 + 0 = 144.
3. Blue, FF: 15 × 16 + 15 = 255.

Result: rgb(30, 144, 255), which is the named color dodgerblue. You can see why it reads as a bright blue: blue is maxed out, green is moderate and red is low. To check your own work, paste any code into the HEX to RGB converter, which shows the same pair-by-pair breakdown next to the final rgb() and rgba() values.

Shorthand 3-Digit HEX Codes

CSS lets you shorten a HEX code to three digits when each pair is made of two identical characters. The browser expands the shorthand by doubling every digit in place:

• #F80 becomes #FF8800
• #3C9 becomes #33CC99
• #FFF becomes #FFFFFF

Then convert as usual. For #F80: FF = 255, 88 = 8 × 16 + 8 = 136, and 00 = 0, so the result is rgb(255, 136, 0). There is a handy shortcut here: a doubled digit always equals that digit × 17, because d × 16 + d = d × 17. So 8 expands to 136 and C expands to 12 × 17 = 204.

A common mistake is reading #F80 as #F80000 or #0F0800. Neither is right; each digit doubles where it stands.

The RGB to HEX Formula

Going the other way, divide each channel by 16. The whole-number quotient becomes the first hex digit and the remainder becomes the second. Write any value from 10 to 15 as its letter.

Worked example: rgb(42, 157, 143)

1. Red, 42: 42 ÷ 16 = 2 remainder 10. 10 is A, so 2A.
2. Green, 157: 157 ÷ 16 = 9 remainder 13. 13 is D, so 9D.
3. Blue, 143: 143 ÷ 16 = 8 remainder 15. 15 is F, so 8F.

Result: rgb(42, 157, 143) = #2A9D8F, a muted teal.

Watch the leading zero

Values below 16 need a zero in front. For rgb(10, 132, 255): 10 ÷ 16 = 0 remainder 10, which gives 0A, not A. Then 132 ÷ 16 = 8 remainder 4 gives 84, and 255 gives FF. The answer is #0A84FF. Dropping the zero produces #A84FF, a 5-digit code that browsers reject as invalid.

A result can be shortened to three digits only when every channel is a multiple of 17. rgb(51, 204, 153) is #33CC99, so it can also be written #3C9. The RGB to HEX converter shows the shorthand automatically when one exists, along with the division steps for each channel.

Converting 8-Digit HEX With Alpha

An 8-digit code such as #1E90FFCC adds a fourth pair for alpha (transparency). Convert the first six digits exactly as before, then convert the alpha pair to decimal and divide by 255 to get the 0–1 value that rgba() expects:

• CC = 12 × 16 + 12 = 204
• 204 ÷ 255 = 0.8

So #1E90FFCC = rgba(30, 144, 255, 0.8). Going from rgba to HEX, multiply the alpha by 255, round, and convert: 0.8 × 255 = 204, which is CC. The 4-digit shorthand follows the same doubling rule, so #F808 expands to #FF880088. Our HEX color opacity guide has a full table of alpha values from 100% to 0%, and the HEX opacity calculator generates them for any color.

JavaScript Functions for Both Directions

HEX to RGB

This function accepts 3, 4, 6 or 8 digit codes, with or without the #, and returns the channels plus an alpha value from 0 to 1:

function hexToRgb(hex) {
  let h = hex.trim().replace(/^#/, '');

  // Expand shorthand: "F80" -> "FF8800", "F808" -> "FF880088"
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map((c) => c + c).join('');
  }

  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(h)) {
    throw new Error('Invalid HEX color: ' + hex);
  }

  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;

  return { r, g, b, a };
}

hexToRgb('#F4A261');   // { r: 244, g: 162, b: 97, a: 1 }
hexToRgb('#1E90FFCC'); // { r: 30, g: 144, b: 255, a: 0.8 }

parseInt(value, 16) performs the "first digit × 16 + second digit" step for you. The validation regex matters: without it, parseInt quietly returns partial numbers or NaN when a code contains a typo.

RGB to HEX

function rgbToHex(r, g, b) {
  const toHex = (n) => {
    const v = Math.max(0, Math.min(255, Math.round(n)));
    return v.toString(16).padStart(2, '0');
  };
  return ('#' + toHex(r) + toHex(g) + toHex(b)).toUpperCase();
}

rgbToHex(42, 157, 143); // "#2A9D8F"
rgbToHex(10, 132, 255); // "#0A84FF"

toString(16) does the divide-by-16 step, and padStart(2, '0') adds the leading zero that is so easy to forget by hand. Clamping and rounding protect you from values like 255.6 or -3 that can come out of color math. HEX is case-insensitive in CSS, so drop toUpperCase() if your codebase prefers lowercase.

Common Conversion Mistakes

• Swapping the digit order. 4F is 4 × 16 + 15 = 79, while F4 is 244. The first digit always carries the × 16 weight.
• Mixing up B and D. B is 11 and D is 13. In the first position, confusing them shifts a channel by 32.
• Putting alpha in the wrong place. CSS uses #RRGGBBAA, but Android uses #AARRGGBB, so the same eight characters describe different colors on each platform.
• Using 0–255 alpha in rgba(). rgba(30, 144, 255, 204) is not 80% opacity; browsers clamp any alpha above 1 to fully opaque. Divide by 255 first.
• Expecting perfect round trips through other formats. HEX to RGB is exact, but converting through HSL or CMYK with rounded values can shift a channel by a unit or two. Keep the original HEX or RGB as your source of truth instead of regenerating it.

Conclusion

To convert HEX to RGB, split the code into pairs and calculate first digit × 16 + second digit for each one. To go from RGB to HEX, divide each channel by 16, write down the quotient and remainder, and pad with a zero when needed. For everyday work, the HEX to RGB converter and RGB to HEX converter show every step, and the color code converter adds HSL, HSV and CMYK when you need every format at once.