How to Convert Hex to Decimal in JavaScript

In this article, we’re going to learn how to convert a hexadecimal number to its decimal equivalent in JavaScript. And we’ll look at some real-world scenarios where we’ll need to do this.

`parseInt()` function

To convert a hex to decimal, call the `parseInt()` function, passing the hex and `16` as the first and second arguments respectively, i.e., `parseInt(hex, 16)`. For example:

``````function hexToDec(hex) {
return parseInt(hex, 16);
}

console.log(hexToDec('f')); // 15
console.log(hexToDec('abc')); // 2748
console.log(hexToDec(345)); // 837
``````

The `parseInt()` function parses a string and returns an integer of the specified radix. It has two parameters:

1. `string` – the string to be parsed.
2. `radix` – an integer between 2 and 36 that represents the radix/base of the string.

`parseInt()` ignores any leading whitespace in the string passed to it.

``````console.log(parseInt('   a', 16)); // 10
console.log(parseInt('   cd', 16)); // 205``````

If the string passed is not a valid number in the specified radix, `parseInt()` does not throw an error, but returns `NaN`.

``````console.log(parseInt('js', 16)); // NaN

// 'a' does not exist in base 10
console.log(parseInt('a', 10)); // NaN

// 5 does not exist in base 2
console.log(parseInt(5, 2)); // NaN
``````

If the radix is not between 2 and 36, `parseInt()` will return `NaN` also.

``````console.log(parseInt(54, 1));
console.log(parseInt('aa', 37));
console.log(parseInt(10, 50));
``````

If the radix is an invalid number or not set and the string starts with `0x` or `0X`, then the radix is assumed to be 16. But if the string starts with any other value, the radix is assumed to be 10.

``````// base 10 assumed
console.log(parseInt('45')); // 45
console.log(parseInt('36', 'invalid')); // 36

// 'f' and 'b' do NOT exist in assumed base 10
console.log(parseInt('ff')); // NaN
console.log(parseInt('bb', 'invalid')); // NaN

// 'f' and 'b' do exist in assumed base 16
console.log(parseInt('0xff')); // 255
console.log(parseInt('0Xbb', 'invalid')); // 187
``````

Use case: convert hex codes to RGB(A)

One common use of converting hex values to decimal is to convert a color hex code to its RGB format equivalent. Here’s how we can do it:

``````function hexToDec(hex) {
return parseInt(hex, 16);
}

function hexToRGB(hexColor) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})\$/i.exec(hexColor);
return {
r: hexToDec(result[1]),
g: hexToDec(result[2]),
b: hexToDec(result[3]),
};
}

// { r: 255, g: 128, b: 237 }
console.log(hexToRGB('#ff80ed'));

// { r: 195, g: 151, b: 151 }
console.log(hexToRGB('#c39797'));

// { r: 255, g: 255, b: 255 }
console.log(hexToRGB('#ffffff'));
``````

We created a reusable `hexToRGB()` function to convert the hex color codes to their equivalent RGB format.

We use a regex to match and separate the two-letter codes representing red (R), green (G), and blue (B). We call the `exec()` method to find the matches of this regex in the specified hex color code.

``````/**
[
'#ff80ed',
'ff',
'80',
'ed',
index: 0,
input: '#ff80ed',
groups: undefined
]
*/
console.log(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})\$/i.exec('#ff80ed'));``````

After separating them, we use our `hexToDec()` method to convert each of them to its decimal equivalent.

We return an object with `r`, `g` and `b` properties containing the values for red, green, and blue respectively.

Depending on our use case, we could return an `rgb()` string instead of an object. This could be useful for color animation, as some animation libraries work with RGB values but not with hex color codes.

``````function hexToDec(hex) {
return parseInt(hex, 16);
}

function hexToRGB(hexColor) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})\$/i.exec(hexColor);
const r = hexToDec(result[1]);
const g = hexToDec(result[2]);
const b = hexToDec(result[3]);

return `rgb(\${r}, \${g}, \${b})`;
}

// rgb(255, 128, 237)
console.log(hexToRGB('#ff80ed'));

// rgb(195, 151, 151)
console.log(hexToRGB('#c39797'));

// rgb(255, 255, 255)
console.log(hexToRGB('#ffffff'));
``````

We could modify the function to detect alpha values in the hex code and convert the color code to an RGBA format instead. We’ll use an alpha of `1` if it is not specified.

``````function hexToDec(hex) {
return parseInt(hex, 16);
}

function hexToRGBA(hexColor) {
const regex = /^#?([a-f\d]{2})?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})\$/i;
const result = regex.exec(hexColor);

const alphaHex = result[1];
const a = alphaHex ? hexToDec(alphaHex) / 255 : 1;
const r = hexToDec(result[2]);
const g = hexToDec(result[3]);
const b = hexToDec(result[4]);

return { r, g, b, a };
}

// { r: 255, g: 128, b: 237, a: 1 }
console.log(hexToRGBA('#ff80ed'));

// { r: 195, g: 151, b: 151, a: 1 }
console.log(hexToRGBA('#c39797'));

// { r: 255, g: 128, b: 237, a: 0.8666666666666667 }
console.log(hexToRGBA('#ddff80ed'));

// { r: 195, g: 151, b: 151, a: 0.6901960784313725 }
console.log(hexToRGBA('#b0c39797'));
``````

And we could also return an `rgba()` string instead of an object:

``````function hexToDec(hex) {
return parseInt(hex, 16);
}

function hexToRGBA(hexColor) {
const regex = /^#?([a-f\d]{2})?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})\$/i;
const result = regex.exec(hexColor);

const alphaHex = result[1];
const a = alphaHex ? hexToDec(alphaHex) / 255 : 1;
const r = hexToDec(result[2]);
const g = hexToDec(result[3]);
const b = hexToDec(result[4]);

return `rgba(\${r}, \${g}, \${b}, \${a.toFixed(3)})`;
}

// rgba(255, 128, 237, 1.000)
console.log(hexToRGBA('#ff80ed'));

// rgba(195, 151, 151, 1.000)
console.log(hexToRGBA('#c39797'));

// rgba(255, 128, 237, 0.867)
console.log(hexToRGBA('#ddff80ed'));

// rgba(195, 151, 151, 0.690)
console.log(hexToRGBA('#b0c39797'));
``````

11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.