How to Convert Hex to RGB in JavaScript
- Parse the hex string, split it into R/G/B pairs, and convert each from base 16 to decimal using parseInt(pair, 16).
- One-liner: const [r,g,b] = hex.match(/../g).map(v => parseInt(v, 16))
- Handle the # prefix by slicing it off before parsing.
- Use the free converter above for instant lookups without writing code.
Table of Contents
Converting hex to RGB in JavaScript means parsing the six-character string into three pairs and converting each from hexadecimal (base 16) to decimal (base 10). JavaScript's built-in parseInt(value, 16) handles the base conversion — the rest is just string manipulation.
The converter above is handy when you just need a quick value. The code examples below are for when you need the conversion in your actual JavaScript project.
A Basic Hex to RGB Function in JavaScript
Here is a clean, readable version:
function hexToRgb(hex) {
hex = hex.replace(/^#/, '');
const r = parseInt(hex.slice(0, 2), 16);
const g = parseInt(hex.slice(2, 4), 16);
const b = parseInt(hex.slice(4, 6), 16);
return { r, g, b };
}
hexToRgb('#3B82F6'); // { r: 59, g: 130, b: 246 }The replace(/^#/, '') strips the hash character if present. parseInt(value, 16) converts each two-character hex pair to a decimal number between 0 and 255.
A One-Liner Hex to RGB Using Regex
If you prefer compact code:
const hexToRgb = hex => hex.replace(/^#/, '').match(/../g).map(v => parseInt(v, 16));
hexToRgb('#FF6400'); // [255, 100, 0]The regex /../g matches every two characters in the string. The .map() converts each pair from hex to decimal. The result is an array [r, g, b] you can destructure: const [r, g, b] = hexToRgb('#FF6400').
Return an rgb() CSS String Directly
If you want the output ready to drop into a CSS property:
function hexToCss(hex) {
const [r, g, b] = hex.replace(/^#/, '').match(/../g).map(v => parseInt(v, 16));
return "rgb(" + r + ", " + g + ", " + b + ")";
}
hexToCss('#3B82F6'); // "rgb(59, 130, 246)"You can modify this to return rgba by adding a fourth parameter: hexToRgba(hex, 0.5) would return "rgba(59, 130, 246, 0.5)".
Handling Three-Character Hex Shorthand
Short hex codes like #F60 need expansion before parsing. Each character doubles to become its full pair — F becomes FF, 6 becomes 66, 0 becomes 00:
function normalizeHex(hex) {
hex = hex.replace(/^#/, '');
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}
return hex;
}
normalizeHex('F60'); // 'FF6600'Run this normalization step before calling your hex-to-RGB function to handle both formats reliably.
Quick Hex to RGB Lookup
For one-off conversions while coding, paste your hex code above and copy the RGB values instantly.
Open Hex to RGB ConverterFrequently Asked Questions
Why does parseInt need the second argument 16?
Without the radix argument, parseInt guesses the base from the string format and can misinterpret values. Passing 16 explicitly tells it to treat the input as hexadecimal (base 16), which is always correct behavior for hex color codes.
What does parseInt("FF", 16) return?
255. FF in hexadecimal is the maximum two-digit value, which equals 255 in decimal. That is why 255 is the maximum for each RGB channel.
Can I use this code in Node.js as well as the browser?
Yes. These functions use only built-in JavaScript methods (parseInt, String.prototype.match, Array.prototype.map) with no browser-specific APIs. They run identically in Node.js and any browser.
Is there a built-in JavaScript method for hex to RGB?
No built-in method exists for this specific conversion. The pattern with parseInt(pair, 16) is the standard approach used across the JavaScript ecosystem.
