Javascript function to convert color names to hex

Question

Is there a built-in function that would convert a color by name into its hex representation? Like I want to pass 'white' and receive '#FFFFFF'. I really want to avoid coding all hundred if's myself :)

Answer 1

No, but using the list here you could create one. Something like this:

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",
    "rebeccapurple":"#663399","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"};

    if (typeof colours[colour.toLowerCase()] != 'undefined')
        return colours[colour.toLowerCase()];

    return false;
}

Answer 2

Quick code for HEX / RGB values only, might be useful to someone, and can be adapted to include names: pull the whole object in the for loop, check the name and if it matches you've got your hex / rbg. They are taken from here: http://www.colourlovers.com/web/blog/2008/04/22/all-120-crayon-names-color-codes-and-fun-facts

Most importantly, please notice the correct spelling of "colour" :P

/*COLOURS*/
function loadColourPalette() {

$("#colourPalette").empty();
//load them animated
for (var t = 0; t<120; t++){
    var c = returnColourForIndex(t);
    console.log("c is " + c);
    var div = '<div class="colourBox" id="cb'+t+'" style="background:'+c+'"></div>';
    $("#colourPalette").append(div);
}

}



function returnColourForIndex(i){

var colours = [     {hex:"CD4A4A",rgb:"205,74,74"},
                    {hex:"CC6666",rgb:"204,102,102"},
                    {hex:"BC5D58",rgb:"188,93,88"},
                    {hex:"FF5349",rgb:"255,83,73"},
                    {hex:"FD5E53",rgb:"253,94,83"},
                    {hex:"FD7C6E",rgb:"253,124,110"},
                    {hex:"FDBCB4",rgb:"253,188,180"},
                    {hex:"FF6E4A",rgb:"255,110,74"},
                    {hex:"FFA089",rgb:"255,160,137"},
                    {hex:"EA7E5D",rgb:"234,126,93"},
                    {hex:"B4674D",rgb:"180,103,77"},
                    {hex:"A5694F",rgb:"165,105,79"},
                    {hex:"FF7538",rgb:"255,117,56"},
                    {hex:"FF7F49",rgb:"255,127,73"},
                    {hex:"DD9475",rgb:"221,148,117"},
                    {hex:"FF8243",rgb:"255,130,67"},
                    {hex:"FFA474",rgb:"255,164,116"},
                    {hex:"9F8170",rgb:"159,129,112"},
                    {hex:"CD9575",rgb:"205,149,117"},
                    {hex:"EFCDB8",rgb:"239,205,184"},
                    {hex:"D68A59",rgb:"214,138,89"},
                    {hex:"DEAA88",rgb:"222,170,136"},
                    {hex:"FAA76C",rgb:"250,167,108"},
                    {hex:"FFCFAB",rgb:"255,207,171"},
                    {hex:"FFBD88",rgb:"255,189,136"},
                    {hex:"FDD9B5",rgb:"253,217,181"},
                    {hex:"FFA343",rgb:"255,163,67"},
                    {hex:"EFDBC5",rgb:"239,219,197"},
                    {hex:"FFB653",rgb:"255,182,83"},
                    {hex:"E7C697",rgb:"231,198,151"},
                    {hex:"8A795D",rgb:"138,121,93"},
                    {hex:"FAE7B5",rgb:"250,231,181"},
                    {hex:"FFCF48",rgb:"255,207,72"},
                    {hex:"FCD975",rgb:"252,217,117"},
                    {hex:"FDDB6D",rgb:"253,219,109"},
                    {hex:"FCE883",rgb:"252,232,131"},
                    {hex:"F0E891",rgb:"240,232,145"},
                    {hex:"ECEABE",rgb:"236,234,190"},
                    {hex:"BAB86C",rgb:"186,184,108"},
                    {hex:"FDFC74",rgb:"253,252,116"},
                    {hex:"FFFF99",rgb:"255,255,153"},
                    {hex:"C5E384",rgb:"197,227,132"},
                    {hex:"B2EC5D",rgb:"178,236,93"},
                    {hex:"87A96B",rgb:"135,169,107"},
                    {hex:"A8E4A0",rgb:"168,228,160"},
                    {hex:"1DF914",rgb:"29,249,20"},
                    {hex:"76FF7A",rgb:"118,255,122"},
                    {hex:"71BC78",rgb:"113,188,120"},
                    {hex:"6DAE81",rgb:"109,174,129"},
                    {hex:"9FE2BF",rgb:"159,226,191"},
                    {hex:"1CAC78",rgb:"28,172,120"},
                    {hex:"30BA8F",rgb:"48,186,143"},
                    {hex:"45CEA2",rgb:"69,206,162"},
                    {hex:"3BB08F",rgb:"59,176,143"},
                    {hex:"1CD3A2",rgb:"28,211,162"},
                    {hex:"17806D",rgb:"23,128,109"},
                    {hex:"158078",rgb:"21,128,120"},
                    {hex:"1FCECB",rgb:"31,206,203"},
                    {hex:"78DBE2",rgb:"120,219,226"},
                    {hex:"77DDE7",rgb:"119,221,231"},
                    {hex:"80DAEB",rgb:"128,218,235"},
                    {hex:"199EBD",rgb:"251,58,189"},
                    {hex:"1CA9C9",rgb:"28,169,201"},
                    {hex:"1DACD6",rgb:"291,72,214"},
                    {hex:"9ACEEB",rgb:"154,206,235"},
                    {hex:"1A4876",rgb:"26,72,118"},
                    {hex:"1974D2",rgb:"25,116,210"},
                    {hex:"2B6CC4",rgb:"43,108,196"},
                    {hex:"1F75FE",rgb:"31,117,254"},
                    {hex:"C5D0E6",rgb:"197,208,230"},
                    {hex:"B0B7C6",rgb:"176,183,198"},
                    {hex:"5D76CB",rgb:"93,118,203"},
                    {hex:"A2ADD0",rgb:"162,173,208"},
                    {hex:"979AAA",rgb:"151,154,170"},
                    {hex:"ADADD6",rgb:"173,173,214"},
                    {hex:"7366BD",rgb:"115,102,189"},
                    {hex:"7442C8",rgb:"116,66,200"},
                    {hex:"7851A9",rgb:"120,81,169"},
                    {hex:"9D81BA",rgb:"157,129,186"},
                    {hex:"926EAE",rgb:"146,110,174"},
                    {hex:"CDA4DE",rgb:"205,164,222"},
                    {hex:"8F509D",rgb:"143,80,157"},
                    {hex:"C364C5",rgb:"195,100,197"},
                    {hex:"FB7EFD",rgb:"251,126,253"},
                    {hex:"FC74FD",rgb:"252,116,253"},
                    {hex:"8E4585",rgb:"142,69,133"},
                    {hex:"FF1DCE",rgb:"255,29,206"},
                    {hex:"FF48D0",rgb:"255,72,208"},
                    {hex:"E6A8D7",rgb:"230,168,215"},
                    {hex:"C0448F",rgb:"192,68,143"},
                    {hex:"6E5160",rgb:"110,81,96"},
                    {hex:"DD4492",rgb:"221,68,146"},
                    {hex:"FF43A4",rgb:"255,67,164"},
                    {hex:"F664AF",rgb:"246,100,175"},
                    {hex:"FCB4D5",rgb:"252,180,213"},
                    {hex:"FFBCD9",rgb:"255,188,217"},
                    {hex:"F75394",rgb:"247,83,148"},
                    {hex:"FFAACC",rgb:"255,170,204"},
                    {hex:"E3256B",rgb:"227,37,107"},
                    {hex:"FDD7E4",rgb:"253,215,228"},
                    {hex:"CA3767",rgb:"202,55,103"},
                    {hex:"DE5D83",rgb:"222,93,131"},
                    {hex:"FC89AC",rgb:"252,137,172"},
                    {hex:"F780A1",rgb:"247,128,161"},
                    {hex:"C8385A",rgb:"200,56,90"},
                    {hex:"EE204D",rgb:"238,32,77"},
                    {hex:"FF496C",rgb:"255,73,108"},
                    {hex:"EF98AA",rgb:"239,152,170"},
                    {hex:"FC6C85",rgb:"252,108,133"},
                    {hex:"FC2847",rgb:"252,40,71"},
                    {hex:"FF9BAA",rgb:"255,155,170"},
                    {hex:"CB4154",rgb:"203,65,84"},
                    {hex:"FFFFFF",rgb:"255,255,255"},
                    {hex:"EDEDED",rgb:"237,237,237"},
                    {hex:"DBD7D2",rgb:"219,215,210"},
                    {hex:"CDC5C2",rgb:"205,197,194"},
                    {hex:"95918C",rgb:"149,145,140"},
                    {hex:"414A4C",rgb:"65,74,76"},
                    {hex:"232323",rgb:"35,35,35"},
                    {hex:"000000",rgb:"0,0,0"}];

return "#"+colours[i].hex;

}

Answer 3

Edit: I've cleaned this up a bit and made a gist and demo of it. The basic approach remains the same.

The "add an element to the DOM and check its ComputedStyle" approach seems a little complex to me — you need to add it and check it and remember to remove it and you're changing the DOM just to compute a color and does it cause reflow? So here's a solution based on a temporary (and never rendered) <canvas>:

function colorToRGBA(color) {
    // Returns the color as an array of [r, g, b, a] -- all range from 0 - 255
    // color must be a valid canvas fillStyle. This will cover most anything
    // you'd want to use.
    // Examples:
    // colorToRGBA('red')  # [255, 0, 0, 255]
    // colorToRGBA('#f00') # [255, 0, 0, 255]
    var cvs, ctx;
    cvs = document.createElement('canvas');
    cvs.height = 1;
    cvs.width = 1;
    ctx = cvs.getContext('2d');
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, 1, 1);
    return ctx.getImageData(0, 0, 1, 1).data;
}

function byteToHex(num) {
    // Turns a number (0-255) into a 2-character hex number (00-ff)
    return ('0'+num.toString(16)).slice(-2);
}

function colorToHex(color) {
    // Convert any CSS color to a hex representation
    // Examples:
    // colorToHex('red')            # '#ff0000'
    // colorToHex('rgb(255, 0, 0)') # '#ff0000'
    var rgba, hex;
    rgba = colorToRGBA(color);
    hex = [0,1,2].map(
        function(idx) { return byteToHex(rgba[idx]); }
        ).join('');
    return "#"+hex;
}

Note that this lets you use anything that's a valid canvas fillStyle, so if you want to gin up a 1 pixel pattern from an image, it'll tell you the color of that as well.

I've tested this in reasonably modern versions of IE, Chrome, Safari, and Firefox.

Answer 4

IE8 getComputedStyle polyfill if needed

var rgbToHex = function(r, g, b) {
    return "#" + (16777216 | b | (g << 8) | (r << 16)).toString(16).slice(1);
};

var d = document.createElement('div');
d.style.color = 'white';
window.document.body.appendChild(d);
var parts = (window.getComputedStyle(d).color || '').match(/\d+/g);
var f = function(n) { return parseInt(n, 10); };
window.document.body.removeChild(d);
var hex = rgbToHex(f(parts[0]), f(parts[1]), f(parts[2]));

//"#ffffff"

Answer 5

Not that's built-in, as far as I know. It would be kind of a hack, but I think you could create an invisible div, set its CSS background property to the named color, then use JS to get the background color of the div, then delete the div.