# Converting colors or numbers from Hex to Dec

Recently, I needed to create a function that fades from one color to the other. CSS3 makes the job very easy by making use of the transition property. However I needed to use this functionality inside a canvas element, meaning I would have to calculate the transition in JavaScript.

CSS3 Method:

``````.selector {
color:red;
transition: color .5s;
}

.selector:hover {
color:green;
}``````

On the browsers, colors can be set using 3 types of notations: RGB, HEX, or HSL. I usually prefer using HEX notation (#34B620) but the only problem is I'd have to convert these numbers into integers I can manage first before I can animate a transition.

### HEX to DEC

The numbers `#34B620` need to be translated into `rgb(52, 182, 32)`. To do so, we can create a function that convert Hex into integers.

``````function convertColor(hexa){
var chunks = [];
var tmp,i;
hexa = hexa.substr(1); // remove the pound
if ( hexa.length === 3){
tmp = hexa.split("");
for(i=0;i<3;i++){
chunks.push(parseInt(tmp[i]+""+tmp[i],16));
}
}else if (hexa.length === 6){
tmp = hexa.match(/.{2}/g);
for(i=0;i<3;i++){
chunks.push(parseInt(tmp[i],16));
}
}else {
throw new Error("'"+hexa+"' is not a valid hex format");
}

return chunks;
}
``````

This function can properly convert hexadecimal numbers if they come in 3 digit format and 6 digit format.

``````convertColor("#00FF00");
// [0, 255, 0]

convertColor("#0639FF");
// [6, 57, 255]

convertColor("#06D");
// [0, 102, 221]
``````

Now that I have integers I can work with, I can easily create a transition from color to color.

### DEC to HEX

The opposite is much easier to do. We can simply call a `.toString()` method with the argument `16` for hex on a number.

``````var decnumber = 12;
var hexnumber = decnumber.toString(16);
// C
``````

To convert the colors to hex we can simply loop through the values we converted earlier and call toString():

``````function convertToHexColor(decArray){
var i,l = decArray.length,
hexColor = "#";

for (i=0;i<l;i++){
hexColor += decArray[i].toString(16);
}
return hexColor;
}
``````

That's it, we now know how to convert from hex to dec and from dec to hex using JavaScript.