Question

I’ve been stuck on this for a while. I keep trying to compare colors for elements but even if the colors are the same, the values representing them are not. One is #000 and the other is “black”. How do I take “black” and turn it into #000. With that said, how do I take any word color and turn it into a number?

Answer 1

I’m not sure it is possible x-browser without a predefined list of colours. It’s simple enough in browsers supporting window.getComputedStyle():

function getColorFromName(name) {
    var rgb,
        tmp = document.body.appendChild(document.createElement("div"));

    tmp.style.backgroundColor = name;
    rgb = window.getComputedStyle(div, null);
    //-> returns format "rgb(r, g, b)", which can be parsed and converted to hex
}

For browsers not supporting this, the only option you have is to use an object map and define the values yourself:

var colours = {
    aliceblue:      "#F0F8FF",
    antiquewhite:   "#FAEBD7",
    aqua:           "#00FFFF"
    //...etc
}

// and lookup
alert(colours[document.getElementById("div").style.backgroundColor.toLowerCase()]);

A full list of colours supported in CSS3 is available from http://www.w3.org/TR/css3-color/#svg-color.

Of course, the downside to the list method is that lists need to be maintained if the specification changes, so you might want to incorporate both methods – ie if getComputedStyle() is available, use it else fall back to the list. This ensures compatibility for both older browsers and newer browsers without ever needing to update the list.