Color code from color name

Question

I have an array of colors, I am to write a javascript function to translate them to their color code in hex, for example start with the colors array and output the codes array

var colors = ["red", "green", "blue"]; 
var codes  = ["#f00", "#0f0", "#00f"]; 

Please someone help me out how easily it can be made done.

Thanks

Answer 1

Just have an associative array that maps color names to hex values.

Answer 2

Lookup a table of standard HTML colors. http://en.wikipedia.org/wiki/Web_colors

Answer 3

There's an answer for that: http://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes/1573141#1573141

function colourNameToHex(colour)
{
    var colours = {"aliceblue":"#f0f8ff","antiquewhite":"#faebd7","aqua":"#00ffff","aquamarine":"#7fffd4","azure":"#f0ffff",
    "beige":"#f5f5dc","bisque":"#ffe4c4","black":"#000000","blanchedalmond":"#ffebcd","blue":"#0000ff","blueviolet":"#8a2be2","brown":"#a52a2a","burlywood":"#deb887",
    "cadetblue":"#5f9ea0","chartreuse":"#7fff00","chocolate":"#d2691e","coral":"#ff7f50","cornflowerblue":"#6495ed","cornsilk":"#fff8dc","crimson":"#dc143c","cyan":"#00ffff",
    "darkblue":"#00008b","darkcyan":"#008b8b","darkgoldenrod":"#b8860b","darkgray":"#a9a9a9","darkgreen":"#006400","darkkhaki":"#bdb76b","darkmagenta":"#8b008b","darkolivegreen":"#556b2f",
    "darkorange":"#ff8c00","darkorchid":"#9932cc","darkred":"#8b0000","darksalmon":"#e9967a","darkseagreen":"#8fbc8f","darkslateblue":"#483d8b","darkslategray":"#2f4f4f","darkturquoise":"#00ced1",
    "darkviolet":"#9400d3","deeppink":"#ff1493","deepskyblue":"#00bfff","dimgray":"#696969","dodgerblue":"#1e90ff",
    "firebrick":"#b22222","floralwhite":"#fffaf0","forestgreen":"#228b22","fuchsia":"#ff00ff",
    "gainsboro":"#dcdcdc","ghostwhite":"#f8f8ff","gold":"#ffd700","goldenrod":"#daa520","gray":"#808080","green":"#008000","greenyellow":"#adff2f",
    "honeydew":"#f0fff0","hotpink":"#ff69b4",
    "indianred ":"#cd5c5c","indigo ":"#4b0082","ivory":"#fffff0","khaki":"#f0e68c",
    "lavender":"#e6e6fa","lavenderblush":"#fff0f5","lawngreen":"#7cfc00","lemonchiffon":"#fffacd","lightblue":"#add8e6","lightcoral":"#f08080","lightcyan":"#e0ffff","lightgoldenrodyellow":"#fafad2",
    "lightgrey":"#d3d3d3","lightgreen":"#90ee90","lightpink":"#ffb6c1","lightsalmon":"#ffa07a","lightseagreen":"#20b2aa","lightskyblue":"#87cefa","lightslategray":"#778899","lightsteelblue":"#b0c4de",
    "lightyellow":"#ffffe0","lime":"#00ff00","limegreen":"#32cd32","linen":"#faf0e6",
    "magenta":"#ff00ff","maroon":"#800000","mediumaquamarine":"#66cdaa","mediumblue":"#0000cd","mediumorchid":"#ba55d3","mediumpurple":"#9370d8","mediumseagreen":"#3cb371","mediumslateblue":"#7b68ee",
    "mediumspringgreen":"#00fa9a","mediumturquoise":"#48d1cc","mediumvioletred":"#c71585","midnightblue":"#191970","mintcream":"#f5fffa","mistyrose":"#ffe4e1","moccasin":"#ffe4b5",
    "navajowhite":"#ffdead","navy":"#000080",
    "oldlace":"#fdf5e6","olive":"#808000","olivedrab":"#6b8e23","orange":"#ffa500","orangered":"#ff4500","orchid":"#da70d6",
    "palegoldenrod":"#eee8aa","palegreen":"#98fb98","paleturquoise":"#afeeee","palevioletred":"#d87093","papayawhip":"#ffefd5","peachpuff":"#ffdab9","peru":"#cd853f","pink":"#ffc0cb","plum":"#dda0dd","powderblue":"#b0e0e6","purple":"#800080",
    "red":"#ff0000","rosybrown":"#bc8f8f","royalblue":"#4169e1",
    "saddlebrown":"#8b4513","salmon":"#fa8072","sandybrown":"#f4a460","seagreen":"#2e8b57","seashell":"#fff5ee","sienna":"#a0522d","silver":"#c0c0c0","skyblue":"#87ceeb","slateblue":"#6a5acd","slategray":"#708090","snow":"#fffafa","springgreen":"#00ff7f","steelblue":"#4682b4",
    "tan":"#d2b48c","teal":"#008080","thistle":"#d8bfd8","tomato":"#ff6347","turquoise":"#40e0d0",
    "violet":"#ee82ee",
    "wheat":"#f5deb3","white":"#ffffff","whitesmoke":"#f5f5f5",
    "yellow":"#ffff00","yellowgreen":"#9acd32"};

    return colours[colour.toLowerCase()] || false;
}

Answer 4

Using a associative array, you can map values to keys:

var colors = {
    "red": "#f00",
    "green": "#0f0",
    "blue": "#00f"
};

var getOneColor = colors["red"]; //retrieve the `value` of the `key` red

Answer 5

Define the color names in an associative array, like this:

var colors = {"red":"#f00", "green":"#0f0" "blue":"#00f"}

Then you can get a code for a color name by using the color name as the index:

colors["blue"]

(returns "#00f")

Answer 6

This is kind of an odd way of doing it, and it won't work in any browser that doesn't have getComputedStyle(), coughIEcough, but I think it's pretty slick.

var x = document.createElement('div');
x.style.color = 'red';
x.style.display = 'none';
document.body.appendChild(x);

var code = window.getComputedStyle(x, null).color;

if (code.indexOf('rgb(') == 0)
{
    var r = /\(.+\)/;
    var val = code.match(r).toString();
    val = val.substring(1, val.length - 1).replace(/ /g, '');

    var values = val.split(','), i = 0, s = '#', temp;
    for (i = 0; i < values.length; i++)
    {
        temp = parseInt(values[i], 10).toString(16);

        if (temp.length < 2)
        {
            temp = '0' + temp;
        }

        s += temp;
    }

    alert(s);
}

Here's what's happening: You're creating an element, and giving it a style with the named color value (in this case, red). Then it's appended to the page. It doesn't have to be visible (hence x.style.display = 'none'), but it has to be in the document.

Then we're getting the computed style. Opera returns it in the form #ff0000. Firefox and Chrome return it as rgb(255, 0, 0). If it's returned as such, we get the value between the parentheses, strip the spaces, and split it into its component parts.

We then take the resulting values and convert them first to a base-10 integer, and then to a base-16 string, which is exactly what you want.

Answer 7

A function that computes the value of a color name at runtime by inserting a mock element into the page, setting it's color, retrieving the RGB components and then converting it into hex. The conversion function courtesy of http://stackoverflow.com/questions/638948/background-color-hex-to-javascript-variable-jquery

function getColorValue(color) {
    var t = document.createElement('div');
    t.style.display = 'none';
    t.style.color = color;
    document.body.appendChild(t);

    var style = window.getComputedStyle(t, null);
    var colorValue = style.getPropertyCSSValue('color').getRGBColorValue();
    document.body.removeChild(t);

    var hex = function(x) {
        return ('0' + parseInt(x, 10).toString(16)).slice(-2);
    }

    var hexString = '#';
    with(colorValue) {
        hexString += hex(red.cssText) + hex(green.cssText) + hex(blue.cssText);
    }

    return hexString;
}

Example usages:

> getColorValue('red')
'#ff0000'
> getColorValue('mediumspringgreen')
"#00fa9a"