How to Convert HEX to RGB
Converting a hexadecimal color string into RGB channel values comes down to splitting the string into sub-components and converting base-16 integers into standard base-10 decimals. Computer screens build images by combining red, green, and blue light across a scale from 0 (zero light) to 255 (maximum intensity per channel).
Hex strings group these channels in pairs: #RRGGBB. The first two characters specify the Red channel, the middle two control Green, and the final pair handles Blue. If an 8-character hex code like #3498db80 is passed, the trailing pair represents the Alpha transparency channel.
The Mathematics Behind the Conversion
Base-16 uses sixteen distinct digits: 0–9 represent values 0 through 9, while letters A–F (or a–f) stand for values 10 through 15. To translate a two-digit hexadecimal channel like 98 into a standard integer, multiply the first digit by 16 and add the second digit:
Hex channel: "98"
First digit (9): 9 × 16 = 144
Second digit (8): 8
Total Decimal: 144 + 8 = 152Applying this math across all three channels for #3498db yields:
- Red:
34→ (3 × 16) + 4 = 52 - Green:
98→ (9 × 16) + 8 = 152 - Blue:
DB→ (13 × 16) + 11 = 219
Written in modern CSS notation, the resulting color is rgb(52 152 219).
Shorthand 3-Digit and 4-Digit HEX Codes
CSS allows shorthand hexadecimal syntax when both characters in every channel pair are identical. A three-character code like #f06 expands by duplicating each character into a full pair (#ff0066) before running the base-16 conversion:
#f06 == #ff0066 == rgb(255 0 102)
#f068 == #ff006688 == rgb(255 0 102 / 53.3%)Modern Space Syntax vs. Legacy Comma Syntax
CSS Color Module Level 4 introduced space-separated function parameters for rgb(), replacing the older comma-separated format while rendering the legacy rgba() function redundant:
/* Modern CSS Syntax (Recommended) */
background: rgb(52 152 219);
background: rgb(52 152 219 / 80%);
/* Legacy CSS Syntax */
background: rgb(52, 152, 219);
background: rgba(52, 152, 219, 0.8);The space-separated syntax improves readability and establishes a unified notation across modern color functions like hsl(), lab(), and oklch(). This converter outputs standard space-separated CSS by default.
Converting HEX to RGB in JavaScript
If you need to perform this conversion inside a script or component library, regular expressions paired with parseInt(string, 16) make short work of parsing:
function hexToRgb(hex) {
// Expand shorthand hex codes (e.g. "f06" -> "ff0066")
let cleanHex = hex.replace(/^#/, '');
if (cleanHex.length === 3 || cleanHex.length === 4) {
cleanHex = cleanHex.split('').map(char => char + char).join('');
}
const num = parseInt(cleanHex, 16);
const hasAlpha = cleanHex.length === 8;
const r = (num >> (hasAlpha ? 24 : 16)) & 255;
const g = (num >> (hasAlpha ? 16 : 8)) & 255;
const b = (num >> (hasAlpha ? 8 : 0)) & 255;
const a = hasAlpha ? ((num & 255) / 255).toFixed(2) : 1;
return { r, g, b, a };
}
// Example Usage:
// hexToRgb("#3498db") -> { r: 52, g: 152, b: 219, a: 1 }
// hexToRgb("#3498db80") -> { r: 52, g: 152, b: 219, a: "0.50" }