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.
Why Use Our Fast HEX to RGB Converter?
How to Convert HEX to RGB in 3 Simple Steps
Follow this simple workflow to decode hexadecimal color strings into decimal channel values.
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.
The conversion engine extracts each two-character base-16 pair (RR, GG, BB) and computes the corresponding decimal integer between 0 and 255.
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.
Each channel in a 6-digit HEX code consists of two hexadecimal digits: D1 (most significant) and D2 (least significant).
Hex digits mapping table:0-9 = 0-9 | A=10, B=11, C=12, D=13, E=14, F=15
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
Practical Applications for Web & UI Engineering
Why extracting decimal channel components is crucial across modern frontend and backend architectures.
Image processing filters, canvas pixel manipulation, and WebGL fragment shaders require normalized decimal channel values (0.0 to 1.0) rather than hex strings.
Converting a brand HEX to RGB enables flexible alpha layering via rgba(var(--brand-rgb), 0.8) without altering child element opacity.
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.
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;
}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)/* 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%);
}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.
| Preview | Color Name | HEX Code | RGB Value | HSL Value | Design Application |
|---|---|---|---|---|---|
| Pure Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | Destructive alerts | |
| Pure Green | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | Success indicators | |
| Pure Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | Links and focus rings | |
| Pure White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | Card backgrounds | |
| Pure Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | High-contrast text | |
| Deep Indigo | #4B0082 | rgb(75, 0, 130) | hsl(275, 100%, 25%) | Navigation bars | |
| Emerald Green | #50C878 | rgb(80, 200, 120) | hsl(140, 52%, 55%) | Badges and tags | |
| Crimson Red | #DC143C | rgb(220, 20, 60) | hsl(348, 83%, 47%) | Danger buttons | |
| Sky Blue | #87CEEB | rgb(135, 206, 235) | hsl(197, 71%, 73%) | Info banners | |
| Golden Amber | #FFBF00 | rgb(255, 191, 0) | hsl(45, 100%, 50%) | Rating stars, badges | |
| Charcoal Dark | #36454F | rgb(54, 69, 79) | hsl(204, 19%, 26%) | Dark theme surfaces | |
| Soft Coral | #F88379 | rgb(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.