Andrey
Andrey

Reputation: 21295

Javascript function to convert color names to hex codes

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 :)

Upvotes: 111

Views: 110557

Answers (17)

Muhammed Rahif
Muhammed Rahif

Reputation: 668

For frontend I use the below:

/**
   * Converts a color name to its hexadecimal representation.
   *
   * This function creates a temporary DOM element, sets its color style to the provided color name,
   * and then retrieves the computed RGB color value. It then converts the RGB values to a hexadecimal string.
   *
   * @param color - The color name to convert (e.g., 'red', 'blue', 'green').
   * @param hash - Optional boolean flag to include a hash symbol (#) at the beginning of the hex string. Default is false.
   * @returns The hexadecimal representation of the color.
   * @throws Will throw an error if the provided color name is invalid.
   *
   * @remarks
   * This function relies on the browser's ability to parse and compute the color value using the `window.getComputedStyle` method.
   * Therefore, it requires a browser environment to work correctly and will not function in non-browser environments such as Node.js.
   *
   * @browserSupport
   * This function is supported in all modern browsers that support the `window.getComputedStyle` method and the `document` object.
   * This includes, but is not limited to, Chrome, Firefox, Safari, Edge, and Internet Explorer 9 and above.
   */
  colorNameToHex(color: string, hash = false): string {
    const d = document.createElement('div');
    d.style.color = color;
    document.body.appendChild(d);

    const rgb = window.getComputedStyle(d).color;
    document.body.removeChild(d);

    const rgbValues = rgb.match(/\d+/g);
    if (!rgbValues) {
      throw new Error('Invalid color format');
    }

    const [r, g, b] = rgbValues.map(Number);

    const componentToHex = (c: number) => {
      const hex = c.toString(16);
      return hex.length === 1 ? '0' + hex : hex;
    };

    return (hash ? '#' : '') + componentToHex(r) + componentToHex(g) + componentToHex(b);
  }

Upvotes: 0

deadcoder0904
deadcoder0904

Reputation: 8693

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
}

Upvotes: 1

JayB
JayB

Reputation: 1601

@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!

Upvotes: 97

Andreas
Andreas

Reputation: 85

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'
]

Upvotes: 0

Sadern Alwis
Sadern Alwis

Reputation: 114

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()

Upvotes: 3

ashleedawg
ashleedawg

Reputation: 21657

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>

Upvotes: 2

lendoo
lendoo

Reputation: 573

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;
};

Upvotes: 0

Greg
Greg

Reputation: 321844

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;
}

Upvotes: 144

Nate
Nate

Reputation: 4747

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.

Upvotes: 53

Ties
Ties

Reputation: 5846

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

Upvotes: 29

Johnny Rockex
Johnny Rockex

Reputation: 4196

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;

}

Upvotes: -3

Tim
Tim

Reputation: 2419

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.

Upvotes: 68

James Kyburz
James Kyburz

Reputation: 14503

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"

Upvotes: 0

mxfh
mxfh

Reputation: 466

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));

Upvotes: 3

DuckMaestro
DuckMaestro

Reputation: 15915

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();
}

Upvotes: 6

csuwldcat
csuwldcat

Reputation: 8249

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/

Upvotes: 14

Kip
Kip

Reputation: 109503

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.

Upvotes: 0

Related Questions