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:

JavaScriptCopied!

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

JavaScriptCopied!

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

JavaScriptCopied!

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.

JavaScriptCopied!

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

JavaScriptCopied!

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.

JavaScriptCopied!

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:

JavaScriptCopied!

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

JavaScriptCopied!

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.