Função Javascript para converter nomes de cores para códigos hex
Existe uma função incorporada que converta uma cor pelo nome em sua representação hex? Como se eu quisesse passar por 'branco' e receber '# FFFFFF'. Eu realmente quero evitar codificar todas as cem if's eu mesmo:)
11 answers
Não, mas usando a lista aqui você poderia criar um. Algo do género:
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;
}
Isto dar - lhe-á em RGB-você deve ser capaz de fazer a conversão hex muito facilmente.
d = document.createElement("div");
d.style.color = "white";
document.body.appendChild(d)
//Color in RGB
window.getComputedStyle(d).color
O estilo calculado não é suportado em todos os navegadores.
Edit: eu limpei isto um pouco e fiz um gist e demo dele. A abordagem básica continua a ser a mesma.
"adicionar um elemento no DOM e verificar a sua ComputedStyle" abordagem parece um pouco complexo para mim - você precisa adicioná-lo e verificá-lo e lembre-se de removê-lo e você está mudando o DOM apenas para computar uma cor e não causa refluxo? Então aqui está uma solução baseada em um temporário (e nunca renderizado) <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 que isto permite-lhe usar qualquer coisa que seja um fillStyle de tela válido, então se você quiser gin acima de um padrão de 1 pixel de uma imagem, ele vai lhe dizer a cor disso também.
Testei isto em versões razoavelmente modernas de IE, Chrome, Safari e Firefox.Aqui a função onde usa o navegador para o Calcular para si
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
Explicação por linha:
- criar um elemento html
- Define a cor
- Obter o código rgb forma o elemento que é apenas adicionado ao corpo (por isso é renderizado), filtrar números e converter cada número para um inteiro.
- Remova o elemento html que acabamos de criar
- Devolve o código HEX usando o código zyklus (ver créditos para mais info)
créditos a zyklus pelo seu código rgb para hex
// 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);
Uma explicação mais completa e um exemplo vivo podem ser encontrados aqui:
http://www.backalleycoder.com/2010/10/05/converting-css-named-colors-to-rgb-and-hex/
Exemplo de utilização 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.
};
E para converter " rgb (R, G, B)" para #RRGGBB você pode usar:
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();
}
@dlauzon sugeriu que convertesse o meu comentário numa resposta. Obrigado por sugerir! Aqui está:)
function standardize_color(str){
var ctx = document.createElement(&#39;canvas&#39;).getContext('2d');
ctx.fillStyle = str;
return ctx.fillStyle;
}
Baseado na resposta do Gregincluindo a versão cinzenta/cinzenta
Adicionado: bandeira para passar através de cordas não resolvidas
Disponível como 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;
};
Alguns casos de teste:
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)
Como bónus aqui, o meu caso de uso para isso numa cadeia de cores para conversão cor-cadeia-com-alfa:
Funciona com qualquer cor definida por css incluindo: rgba, rgb, r%g%b%, #RGB, #RRGGBB, hsl, hsla
Principalmente útil em desenho com Alfa/opacidade / transparência num elemento de tela HTML5 com sequências de cores passadas
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;
};
Teste:
console.log("orange".setAlpha(0.3));
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"
O código rápido apenas para os valores HEX / RGB pode ser útil para alguém, e pode ser adaptado para incluir nomes: puxe todo o objecto no loop for, verifique o nome e, se corresponder, terá o seu hex / rbg. Eles são levados daqui.: http://www.colourlovers.com/web/blog/2008/04/22/all-120-crayon-names-color-codes-and-fun-facts
Mais importante, por favor, note a ortografia correcta de "cor" :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;
}