Hi,
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 :)
Thank you! Andrey
A:
No, there isn't. And even if it were, it would probably most likely support something like RGB to HEX, which would translate [255,255,255] to #FFFFFF, not 'white'. You can find examples of RGB to HEX conversions and vice versa on the internet, but less likely what you want. You'll maybe have to create it yourself, but it's not hundreds of lines, you pick the most common 16 colors and create a switch. I don't want to offend you by creating it myself :).
treznik
2009-10-15 15:24:56
A:
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.
Kip
2009-10-15 15:28:52
Where is the guarantee that computed color value will be represented as hex?
kangax
2009-10-15 15:30:51
@kangax: JS would give you the color. how you want to represent it is up to you.
Kip
2009-10-15 16:01:37
+4
A:
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",
"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;
}
Greg
2009-10-15 15:32:17
You might want to guard against inherited properties ;) `colourNameToHex('constructor')`
kangax
2009-10-15 15:34:33
Not trying to knock the wind out of anyone's answer sails here, but as I linked to in the answer I submitted, there is a way to get HEX and RGB from named colors programatically in all browsers with \out having a gigantic table like this. Do people on Stack not read below the fold generally?
csuwldcat
2010-10-17 18:45:35
A:
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)
colorInRGB window.getComputedStyle(d).color
Get Computed style is not supported on all browsers.
Tim
2009-10-15 15:33:55
A:
Here's an all purpose solution that does exactly what you want in every browser: http://www.backalleycoder.com/2010/10/05/converting-css-named-colors-to-rgb-and-hex/
In other news, I will be accepting compliments all day.
csuwldcat
2010-10-08 17:25:21
BTW, as opposed to the lame static object look-up proposed in one of the other answers, this is a programmatic means for figuring out the value for any color name that a browser supports.
csuwldcat
2010-10-15 19:02:58