In this article, we'll learn how to easily convert a decimal number to its hexadecimal equivalent in JavaScript.
Number toString() method
To convert decimal to hexadecimal in JavaScript, call the toString() method on decimal, passing 16 as the base parameter, ie num.toString(16). The toString() method will return the string representation of the number in hexadecimal.
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 the first argument specifies a radix, the number is represented in that radix. We pass 16 to use base 16, which is the hexadecimal base.
Hexadecimal uses 16 symbols to represent numbers:
0 to 9 represents the values 0 to 9
a to f (A to F) represent the values 10 to 16. Letters are not case sensitive, so 3C2b has exactly the same value as 3c2B.
calling toString() on numeric literals
If calling toString() directly on a numeric literal, make sure to enclose 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); // 32
If you just use a dot without parentheses, the JavaScript parser will treat it as part of the number literal -- the decimal point -- rather than a member access operator.
console.log(40.); // 40
console.log(20.); // 20
So the error occurs because there is no member access operator before the member name.
// SyntaxError
console.log(40.toString(16));
// SyntaxError
console.log(20.toString(16));\
So you put the numbers in parentheses so that everything outside of them is considered separate from the numbers.
console.log((40).toString(16)); // 28
console.log((20).toString(16)); // 14
Or you add a second dot and it will be treated as a member access operator.
console.log(40..toString(16)); // 28
console.log(20..toString(16)); // 14
Use case: Convert RGB(A) to hexadecimal
A common use for converting decimal values to hexadecimal values is to convert RGB color codes to their hexadecimal equivalents. We can do this:
function decToHex(dec) {
return dec.toString(16);
}
function padToTwo(str) {
return str.padStart(2);
}
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 created a reusable rgbToHex() function to convert RGB codes to their hexadecimal equivalents.
We use the padToTwo() function to pad the hexadecimal code to two digits, eg f -> 0f.
After converting the decimal values of R, G, and B to hexadecimal representations, we concatenate them into a string prefixed with a # character to form a hexadecimal color code.
We can modify the function to also accept RGBA values, where A is a percentage value (between 0 and 1) specifying the opacity of the color. A will be the first two characters of a hexadecimal color code with 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);
}
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