HEX to RGB Converter (Live Color Codes & Modern CSS)

Home › Color Converter › HEX to RGB

Convert hexadecimal color codes to rgb() and rgba() CSS formats in real time. Translate 3-digit shorthand, standard 6-digit hex, and 8-digit alpha transparency codes with live visual previews and modern CSS Level 4 syntax.

How Do You Convert HEX to RGB?

To convert a 6-digit HEX color code to RGB, split the hex string into three pairs representing Red, Green, and Blue. Convert each 2-digit base-16 hexadecimal pair into a base-10 decimal integer (0–255). For example, #2563EB splits into 25 (Red = 37), 63 (Green = 99), and EB (Blue = 235), producing rgb(37, 99, 235).

Enter HEX Color Code:

Invalid HEX code. Use 3, 4, 6, or 8 characters.

Popular Brand Presets:

Legacy CSS (Comma-Separated):

Modern CSS Level 4 (Space-Separated):

RED (R) 37

GREEN (G) 99

BLUE (B) 235

ALPHA (A) 100%

The Mathematics of HEX to RGB Conversion

Hexadecimal color notation is a base-16 numeral system that uses 16 symbols: 0–9 for values zero through nine, and A–F for values ten through fifteen. In web standards, an RGB color channel ranges from 0 to 255 in base-10 decimal ($16^2 = 256$ total values).

Step-by-Step Conversion Formula:

For any 2-digit hexadecimal channel pair ($H_1 H_2$), the decimal formula is:

Decimal Value = (Digit 1 × 16) + (Digit 2 × 1)

Example: Converting #3B82F6 (Tailwind Blue 500):

• Red (3B): $(3 \times 16) + 11 = 48 + 11 = \mathbf{59}$
• Green (82): $(8 \times 16) + 2 = 128 + 2 = \mathbf{130}$
• Blue (F6): $(15 \times 16) + 6 = 240 + 6 = \mathbf{246}$
• Result: rgb(59, 130, 246)

Programmatic Conversion via Bitwise Operators

In JavaScript, Python, and C, software engineers convert hex colors to RGB integers using bitwise right-shift operators (>>) and bitwise AND masks (&):

// High-performance bitwise HEX to RGB conversion
function hexToRgb(hex) {
  const num = parseInt(hex.replace('#', ''), 16);
  return {
    r: (num >> 16) & 255,
    g: (num >> 8) & 255,
    b: num & 255
  };
}

console.log(hexToRgb('#2563EB')); // { r: 37, g: 99, b: 235 }

3-Digit and 8-Digit HEX Codes Explained

• 3-Digit Shorthand (#RGB): Web browsers expand 3-digit shorthand by duplicating each digit, not by appending zeros. For example, #F5A expands to #FF55AA (giving rgb(255, 85, 170)), rather than #F5A000.
• 8-Digit HEX (#RRGGBBAA): The CSS Color Module Level 4 standard supports an optional fourth channel for alpha opacity. For example, #2563EB80 sets transparency to hex 80 ($128 / 255 = 0.5$), resulting in rgba(37, 99, 235, 0.5) or modern rgb(37 99 235 / 50%).

Common Web-Safe HEX to RGB Conversion Matrix

Color Name	HEX Code	Legacy RGB	Modern CSS Level 4	Color Swatch
Pure White	#FFFFFF	rgb(255, 255, 255)	rgb(255 255 255)
Pure Black	#000000	rgb(0, 0, 0)	rgb(0 0 0)
Royal Blue	#2563EB	rgb(37, 99, 235)	rgb(37 99 235)
Emerald Green	#10B981	rgb(16, 185, 129)	rgb(16 185 129)
Crimson Red	#EF4444	rgb(239, 68, 68)	rgb(239 68 68)

Related Color & Code Utilities:

• RGB to HEX Converter — Reverse mapping: convert decimal RGB values into standard HEX and 8-digit alpha codes.
• HEX to HSL Converter — Convert hex colors into Hue, Saturation, and Lightness for design tokens.
• Full Color Converter Hub — Convert between HEX, RGB, and HSL formats simultaneously.
• Modern CSS Color Spaces Guide — Deep dive into OKLCH, Display-P3, and wide-gamut displays.

Frequently Asked Questions

What is the difference between HEX and RGB color codes?

HEX and RGB represent the exact same sRGB color spectrum. HEX uses a 6-digit base-16 string (e.g., #FFFFFF), while RGB uses three base-10 integers ranging from 0 to 255 (e.g., rgb(255, 255, 255)) indicating the intensity of red, green, and blue light channels.

How does 3-digit HEX shorthand expand into RGB?

In CSS standards, each character in a 3-digit HEX code (#RGB) is duplicated to create a 6-digit code. For example, #09C becomes #0099CC, which translates to rgb(0, 153, 204), rather than appending trailing zeros.

Can a HEX color code have an opacity or alpha channel?

Yes. In modern CSS (Color Module Level 4), 8-digit HEX codes (#RRGGBBAA) include an alpha transparency channel. The final two digits represent opacity from 00 (0% opacity) to FF (100% opacity), converting directly to rgba().

What is modern space-separated RGB syntax in CSS?

CSS Color Module Level 4 replaced comma-separated rgb() syntax with space-separated values: rgb(255 255 255). For transparency, a slash is used instead of a comma: rgb(255 255 255 / 50%).

How do bitwise operators convert HEX to RGB in JavaScript?

By parsing a 6-digit hex string into a 24-bit integer, bitwise operators extract channel bytes: right-shifting 16 bits extracts Red, right-shifting 8 bits extracts Green, and masking with 255 (& 255) extracts Blue.