How to Convert Decimal to Hex in JavaScript
In this article, we’re going to learn how to easily convert a decimal number to its hexadecimal equivalent in JavaScript. And we’ll look at some real-world scenarios where we’ll need to do this.
Number toString() method
To convert a decimal to hex in JavaScript, call the toString() method on the decimal, passing 16 as the radix argument, i.e., num.toString(16). The toString() method will return the string representation of the number in hexadecimal form.
For example:
const num = 60;
const hex = num.toString(16);
console.log(hex); // 3c
// Use parentheses when calling toString() directly
const hex2 = (60).toString(16);
console.log(hex2); // 3c
The Number toString() method returns the string representation of a number. If a base is specified with the first argument, the number is represented in that base. We pass 16 to use base 16, which is the hexadecimal base.
The hexadecimal base uses 16 symbols to represent numbers:
0to9to represent values0to9atof(AtoF) to represent values10to16. The letters are case-insensitive, so3C2bis exactly the same value as3c2B.
Call toString() on number literal
If you call toString() on a number literal directly, ensure you wrap it in parentheses (( )) or use two dots (..before toString():
// Use parentheses
const hex2 = (60).toString(16);
console.log(hex2); // 3c
// Use double dots
const hex3 = 50..toString(16);
console.log(hex3); // 32If you use only one dot without parentheses, the JavaScript parser treats it as part of the number literal - a decimal point - instead of a member access operator.
console.log(40.); // 40
console.log(20.); // 20So there will be an error, since there will be no member access operator before the member name.
// SyntaxError
console.log(40.toString(16));
// SyntaxError
console.log(20.toString(16));So you wrap the number in parentheses so that everything outside them are seen as separate from the number.
console.log((40).toString(16)); // 28
console.log((20).toString(16)); // 14
Or you add a second dot that will be seen as the member access operator.
console.log(40..toString(16)); // 28
console.log(20..toString(16)); // 14Use Case: Convert RGB(A) to Hex
One common use for converting decimal values to hex to convert a RGB color code to its hex equivalent. Here's how we can do it:
function decToHex(dec) {
return dec.toString(16);
}
function padToTwo(str) {
return str.padStart(2, '0');
}
function rgbToHex(r, g, b) {
const hexR = padToTwo(decToHex(r));
const hexG = padToTwo(decToHex(g));
const hexB = padToTwo(decToHex(b));
return `#${hexR}${hexG}${hexB}`;
}
console.log(rgbToHex(255, 128, 237)); // #ff80ed
console.log(rgbToHex(195, 151, 151)); // #c39797
console.log(rgbToHex(16, 16, 16)); // #0f0f0f
We create a reusable rgbToHex() function to convert the RGB code to its hex equivalent.
We use the padToTwo() function to pad a hex code to two digits, e.g, f -> 0f.
After converting the R, G, and B decimal values to their hexadecimal representations, we join them together in a string prefixed with the # character to form the hex color code.
We could modify the function to also accept RGBA values, where the A is a percentage value (between 0 and 1) used to specify color opacity. A will be the first two characters of the hex color code, having a value between 00 (0 or 0%) and ff (255 or 100%)
function decToHex(dec) {
return dec.toString(16);
}
function padToTwo(str) {
return str.padStart(2, '0');
}
function rgbToHex(r, g, b, a) {
const hexR = padToTwo(decToHex(r));
const hexG = padToTwo(decToHex(g));
const hexB = padToTwo(decToHex(b));
// Set "a" to 1 if not specified
const aAbsolute = Math.round((a ?? 1) * 255);
const hexA = padToTwo(decToHex(aAbsolute));
return `#${hexA}${hexR}${hexG}${hexB}`;
}
console.log(rgbToHex(255, 128, 237)); // #ffff80ed
console.log(rgbToHex(195, 151, 151, 0.5)); // #80c39797
console.log(rgbToHex(16, 16, 16, 0.69)); // #b0101010
