ImgToColor

HEX to RGB Converter

HEX to RGB converter transforms 6-digit (#RRGGBB) or 3-digit (#RGB) hexadecimal color codes into standard Red, Green, and Blue decimal values (0-255) instantly. Accurate base-16 decoding ensures clean integration into CSS, JavaScript canvasing, UI frameworks, and design specs.

#17A2B8
Active Color Sync
HEX Code#17A2B8
RGB Stringrgb(23, 162, 184)
RGB Channels (0-255)Base-10 Decimals
HEX Code (#RRGGBB)Base-16 Hexadecimal
Quick Color Presets:

Why Use Our Fast HEX to RGB Converter?

Shorthand 3-Digit Support
Seamlessly convert shorthand 3-character hex codes like #FA0 into full 6-character equivalents (#FFAA00) and accurate RGB integers without manual expansion.
Zero Data Collection
All base conversion routines execute on your device in pure client-side JavaScript. No color queries or design parameters are tracked or saved.
Real-Time Color Preview
Inspect live color swatch updates alongside numeric channel outputs to verify contrast and hue before inserting into production stylesheets.

How to Convert HEX to RGB in 3 Simple Steps

Follow this simple workflow to decode hexadecimal color strings into decimal channel values.

1
Enter Any Hexadecimal Color Code

Type or paste any 6-digit (such as #17A2B8) or shorthand 3-digit (such as #F50) HEX color code into the input field. The parser sanitizes input and trims extra whitespace.

2
Real-Time Base-16 Channel Decoding

The conversion engine extracts each two-character base-16 pair (RR, GG, BB) and computes the corresponding decimal integer between 0 and 255.

3
Copy Formatted RGB Values

Click the Copy button to capture the formatted rgb(r, g, b) string or individual channel values for direct insertion into stylesheets or design systems.

Understanding the Hexadecimal to RGB Decoding Formula

Learn how base-16 positional notation translates into base-10 decimal numbers for screen rendering.

Positional Base-16 Arithmetic

Each channel in a 6-digit HEX code consists of two hexadecimal digits: D1 (most significant) and D2 (least significant).

Decimal Value = (Value(D1) * 16) + Value(D2)

Hex digits mapping table:0-9 = 0-9 | A=10, B=11, C=12, D=13, E=14, F=15

Practical Worked Example

Converting #3498DB into RGB:

  • Red (34): (3 * 16) + 4 = 48 + 4 = 52
  • Green (98): (9 * 16) + 8 = 144 + 8 = 152
  • Blue (DB): (13 * 16) + 11 = 208 + 11 = 219
Resulting RGB Format = rgb(52, 152, 219)

Practical Applications for Web & UI Engineering

Why extracting decimal channel components is crucial across modern frontend and backend architectures.

HTML5 Canvas 2D / WebGL

Image processing filters, canvas pixel manipulation, and WebGL fragment shaders require normalized decimal channel values (0.0 to 1.0) rather than hex strings.

Dynamic CSS Opacity

Converting a brand HEX to RGB enables flexible alpha layering via rgba(var(--brand-rgb), 0.8) without altering child element opacity.

Color Interpolation

Linear gradients and color animation tweens require calculating arithmetic midpoints between R, G, and B channel integers for smooth transitions.

HEX to RGB Code Implementations

Ready-to-use parser algorithms for JavaScript, TypeScript, Python, and PHP backend stacks.

JavaScript / TypeScript Parser
function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  const fullHex = hex.replace(shorthandRegex, (_, r, g, b) => r + r + g + g + b + b);

  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(fullHex);
  return result
    ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16),
      }
    : null;
}
Python 3 Method
def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
    hex_clean = hex_str.lstrip('#')
    if len(hex_clean) == 3:
        hex_clean = ''.join(c * 2 for c in hex_clean)
    if len(hex_clean) != 6:
        raise ValueError("Invalid HEX length")
    return tuple(int(hex_clean[i:i+2], 16) for i in (0, 2, 4))

# Example usage:
print(hex_to_rgb("#3498DB")) # (52, 152, 219)
Modern CSS Syntaxes
/* Legacy RGB notation */
.button-legacy {
  background-color: rgb(52, 152, 219);
}

/* Modern CSS Color Level 4 syntax with alpha */
.button-modern {
  background-color: rgb(52 152 219 / 75%);
}
PHP Backend
function hexToRgb($hex) {
    $hex = ltrim($hex, '#');
    if (strlen($hex) == 3) {
        $hex = $hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
    }
    list($r, $g, $b) = sscanf($hex, "%02x%02x%02x");
    return ["r" => $r, "g" => $g, "b" => $b];
}

HEX to RGB Common Color Reference Chart

Quick lookup reference for popular web design color palettes with their exact HEX and RGB conversions.

PreviewColor NameHEX CodeRGB ValueHSL ValueDesign Application
Pure Red#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)Destructive alerts
Pure Green#00FF00rgb(0, 255, 0)hsl(120, 100%, 50%)Success indicators
Pure Blue#0000FFrgb(0, 0, 255)hsl(240, 100%, 50%)Links and focus rings
Pure White#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)Card backgrounds
Pure Black#000000rgb(0, 0, 0)hsl(0, 0%, 0%)High-contrast text
Deep Indigo#4B0082rgb(75, 0, 130)hsl(275, 100%, 25%)Navigation bars
Emerald Green#50C878rgb(80, 200, 120)hsl(140, 52%, 55%)Badges and tags
Crimson Red#DC143Crgb(220, 20, 60)hsl(348, 83%, 47%)Danger buttons
Sky Blue#87CEEBrgb(135, 206, 235)hsl(197, 71%, 73%)Info banners
Golden Amber#FFBF00rgb(255, 191, 0)hsl(45, 100%, 50%)Rating stars, badges
Charcoal Dark#36454Frgb(54, 69, 79)hsl(204, 19%, 26%)Dark theme surfaces
Soft Coral#F88379rgb(248, 131, 121)hsl(5, 87%, 72%)Secondary accents

Frequently Asked Questions About HEX to RGB

Answers to common technical questions about color decoding, alpha channels, and browser rendering.

Explore Related Color Conversion Tools

Check out our complete suite of browser-based color manipulation utilities.