How to Convert HEX to RGB (and Back): Formula, Chart and Examples

By Abdur RehmanNovember 1, 20263 min read🖨 Print

Quick answer: a HEX color like #4F46E5 is three pairs of hexadecimal digits — red 4F, green 46, blue E5. Convert each pair to a number from 0 to 255 to get RGB: 4F = 79, 46 = 70, E5 = 229, so #4F46E5 = rgb(79, 70, 229). Type any code in the converter below to get HEX, RGB, HSL, HSV and CMYK at once.

HEX and RGB are two ways of writing the same thing: how much red, green and blue light makes up a color on screen. Designers often get a HEX code from a brand guide or Figma, then need RGB for a slide deck, an app, or CSS with transparency. Here's how the conversion works.

How hexadecimal digits work

Hexadecimal is base 16. It uses the digits 0–9 and then the letters A–F for the values 10 to 15:

A two-digit hex number is (first digit × 16) + second digit. The lowest, 00, is 0 and the highest, FF, is 15 × 16 + 15 = 255 — exactly the range of one RGB channel.

How to convert HEX to RGB by hand

Take #FF5733:

1. Split it into pairs: FF · 57 · 33.
2. Red: F = 15, so 15 × 16 + 15 = 255.
3. Green: 5 × 16 + 7 = 87.
4. Blue: 3 × 16 + 3 = 51.

So #FF5733 = rgb(255, 87, 51), a bright orange-red.

How to convert RGB to HEX

Reverse the process. For each channel, divide by 16: the whole number is the first hex digit and the remainder is the second.

• Red 79 → 79 ÷ 16 = 4 remainder 15 → 4F
• Green 70 → 4 remainder 6 → 46
• Blue 229 → 14 remainder 5 → E5

Result: #4F46E5.

HEX to RGB chart for common colors

3-digit and 8-digit hex codes

• 3-digit shorthand: each digit is doubled. #FFF = #FFFFFF; #F0C = #FF00CC = rgb(255, 0, 204).
• 8-digit hex (#RRGGBBAA): the last pair is opacity, from 00 (invisible) to FF (solid). 80 = 128 ÷ 255 ≈ 50%, so #4F46E580 = rgba(79, 70, 229, 0.5).

HEX to RGB in code

CSS accepts both, so you can write the same color either way:

color: #4F46E5;
color: rgb(79 70 229);
color: rgb(79 70 229 / 50%); /* with 50% opacity */

JavaScript:

const hexToRgb = hex => {
  const h = hex.replace('#', '');
  return [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16));
};
hexToRgb('#4F46E5'); // [79, 70, 229]

Python:

def hex_to_rgb(h):
    h = h.lstrip('#')
    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))

hex_to_rgb('#4F46E5')  # (79, 70, 229)

Excel: with the hex code (without #) in A1, =HEX2DEC(MID(A1,1,2)), =HEX2DEC(MID(A1,3,2)) and =HEX2DEC(MID(A1,5,2)) give red, green and blue.

Beyond RGB: HSL and CMYK

HSL (hue, saturation, lightness) is easier for adjusting colors — to make a lighter tint, just raise the lightness. CMYK is for print; screen colors converted to CMYK may look duller on paper, so ask your printer for a proof. The color picker & converter shows all of these, plus tints, shades and a WCAG contrast check so your text stays readable.

Need a full set of matching colors? The color palette generator builds harmonious palettes from one base color, and the image color picker pulls exact HEX codes from any photo or screenshot.

Frequently asked questions

Written by Abdur Rehman

ERP developer and AI & automation engineer who builds and maintains every tool on WebToolNest. More about me.