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:

JavaScript
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:

  • 0 to 9 to represent values 0 to 9
  • a to f (A to F) to represent values 10 to 16. The letters are case-insensitive, so 3C2b is exactly the same value as 3c2B.

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():

JavaScript
// 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 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.

JavaScript
console.log(40.); // 40 console.log(20.); // 20

So there will be an error, since there will be no member access operator before the member name.

JavaScript
// 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.

JavaScript
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.

JavaScript
console.log(40..toString(16)); // 28 console.log(20..toString(16)); // 14

Use 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:

JavaScript
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%)

JavaScript
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


Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.

Every Crazy Thing JavaScript Does

Sign up and receive a free copy immediately.

Leave a Comment

Your email address will not be published. Required fields are marked *