Hex to RGB Converter: Formula, Code, and Quick Reference Table

Hex and RGB describe the same colors in different notation. Hex uses a six-character string (#FF5733). RGB uses three decimal values (255, 87, 51). Designers work in hex because it is compact. Programmers often need RGB because APIs, image libraries, and color math expect numeric channels. Converting between them is pure math — no color space transformation, no gamut mapping, no perceptual adjustments.

If you need to convert image formats instead of color codes, Pixotter's converter handles it in your browser with no uploads.

How Hex Color Codes Work

A hex color code is a base-16 representation of three 8-bit color channels: red, green, and blue. The format is #RRGGBB, where each pair of characters encodes one channel.

#FF5733
 ^^ ^^ ^^
 |  |  |
 |  |  └── Blue:  0x33 = 51
 |  └───── Green: 0x57 = 87
 └──────── Red:   0xFF = 255

Each channel ranges from 00 (0) to FF (255). #000000 is black (all channels zero). #FFFFFF is white (all channels at maximum). #FF0000 is pure red, #00FF00 pure green, #0000FF pure blue.

Shorthand Hex

CSS supports 3-character shorthand: #F53 expands to #FF5533 by doubling each character. This is a CSS convenience, not a different color system. The expanded form is what browsers actually use.

8-Digit Hex (Alpha)

Some systems use #RRGGBBAA to include an alpha (opacity) channel. #FF573380 means the same color at 50% opacity. CSS supports this natively. Not all tools do — if you paste an 8-digit hex into a tool that expects 6, you will get unexpected results.

The Conversion Formula

The math is straightforward: split the hex string into three pairs, convert each pair from base-16 to base-10.

R = parseInt(hex[1..2], 16)
G = parseInt(hex[3..4], 16)
B = parseInt(hex[5..6], 16)

Example: #1A8FE3

• Red: 1A → (1 × 16) + (10 × 1) = 26
• Green: 8F → (8 × 16) + (15 × 1) = 143
• Blue: E3 → (14 × 16) + (3 × 1) = 227

Result: rgb(26, 143, 227)

The reverse (RGB to hex) pads each decimal value to a two-character hex string:

hex = "#" + R.toString(16).padStart(2, "0")
          + G.toString(16).padStart(2, "0")
          + B.toString(16).padStart(2, "0")

Method 1: JavaScript (Browser or Node.js)

// Node.js 20.x / any modern browser
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  if (!result) return null;
  return {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16),
  };
}

console.log(hexToRgb("#FF5733"));
// { r: 255, g: 87, b: 51 }

This handles both #FF5733 and FF5733 (with or without the hash). For shorthand expansion, add a preprocessing step:

function expandShorthand(hex) {
  const match = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(hex);
  if (!match) return hex;
  return `#${match[1]}${match[1]}${match[2]}${match[2]}${match[3]}${match[3]}`;
}

Method 2: Python (v3.12)

def hex_to_rgb(hex_color: str) -> tuple[int, int, int]:
    hex_color = hex_color.lstrip("#")
    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))

print(hex_to_rgb("#FF5733"))
# (255, 87, 51)

Python's int(string, 16) handles the base conversion. For batch processing, Pillow (v10.3.0) uses RGB tuples natively:

from PIL import Image  # Pillow 10.3.0

color = hex_to_rgb("#FF5733")
img = Image.new("RGB", (100, 100), color)
img.save("swatch.png")

If you are working with image color data, Pixotter's color picker can extract hex and RGB values from any image directly in the browser.

Method 3: CSS (No Conversion Needed)

CSS accepts both hex and RGB natively. You never need to convert manually in stylesheets — the browser does it internally.

/* These produce the exact same color */
.element-hex  { color: #FF5733; }
.element-rgb  { color: rgb(255, 87, 51); }
.element-rgba { color: rgb(255 87 51 / 0.5); } /* 50% opacity, modern syntax */

CSS Color Level 4 also accepts color(srgb 1 0.341 0.2) with normalized 0-1 values. Use hex for brevity in stylesheets. Use RGB when you need to manipulate individual channels with CSS custom properties:

:root {
  --accent-r: 255;
  --accent-g: 87;
  --accent-b: 51;
}
.button {
  background: rgb(var(--accent-r), var(--accent-g), var(--accent-b));
}
.button:hover {
  background: rgb(var(--accent-r), var(--accent-g), calc(var(--accent-b) + 40));
}

Method 4: Go (v1.22)

package main

import (
    "fmt"
    "strconv"
)

func hexToRGB(hex string) (uint8, uint8, uint8, error) {
    if hex[0] == '#' {
        hex = hex[1:]
    }
    val, err := strconv.ParseUint(hex, 16, 32)
    if err != nil {
        return 0, 0, 0, err
    }
    return uint8(val >> 16), uint8((val >> 8) & 0xFF), uint8(val & 0xFF), nil
}

func main() {
    r, g, b, _ := hexToRGB("#FF5733")
    fmt.Printf("rgb(%d, %d, %d)\n", r, g, b)
    // rgb(255, 87, 51)
}

Method 5: Command Line (Bash)

# Bash — works on macOS and Linux
hex="FF5733"
printf "rgb(%d, %d, %d)\n" 0x${hex:0:2} 0x${hex:2:2} 0x${hex:4:2}
# rgb(255, 87, 51)

For batch conversion from a file of hex codes:

while IFS= read -r hex; do
  hex="${hex#\#}"
  printf "%s → rgb(%d, %d, %d)\n" "#$hex" 0x${hex:0:2} 0x${hex:2:2} 0x${hex:4:2}
done < colors.txt

Hex to RGB Reference Table

Common web colors with their hex and RGB equivalents. All values verified against the CSS Color Level 4 specification.

Common Mistakes

1. Forgetting the Hash

Some tools and APIs expect the # prefix, others reject it. JavaScript's parseInt("FF", 16) works without it, but CSS requires #FF5733. Always check the target format.

2. Confusing RGB and RGBA

rgb(255, 87, 51) is opaque. rgba(255, 87, 51, 0.5) is 50% transparent. In modern CSS, both syntaxes are handled by rgb() — the rgba() function is legacy but still works.

3. Hex Case Sensitivity

Hex is case-insensitive. #ff5733, #FF5733, and #Ff5733 all produce the same color. Some code validators flag mixed case — pick one convention and stick to it. Lowercase is the CSS convention.

4. Mixing Up Color Spaces

Hex-to-RGB is notation conversion, not color space conversion. Both hex and RGB express sRGB colors. Converting between sRGB and Adobe RGB, or between RGB and CMYK, involves actual color space math with potential data loss. See our CMYK to RGB guide for that workflow.

Hex to RGB vs Other Color Conversions

FAQ

Is hex the same as RGB? They encode the same information in different formats. #FF5733 and rgb(255, 87, 51) represent the exact same color. No conversion loss occurs because both are notations for the sRGB color space.

Can I convert hex to RGB in Excel or Google Sheets? Yes. Use =HEX2DEC(MID(A1,2,2)) for red, =HEX2DEC(MID(A1,4,2)) for green, =HEX2DEC(MID(A1,6,2)) for blue, where A1 contains the hex code with the #.

What about hex codes with transparency? 8-digit hex codes (#FF573380) include an alpha channel. The last two characters (80 = 128 = ~50% opacity) map to the alpha value. Convert the alpha pair the same way: parseInt("80", 16) = 128 out of 255, or roughly 50%.

Why do some hex codes have only 3 characters? CSS shorthand: #F53 expands to #FF5533. Each character is doubled. Not all contexts support this — APIs and image libraries typically require the full 6-character form.

What RGB values should I use for web-safe colors? Web-safe colors are a relic of 256-color displays. Modern screens display 16.7 million colors. Use any RGB value you want — web-safe restrictions have not been relevant since the early 2000s.

How does hex to RGB differ from hex to HSL? Hex to RGB is a simple base conversion. Hex to HSL requires converting to RGB first, then applying formulas to derive hue, saturation, and lightness from the RGB channels. HSL is more intuitive for humans (adjusting "how light" or "how saturated" a color is) but machines work in RGB.