Javascript function to convert color names to hex codes

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

@dlauzon suggested I convert my comment into an answer. Thanks for suggesting! Here it is :)

function standardize_color(str){
    var ctx = document.createElement('canvas').getContext('2d');
    ctx.fillStyle = str;
    return ctx.fillStyle;
}

function standardize_color(str){
    var ctx = document.createElement("canvas").getContext("2d");
    ctx.fillStyle = str;
    return ctx.fillStyle;
}

document.getElementById("myspan1").innerHTML = standardize_color("red");
document.getElementById("myspan2").innerHTML = standardize_color("PeachPuff");
document.getElementById("myspan3").innerHTML = standardize_color("PaleGoldenRod"); 
document.getElementById("myspan4").innerHTML = standardize_color("RGB(123,234,142)"); 
document.getElementById("myspan5").innerHTML = standardize_color("HSL(284,6%,49%)");

span { font-weight:800; }

The color named "Red" has a code of: <span id="myspan1">(requires js)</span>.<br>
 ...and color "PeachPuff"'s code is: <span id="myspan2">(requires js)</span>.<br>
 ...and "PaleGoldenRod" is: <span id="myspan3">(requires js)</span>.<br><br>
 
It works with "RGB(123,234,142)" too: <span id="myspan4">(needs js)</span>  
and therefore with: "HSL(284,6%,49%)", which is: <span id="myspan5">(requires js)
</span>.  Handy!

Answer 3

This will give it to you in RGB - you should be able to do the hex conversion pretty easily.

d = document.createElement("div");
d.style.color = "white";
document.body.appendChild(d)
//Color in RGB 
window.getComputedStyle(d).color

Get Computed style is not supported on all browsers.

Answer 4

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 5

Here function where you use the browser to calculate it for you

function getHexColor(colorStr) {
    var a = document.createElement('div');
    a.style.color = colorStr;
    var colors = window.getComputedStyle( document.body.appendChild(a) ).color.match(/\d+/g).map(function(a){ return parseInt(a,10); });
    document.body.removeChild(a);
    return (colors.length >= 3) ? '#' + (((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1)) : false;
}
getHexColor('teal') // returns #008080

Explanation by line:

• Create html element
• Set the color
• Get the rgb-code form the element which is just appended to the body (so it is rendered), filter numbers and convert each number to an integer.
• Remove the html element we just created
• Return the HEX code using zyklus code (see credits for more info)

credits to zyklus for his rgb to hex code

Answer 6

Here's an all purpose solution that does exactly what you want in every browser that is 100% programmatic, goodbye giant static table of names and hex values!:

// Here is the solution tied together as a native String native extension using 
// MooTools, though you can implement the same thing in whatever framework you prefer:

(function(String){

var valueMatch = {
        'rgb(0,0,0)': { 'black': ' ', 'rgb(0,0,0)': ' ' },
        'rgba(0,0,0,0)': { 'transparent': ' ', 'rgba(0,0,0,0)': ' ' },
        '#ffffff': { 'transparent': ' ' },
        'transparent': { 'transparent': ' ' }
    },
    colorFromProbe = function(color){
        color = color.toString();
        if(!color.match(/^#.+$|^[^0-9]+$/)) return color;
        var probe = ($('moo_color_probe') || new Element('textarea', {
                'id': 'moo_color_probe',
                'styles': {
                    'display': 'none',
                    'color': 'transparent'
                }
            }).inject(document.body, 'after'));
        try{ probe.setStyle('color', color) } catch(e){ return color } //IE throws an error instead of defaulting the style to some color or transparent when the value is unrecognized
        var computed = (Browser.ie) ? ieColorToHex(probe) : (Browser.opera) ? probe.style.color : probe.getComputedStyle('color'),
            match = valueMatch[computed.replace(/ /g, '')];
        probe.setStyle('color', 'transparent');
        if((!Browser.ie || Browser.ie9) && color == 'transparent' && (match && match['transparent'])) return 'rgba(0, 0, 0, 0)';
        return (computed == 'transparent' || match && !match[color.replace(/ /g, '')]) ? color : computed;
    },
    ieColorToHex = function(probe){ // Special IE mojo, thanks to Dean Edwards for the inspiration, his code used a pop-up window to test the color, I found you can simply use a textarea instead ;)
        var value = probe.set('value', '').createTextRange().queryCommandValue("ForeColor");
        value = (((value & 0x0000ff) << 16) | (value & 0x00ff00) | ((value & 0xff0000) >>> 16)).toString(16);
        return "#000000".slice(0, 7 - value.length) + value;
    };

    String.implement({
        colorToRgb: function(){
            var color = colorFromProbe(this);
            return (color.charAt(0) == '#') ? color.hexToRgb() : color;
        },
        colorToHex: function(){
            var color = colorFromProbe(this);
            return (color.test('rgb')) ? color.rgbToHex() : color;
        }
    });

})(String);    

A more complete explanation and live example can be found here: http://www.backalleycoder.com/2010/10/05/converting-css-named-colors-to-rgb-and-hex/

Answer 7

You'll need to rely on getComputedStyle(...).

Example of using getComputedStyle:

function convertToHexColor(englishColor) {

    // create a temporary div. 
    var div = $('<div></div>').appendTo("body").css('background-color', englishColor);
    var computedStyle = window.getComputedStyle(div[0]);

    // get computed color.
    var computedColor = computedStyle.backgroundColor;

    // cleanup temporary div.
    div.remove();

    // done.
    return computedColor;

    // The above returns "rgb(R, G, B)" on IE9/Chrome20/Firefox13.
};

And to convert "rgb(R, G, B)" to #RRGGBB you can use:

function convertRGBDecimalToHex(rgb)
{
    var regex = /rgb *\( *([0-9]{1,3}) *, *([0-9]{1,3}) *, *([0-9]{1,3}) *\)/;
    var values = regex.exec(rgb);
    if(values.length != 4)
    {
        return rgb; // fall back to what was given.              
    }
    var r = Math.round(parseFloat(values[1]));
    var g = Math.round(parseFloat(values[2]));
    var b = Math.round(parseFloat(values[3]));
    return "#" 
        + (r + 0x10000).toString(16).substring(3).toUpperCase() 
        + (g + 0x10000).toString(16).substring(3).toUpperCase()
        + (b + 0x10000).toString(16).substring(3).toUpperCase();
}

Answer 8

building on Greg's answer including gray/gray version

added: flag to pass through unresolved strings

available as gist colorhelpersforcanvas.js

String.prototype.colorNameToHex = function (returnUnresolved) { // color list from https://stackoverflow.com/q/1573053/731179  with added gray/gray
    var hexRGB, definedColorNames = {"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", "darkgrey": "#a9a9a9", "darkslategrey": "#2f4f4f", "dimgrey": "#696969", "grey": "#808080", "lightgray": "#d3d3d3", "lightslategrey": "#778899", "slategrey": "#708090"};
    if (definedColorNames[this.toLowerCase()] !== undefined) {
        hexRGB = definedColorNames[this.toLowerCase()];
        // to keep unresolved strings set flag returnUnresolved to true
    } else {if (returnUnresolved) {hexRGB = this; } else {hexRGB = undefined; } }
    return hexRGB;
};

some test cases:

console.log("black".colorNameToHex());                //returns #000000
console.log("rgba(100,100,0,0.7)".colorNameToHex());  //returns undefined 
console.log("rgba(100,100,0,0.7)".colorNameToHex(1)); //returns rgba(100,100,0,0.7) 

as a bonus here my use case for that in a color-string to color-string-with-alpha conversion:

works with any css defined color including: rgba, rgb, r%g%b%, #rgb, #rrggbb, hsl, hsla

mostly useful in drawing with alpha/opacity/transparency onto a HTML5 canvas element with passed on color strings

String.prototype.setAlpha = function (alpha) {
    // change alpha of color string in any css color space
    // intended for use in canvas/svg
    // currently implemented:
    // css defined colors               > rgba
    // rgba, rgb, r%g%b%, #rgb, #rrggbb > rgba
    // hsl, hsla                        > hsla
    // unresolved                       > as is
    //
    // If no alpha is passed its is set to 1 or keeps the value in rgba/hsla

    // kill whitespace split at "(", ")", ","
    var i, hex, c = this.replace(/\s/g, '').split(/[\(\),]/);
    function extractHex(string) {
        if (string.charAt(0) === "#") {  // detect hex strings
            hex = string.replace(/#/g, '');
            string = "hex";
        } else {hex = undefined; }
        return string;
    }
    extractHex(c[0]);
    if (["rgba", "rgb", "hsla", "hsl", "hex"].indexOf(c[0]) === -1) {
        c[0] = extractHex(c[0].colorNameToHex(1)); // detect defined color names
    }
    switch (c[0]) {
    case "rgba":
        if (alpha === undefined) {alpha = c[4]; }
        c = "rgba(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    case "rgb":
        if (alpha === undefined) {alpha = 1; }
        //  if colors are in percentage values
        for  (i = 1; i <= 3; i = i + 1) {
            if (c[i].charAt(c[i].length - 1) === "%") {
                c[i] = Math.round(c[i].replace(/%/g, '') * 2.55);
            }
        }
        c = "rgba(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    case "hsl":
        if (alpha === undefined) {alpha = 1; }
        c = "hsla(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    case "hsla":
        if (alpha === undefined) {alpha = c[4]; }
        c = "hsla(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    case "hex":
        if (alpha === undefined) {alpha = 1; }
        if (hex.length === 3) {
            c[1] = parseInt(hex.charAt(0) + hex.charAt(0), 16);
            c[2] = parseInt(hex.charAt(1) + hex.charAt(1), 16);
            c[3] = parseInt(hex.charAt(2) + hex.charAt(2), 16);
        } else if (hex.length === 6) {
            c[1] = parseInt(hex.charAt(0) + hex.charAt(1), 16);
            c[2] = parseInt(hex.charAt(2) + hex.charAt(3), 16);
            c[3] = parseInt(hex.charAt(4) + hex.charAt(5), 16);
        } else {break; }
        c = "rgba(" + c[1] + ", " + c[2] + ", " + c[3] + ", " + alpha + ")";
        break;
    default: c = this; break;
    }
    return c;
};

test:

console.log("orange".setAlpha(0.3));

Answer 9

Download & include the w3color.js from w3school.

then in your script you can use any of the following functions:

let c = w3color("violet");
c.darker(n)
c.desaturate(n)
c.isDark(n)
c.lighter(n)
c.saturate(n)
c.toCmyk()
c.toCmykString()
c.toCmykStringDecimal()
c.toHexString()
c.toHsl()
c.toHslString()
c.toHslStringDecimal()
c.toHslaString()
c.toHwb()
c.toHwbString()
c.toHwbStringDecimal()
c.toHwbaString()
c.toName()
c.toNcol()
c.toNcolString()
c.toNcolStringDecimal()
c.toNcolaString()
c.toRgb()
c.toRgbString()
c.toRgbaString()

Answer 10

Run the snippet to see how easily "any" valid CSS color (HSL, names, hex, system colors*, etc.) can be converted to R/G/B values using any element you happen to have laying around.

*Enter a value of background and you'll get your Windows Desktop background color (in Firefox, anyways).

go();
function go() {
  clr.style.backgroundColor = document.getElementById('txt').value;
  document.getElementById('rgb').innerHTML = window.getComputedStyle(clr).backgroundColor;
}

* { margin:0; box-sizing:border-box; font-family:verdana; overflow:hidden; }
#txt,#rgb,#clr { height:30vh; width:97vw; padding:5vmin; margin:2vmin; font-size:13vh; border:1vmin solid; text-align:center; vertical-align:middle;}
#txt{margin-bottom:0;}

<input type='text' id='txt' onkeyup='go()' value='chartreuse' placeholder='Enter any css color . . .' autofocus>
<div id='clr'></div>
<div id='rgb'></div>

Answer 11

The solution from Ties converted to TypeScript:

export const getHexColorFromLiteral = (
  colorStr:
    | 'aliceblue'
    | 'antiquewhite'
    | 'aqua'
    | 'aquamarine'
    | 'azure'
    | 'beige'
    | 'bisque'
    | 'black'
    | 'blanchedalmond'
    | 'blue'
    | 'blueviolet'
    | 'brown'
    | 'burlywood'
    | 'cadetblue'
    | 'chartreuse'
    | 'chocolate'
    | 'coral'
    | 'cornflowerblue'
    | 'cornsilk'
    | 'crimson'
    | 'cyan'
    | 'darkblue'
    | 'darkcyan'
    | 'darkgoldenrod'
    | 'darkgray'
    | 'darkgreen'
    | 'darkkhaki'
    | 'darkmagenta'
    | 'darkolivegreen'
    | 'darkorange'
    | 'darkorchid'
    | 'darkred'
    | 'darksalmon'
    | 'darkseagreen'
    | 'darkslateblue'
    | 'darkslategray'
    | 'darkturquoise'
    | 'darkviolet'
    | 'deeppink'
    | 'deepskyblue'
    | 'dimgray'
    | 'dodgerblue'
    | 'firebrick'
    | 'floralwhite'
    | 'forestgreen'
    | 'fuchsia'
    | 'gainsboro'
    | 'ghostwhite'
    | 'gold'
    | 'goldenrod'
    | 'gray'
    | 'green'
    | 'greenyellow'
    | 'honeydew'
    | 'hotpink'
    | 'indianred'
    | 'indigo'
    | 'ivory'
    | 'khaki'
    | 'lavender'
    | 'lavenderblush'
    | 'lawngreen'
    | 'lemonchiffon'
    | 'lightblue'
    | 'lightcoral'
    | 'lightcyan'
    | 'lightgoldenrodyellow'
    | 'lightgray'
    | 'lightgreen'
    | 'lightpink'
    | 'lightsalmon'
    | 'lightseagreen'
    | 'lightskyblue'
    | 'lightslategray'
    | 'lightsteelblue'
    | 'lightyellow'
    | 'lime'
    | 'limegreen'
    | 'linen'
    | 'magenta'
    | 'maroon'
    | 'mediumaquamarine'
    | 'mediumblue'
    | 'mediumorchid'
    | 'mediumpurple'
    | 'mediumseagreen'
    | 'mediumslateblue'
    | 'mediumspringgreen'
    | 'mediumturquoise'
    | 'mediumvioletred'
    | 'midnightblue'
    | 'mintcream'
    | 'mistyrose'
    | 'moccasin'
    | 'navajowhite'
    | 'navy'
    | 'oldlace'
    | 'olive'
    | 'olivedrab'
    | 'orange'
    | 'orangered'
    | 'orchid'
    | 'palegoldenrod'
    | 'palegreen'
    | 'paleturquoise'
    | 'palevioletred'
    | 'papayawhip'
    | 'peachpuff'
    | 'peru'
    | 'pink'
    | 'plum'
    | 'powderblue'
    | 'purple'
    | 'rebeccapurple'
    | 'red'
    | 'rosybrown'
    | 'royalblue'
    | 'saddlebrown'
    | 'salmon'
    | 'sandybrown'
    | 'seagreen'
    | 'seashell'
    | 'sienna'
    | 'silver'
    | 'skyblue'
    | 'slateblue'
    | 'slategray'
    | 'snow'
    | 'springgreen'
    | 'steelblue'
    | 'tan'
    | 'teal'
    | 'thistle'
    | 'tomato'
    | 'turquoise'
    | 'violet'
    | 'wheat'
    | 'white'
    | 'whitesmoke'
    | 'yellow'
    | 'yellowgreen'
) => {
    const div = document.createElement('div')
    div.style.color = colorStr
    document.body.appendChild(div)

    const computedColor = window.getComputedStyle(div).color
    const matchResult = computedColor.match(/\d+/g)
    if (matchResult !== null) {
        const colors = matchResult.map((a) => parseInt(a, 10))

        document.body.removeChild(div)
        return colors.length >= 3
            ? '#' + ((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1)
            : false
    }

    return false
}

Answer 12

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.

Answer 13

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 14

This function request a named color and send return a hexadecimal color value. If the named color not supported (example "whyte") send back black color by default but on consol you can find a warning: Not supported named color: ${namedColor}

const namedColorToHex = namedColor => {
    const html = document.querySelector("html");
    const originalColor = html.style.color;
    html.style.color = namedColor;
    const rgbFormatBgColor = window.getComputedStyle(html).color;
    if (namedColor !== "black" && rgbFormatBgColor === "rgb(0, 0, 0)") {
        console.warn(`Not supported named color: ${namedColor}`);
    }
    html.style.color = originalColor;
    const regEx = /(\d+)/g;
    const result = rgbFormatBgColor.match(regEx);
    let hexColor = `#`;
    result.forEach(value => {
        let hex = Number(value).toString(16);
        if (hex.length === 1) {
            hex = `0${hex}`;
        }
        hexColor += hex;
    });
    return hexColor;
};

Answer 15

With Firefox 94 you get the rgb color when formated with a color name. But you have to inject the dummy element at first to the page.

// Vanilla and jQuery

console.clear();

var 
  colors = ['cyan', 'magenta', 'yellow']
  dummy     = {},
  colorObj  = {},
  rgbString = '',
  rgb2hex   = function(rgb) {
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    return (rgb && rgb.length === 4) ? "#" +
    ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
  }
;

$(colors).each(function(i, color) {
  dummy = $('<b style="background-color:' + color + '"></b>');
  // inject the dummy
  $('body').append(dummy);
  // get the rgb color 
  rgbString = dummy.css('background-color');
  // build an object with 'color name', 'rgb color' and 'hex color'
  colorObj[i] = [color, rgbString, rgb2hex(rgbString)]; 
  // delete the dummy 
  dummy.remove();  
});

console.dir(colorObj);

If you need an array with all 140 color names

colors = [
  'aliceblue',
  'antiquewhite',
  'aqua',
  'aquamarine',
  'azure',
  'beige',
  'bisque',
  'black',
  'blanchedalmond',
  'blue',
  'blueviolet',
  'brown',
  'burlywood',
  'cadetblue',
  'chartreuse',
  'chocolate',
  'coral',
  'cornflowerblue',
  'cornsilk',
  'crimson',
  'cyan',
  'darkblue',
  'darkcyan',
  'darkgoldenrod',
  'darkgray',
  'darkgreen',
  'darkkhaki',
  'darkmagenta',
  'darkolivegreen',
  'darkorange',
  'darkorchid',
  'darkred',
  'darksalmon',
  'darkseagreen',
  'darkslateblue',
  'darkslategray',
  'darkturquoise',
  'darkviolet',
  'deeppink',
  'deepskyblue',
  'dimgray',
  'dodgerblue',
  'firebrick',
  'floralwhite',
  'forestgreen',
  'fuchsia',
  'gainsboro',
  'ghostwhite',
  'gold',
  'goldenrod',
  'gray',
  'green',
  'greenyellow',
  'honeydew',
  'hotpink',
  'indianred',
  'indigo',
  'ivory',
  'khaki',
  'lavender',
  'lavenderblush',
  'lawngreen',
  'lemonchiffon',
  'lightblue',
  'lightcoral',
  'lightcyan',
  'lightgoldenrodyellow',
  'lightgray',
  'lightgreen',
  'lightpink',
  'lightsalmon',
  'lightseagreen',
  'lightskyblue',
  'lightslategray',
  'lightsteelblue',
  'lightyellow',
  'lime',
  'limegreen',
  'linen',
  'magenta',
  'maroon',
  'mediumaquamarine',
  'mediumblue',
  'mediumorchid',
  'mediumpurple',
  'mediumseagreen',
  'mediumslateblue',
  'mediumspringgreen',
  'mediumturquoise',
  'mediumvioletred',
  'midnightblue',
  'mintcream',
  'mistyrose',
  'moccasin',
  'navajowhite',
  'navy',
  'oldlace',
  'olive',
  'olivedrab',
  'orange',
  'orangered',
  'orchid',
  'palegoldenrod',
  'palegreen',
  'paleturquoise',
  'palevioletred',
  'papayawhip',
  'peachpuff',
  'peru',
  'pink',
  'plum',
  'powderblue',
  'purple',
  'red',
  'rosybrown',
  'royalblue',
  'saddlebrown',
  'salmon',
  'sandybrown',
  'seagreen',
  'seashell',
  'sienna',
  'silver',
  'skyblue',
  'slateblue',
  'slategray',
  'snow',
  'springgreen',
  'steelblue',
  'tan',
  'teal',
  'thistle',
  'tomato',
  'turquoise',
  'violet',
  'wheat',
  'white',
  'whitesmoke',
  'yellow',
  'yellowgreen'
]

Answer 16

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;

}