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:
string– the string to be parsed.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)); // 205If 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.
