HEX to RGB Converter

How to convert HEX to RGB

Converting HEX to RGB comes down to splitting the code into pairs and turning each pair from hexadecimal into decimal. The first pair is red, the second is green and the third is blue. Each pair runs from 00 to FF, which is 0 to 255.

#5271FF  →  52  71  FF
52 = 5 × 16 + 2   = 82
71 = 7 × 16 + 1   = 113
FF = 15 × 16 + 15 = 255
rgb(82 113 255)

The math for each pair is left digit × 16 + right digit. The digits A to F are worth 10 to 15 (A is 10, B is 11, C is 12, D is 13, E is 14 and F is 15), and the ASCII table lists every character with its code in decimal and hexadecimal. A second example, with a zero pair:

#FF8000  →  FF  80  00
FF = 255
80 = 8 × 16 + 0 = 128
00 = 0
rgb(255 128 0)

Since FF is the biggest possible pair, the biggest channel is 255, and 00 is always 0. You can even estimate it in your head: the first digit of each pair gives you most of the value. In 5271FF red is low (5), green is medium (7) and blue is maxed out (F), so the color is a strong blue.

3 and 4-digit HEX

Short HEX doubles each digit: #f00 is the same as #ff0000 and #abc becomes #aabbcc. You can only shorten a code when both digits of every pair match, so #5271FF has no short form.

#f00   →  #ff0000  →  rgb(255 0 0)
#abc   →  #aabbcc
#f008  →  #ff000088

With 4 digits the same rule applies, and the last digit is the transparency: #f008 is #ff000088. The format is valid CSS, but older code may not recognize it, so check before using it outside a stylesheet.

8-digit HEX and transparency

In 8-digit HEX the last pair is the alpha channel, which controls opacity: 00 is fully transparent and FF is fully opaque. To use it in rgba(), convert the pair to decimal and divide by 255.

#5271FF80  →  52  71  FF  80
80 = 8 × 16 + 0 = 128
128 ÷ 255 = 0.50196…  →  0.5
rgba(82, 113, 255, 0.5)
rgb(82 113 255 / 50%)

That is why 80 is only roughly 0.5: 128 ÷ 255 is 0.50196. The tool rounds to 2 decimal places and shows 0.5, which is what you would write in CSS.

rgb() and rgba() in current CSS

The current rgb() syntax separates the channels with spaces and puts the transparency after a slash: rgb(82 113 255 / 50%). The legacy one uses commas and the rgba() name: rgba(82, 113, 255, 0.5). Today both work with or without alpha. The tool shows both so you can copy the one your project uses.

color: rgb(82 113 255);
color: rgb(82 113 255 / 50%);
color: rgba(82, 113, 255, 0.5);

The support numbers come from MDN (browser-compat-data, checked on November 5, 2026): the space-separated syntax works since Chrome 65, Firefox 52 and Safari 12.1, and 4 and 8-digit HEX since Chrome 62, Firefox 49 and Safari 10. The syntax rules are in the W3C's CSS Color 4 specification, and usage docs are at rgb() on MDN and hex-color on MDN.

In practice, HEX is shorter for solid colors and is what design tools export. RGB with alpha keeps the transparency readable (50% instead of 80) and is easier to compute in JavaScript. The color on screen is the same either way.

Convert HEX to RGB in code

In JavaScript, parseInt(pair, 16) converts each pair. The function below accepts 3, 4, 6 and 8 digits, with or without the #:

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

  if (digits.length <= 4) {
    digits = [...digits].map((digit) => digit + digit).join("");
  }

  if (![6, 8].includes(digits.length) || /[^0-9a-f]/i.test(digits)) {
    return null;
  }

  const [r, g, b, a = 255] = digits
    .match(/../g)
    .map((pair) => parseInt(pair, 16));

  return { r, g, b, a: Math.round((a / 255) * 100) / 100 };
}

hexToRgb("#5271FF");   // { r: 82, g: 113, b: 255, a: 1 }
hexToRgb("#f008");     // { r: 255, g: 0, b: 0, a: 0.53 }

In Python, int(pair, 16) converts one pair, and bytes.fromhex converts the whole code at once:

def hex_to_rgb(value: str) -> tuple[int, ...]:
    digits = value.lstrip("#")

    if len(digits) in (3, 4):
        digits = "".join(digit * 2 for digit in digits)

    return tuple(bytes.fromhex(digits))

hex_to_rgb("#5271FF")   # (82, 113, 255)
hex_to_rgb("#5271FF80") # (82, 113, 255, 128)
int("52", 16)           # 82

Validate before converting. Without a check, parseInt('zz', 16) returns NaN and the error only shows up later, when the color turns into rgb(NaN NaN NaN) in your CSS.

Common mistakes when pasting HEX

When a conversion fails, it is almost always one of these:

• Too many or too few digits. A 5 or 7-digit HEX does not exist, only 3, 4, 6 and 8 are valid. It is usually a digit that got lost or added in the copy and paste.
• A letter outside A-F. #G00 is not HEX, and the letter O in place of a zero (#FF0O00) is a classic.
• A color that looks different after converting. The number is right, but the design tool works in another color profile (like Display P3) and the browser shows sRGB. The conversion itself loses nothing.

Basic colors in HEX and RGB

The 16 basic CSS colors, with the HEX and RGB of each one. Click a row to load the color into the tool.