I'm currently working on a mini course where I will show to dynamically lighten and darken colors in JavaScript. To do this, I needed to be able to convert numbers from decimal to hexadecimal and visa versa. Let's see how!

Intro

One of the most common ways to represent colors is with RGB where you have three (hexadecimal) numbers that represent the red, green, and blue values respectively. Here's an example using my brand color.

#de5254

If you separate this out, you get three values of de, 52, and 54. This might seem odd to have letters represent a number, but that's how hexadecimal numbers work. Instead of using 1-10 digits it uses 1-f (1-9,a,b,c,d,e,f) as digits.

Alright, let's dive in.

Convert Decimal to Hexidecimal

If you have a decimal number that you want to convert to hexidecimal, you can call the toString() function with the number and pass in a target base (binary, decimal, hexedecimal, etc.). This parameter is known as the radix. Here's a few examples.

let num = 15;
num.toString(16) //f
num = 10
num.toString(16) //a
num = 1
num.toString(16) //1

W3 Schools Docs - toString()

Convert Hexadecimal to Decimal

What about the reverse? If you're converting hexadecimal back to decimal you can use the parseInt() function and pass the the original number (as a string) in the first parameter and the radix in the second.

parseInt("f", 16) //15
parseInt("a", 16) //10
parseInt("1", 16) //1

W3 Schools Docs - parseInt()

Wrap Up

Not too bad huh? Working with different bases in numbers can certainly be tricky to understand, but you can let JavaScript take care of most of it for you!