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

#### Subscribe to Coding Beauty Newsletter

Gain useful insights and advance your web development knowledge with weekly tips and tutorials from Coding Beauty. Over 2,000 developers subscribe.

## `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 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 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.