Fonction Javascript pour convertir les noms de couleurs en codes hexadécimaux
Existe-t-il une fonction intégrée qui convertirait une couleur par son nom en sa représentation hexadécimale? Comme si je voulais passer "blanc" et recevoir "#FFFFFF". Je veux vraiment éviter de coder les centaines si c'est moi :)
Non, mais en utilisant liste ici vous pouvez en créer un. Quelque chose comme ça:
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;
}
Cela vous le donnera en RVB - vous devriez pouvoir faire la conversion hexadécimale assez facilement.
d = document.createElement("div");
d.style.color = "white";
document.body.appendChild(d)
//Color in RGB
window.getComputedStyle(d).color
Le style Get Computed n'est pas pris en charge sur tous les navigateurs.
Edit: J'ai un peu nettoyé cela et en ai fait Gist et demo . L'approche de base reste la même.
L'approche "ajouter un élément au DOM et vérifier son ComputedStyle" me semble un peu complexe - vous devez l'ajouter et le vérifier et n'oubliez pas de le supprimer et vous changez le DOM juste pour calculer une couleur et cela provoque-t-il refusion? Voici donc une solution basée sur un temporaire (et jamais rendu) <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;
}
Notez que cela vous permet d'utiliser tout ce qui est un fillStyle de toile valide, donc si vous voulez gin jusqu'à un motif de 1 pixel à partir d'une image, il vous indiquera également la couleur de cela.
J'ai testé cela dans des versions raisonnablement modernes d'IE, Chrome, Safari et Firefox.
Fonction ici où vous utilisez le navigateur pour le calculer pour vous
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
Explication par ligne:
- Créer un élément html
- Définissez la couleur
- Obtenez le code RVB de l'élément qui vient d'être ajouté au corps (pour qu'il soit rendu), filtrez les nombres et convertissez chaque nombre en un entier.
- Supprimez l'élément html que nous venons de créer
- Renvoyer le code HEX en utilisant le code zyklus (voir les crédits pour plus d'informations)
crédits à zyklus pour son code RVB en hexadécimal
Voici une solution polyvalente qui fait exactement ce que vous voulez dans chaque navigateur qui est 100% programmatique, au revoir une table statique géante de noms et de valeurs hexadécimales!:
// 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);
Une explication plus complète et un exemple en direct peuvent être trouvés ici: http://www.backalleycoder.com/2010/10/05/converting-css-named-colors-to-rgb-and-hex/ =
@dlauzon m'a suggéré de convertir mon commentaire en réponse. Merci d'avoir suggéré! C'est ici :)
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!Vous devrez vous fier à getComputedStyle(...).
Exemple d'utilisation de 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.
};
Et pour convertir "rgb (R, G, B)" en #RRGGBB, vous pouvez utiliser:
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();
}
s'appuyant sur réponse de Greg y compris la version gris/gris
ajouté: indicateur pour passer à travers les chaînes non résolues
disponible en 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;
};
quelques cas de test:
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)
en bonus ici mon cas d'utilisation pour cela dans une conversion de chaîne de couleur en chaîne de couleur avec alpha:
fonctionne avec n'importe quelle couleur définie par CSS y compris: rgba, rgb, r% g% b%, #rgb, #rrggbb, hsl, hsla
surtout utile pour dessiner avec alpha/opacité/transparence sur un élément de toile HTML5 avec des chaînes de couleurs transmises
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;
};
tester:
console.log("orange".setAlpha(0.3));
Pas que ce soit intégré, pour autant que je sache. Ce serait une sorte de hack, mais je pense que vous pouvez créer un div invisible, définir sa propriété d'arrière-plan CSS sur la couleur nommée, puis utiliser JS pour obtenir la couleur d'arrière-plan du div, puis supprimer le div.
IE8 getComputedStyle polyfill si nécessaire
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"
Un code rapide pour les valeurs HEX/RVB uniquement, peut être utile à quelqu'un et peut être adapté pour inclure des noms: tirez tout l'objet dans la boucle for, vérifiez le nom et s'il correspond, vous avez votre hex/rbg. Ils sont extraits d'ici: http://www.colourlovers.com/web/blog/2008/04/22/all-120-crayon-names-color-codes-and-fun-facts
Plus important encore, veuillez noter l'orthographe correcte de "couleur": 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;
}