JavaScript

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.


Comments

Let's hear your thoughts

For my eyes only

There are no comments added yet.