Já falei disso [nesta outra resposta minha](http://pt.stackoverflow.com/a/53399/132): > # Composição de cores > É importante ter em mente que embora o branco seja o resultado da soma do vermelho, do verde e do azul, isso não significa que cada uma destas três cores representa um terço do branco. Isso não é verdade, e pode ser percebido facilmente de forma empírica ao notar-se que o verde puro é brilhante, enquanto que o vermelho puro é fosco e o azul puro é escuro. > > Na verdade, a proporção exata da composição da luz branca depende da disposição das diferentes células receptoras na retina do olho do observador, condições de saúde, cansaço, idade e stress do observador, das condições de iluminação, do brilho e contraste da tela, do ângulo e direção entre o plano da tela e a linha de visada do observador, do tipo da tela (reflexiva ou anti-reflexiva, CRT, LED, plasma, LCD, retroprojetor, kindle, etc), entre muitas outras variáveis, podendo até mesmo variar de um olho para outro em uma mesma pessoa com visão normal e saudável. > > Mas, desconsiderando-se estas variáveis que estão fora do controle do programador e pressupondo que o usuário tenha uma visão saudável e esteja usando uma tela de boa qualidade em um ambiente com iluminação adequada, há uma fórmula que vi em um livro uma vez há alguns anos que dava a seguinte proporção: > > > ![Branco = 0,290 * vermelho + 0,599 * verde + 0,111 * azul](https://chart.googleapis.com/chart?cht=tx&chf=bg,s,FFFFFF00&chl=\text{Brilho}\;%3d\;0,290\;\times\;\text{vermelho}\;%2b\;0,599\;\times\;\text{verde}\;%2b0,111\;\times\;\text{azul}\;) > > É uma pena que não lembro o título, mas o bfavaretto deu três referências para isso nos comentários: [1](http://stackoverflow.com/questions/596216/formula-to-determine-brightness-of-rgb-color), [2](http://stackoverflow.com/questions/9470599/how-to-calculate-brightness-of-rgb-color) e [3](http://www.w3.org/TR/AERT#color-contrast), embora existam pequenas variações nos fatores exatos. > > Ter em mente estes fatores da composição do brilho é importante para o caso de você quiser fazer um algoritmo de *anti-aliasing* que considere que os subpixels têm diferentes cores. > > Essa mesma fórmula dada acima para a cor branca, pode ser usada para medir-se o brilho de uma determinada cor a partir de seus componentes vermelho, verde e azul. De acordo com [esta página](http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx), a fórmula recomendada pela W3C (parecida com essa anterior) é: > > > ![Brilho = 0,299 * vermelho + 0,587 * verde + 0,114 * azul](https://chart.googleapis.com/chart?cht=tx&chf=bg,s,FFFFFF00&chl=\text{Brilho}\;%3d\;0,299\;\times\;\text{vermelho}\;%2b\;0,587\;\times\;\text{verde}\;%2b0,114\;\times\;\text{azul}\;) > > Entretanto, essa mesma página diz que essa fórmula pode falhar ainda. Por exemplo, a cor (240, 0, 30) é um pouco mais brilhante que (80, 80, 80), sendo que por essa fórmula da W3C, a primeira teria um brilho de 75,18 enquanto que a segunda teria 80 ([![vermelho e cinza][2]][2]). O motivo disso é que o brilho é na verdade a distância que uma cor tem em relação ao preto, e não apenas a soma ponderada dos valores das suas tonalidades. > > Se considerarmos todas as cores dispostas como diferentes pontos internos em um paralelepípedo onde um dos vértices é o preto, o vértice oposto é o branco, os vértices adjacentes ao preto são o vermelho, o verde e o azul e os vértices opostos a esses são o ciano, o magenta e o amarelo (nesta ordem), teríamos que uma das dimensões corresponde ao valor do componente vermelho, a outra do componente verde e a outra do componente azul. Se definirmos o tamanho de cada uma das dimensões desse paralelepípedo como a intensidade do componente da cor correspondente, então poderíamos usar a distância euclideana do ponto ocupado por uma cor qualquer dentro desse paralelepípedo até o vértice da cor preta como uma medida do brilho. Assim, para calcular a intensidade de uma cor, basta usar o teorema de Pitágoras. Se usarmos os valores da W3C, chegaríamos a [esta fórmula](http://alienryderflex.com/hsp.html): > > > ![Brilho = sqrt(0,299 * (vermelho)² + 0,587 * (verde)² + 0,114 * (azul)²)](https://chart.googleapis.com/chart?cht=tx&chf=bg,s,FFFFFF00&chl=\text{Brilho}\;%3d\;\sqrt{0,299\;\times\;%28\text{vermelho}%29^2\;%2b\;0,587\;\times\;%28\text{verde}%29^2\;%2b0,114\;\times\;%28\text{azul}%29^2}\;) > > Nesta fórmula, os brilhos das cores acima seriam 131,62 e 80. Assim sendo, uma solução em Javascript considerando que uma cor clara seria aquela mais perto do branco enquanto que uma escura é a mais perto do preto, seria isso: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> /** * Função que define se uma cor, dado os valores dos componentes vermelho, verde e azul em uma escala de 0 a 1, é clara ou escura. * @param {int} r - Valor do componente vermelho em uma escala de 0 a 1. * @param {int} g - Valor do componente verde em uma escala de 0 a 1. * @param {int} b - Valor do componente azul em uma escala de 0 a 1. */ function corClaraRgb(r, g, b) { return Math.sqrt(r * r * 0.299 + g * g * 0.587 + b * b * 0.114) >= 0.5; } // Mapeia nomes comuns de cores. Fonte: http://www.w3schools.com/cssref/css_colors.asp var colorMap = {"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", "DARKGREY": "#A9A9A9", "DARKGREEN": "#006400", "DARKKHAKI": "#BDB76B", "DARKMAGENTA": "#8B008B", "DARKOLIVEGREEN": "#556B2F", "DARKORANGE": "#FF8C00", "DARKORCHID": "#9932CC", "DARKRED": "#8B0000", "DARKSALMON": "#E9967A", "DARKSEAGREEN": "#8FBC8F", "DARKSLATEBLUE": "#483D8B", "DARKSLATEGRAY": "#2F4F4F", "DARKSLATEGREY": "#2F4F4F", "DARKTURQUOISE": "#00CED1", "DARKVIOLET": "#9400D3", "DEEPPINK": "#FF1493", "DEEPSKYBLUE": "#00BFFF", "DIMGRAY": "#696969", "DIMGREY": "#696969", "DODGERBLUE": "#1E90FF", "FIREBRICK": "#B22222", "FLORALWHITE": "#FFFAF0", "FORESTGREEN": "#228B22", "FUCHSIA": "#FF00FF", "GAINSBORO": "#DCDCDC", "GHOSTWHITE": "#F8F8FF", "GOLD": "#FFD700", "GOLDENROD": "#DAA520", "GRAY": "#808080", "GREY": "#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", "LIGHTGRAY": "#D3D3D3", "LIGHTGREY": "#D3D3D3", "LIGHTGREEN": "#90EE90", "LIGHTPINK": "#FFB6C1", "LIGHTSALMON": "#FFA07A", "LIGHTSEAGREEN": "#20B2AA", "LIGHTSKYBLUE": "#87CEFA", "LIGHTSLATEGRAY": "#778899", "LIGHTSLATEGREY": "#778899", "LIGHTSTEELBLUE": "#B0C4DE", "LIGHTYELLOW": "#FFFFE0", "LIME": "#00FF00", "LIMEGREEN": "#32CD32", "LINEN": "#FAF0E6", "MAGENTA": "#FF00FF", "MAROON": "#800000", "MEDIUMAQUAMARINE": "#66CDAA", "MEDIUMBLUE": "#0000CD", "MEDIUMORCHID": "#BA55D3", "MEDIUMPURPLE": "#9370DB", "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": "#DB7093", "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", "SLATEGREY": "#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"}; /** * Função que define se uma cor, dado o nome dela, é clara ou escura. * @param {string} cor - Nome da cor, pode ter um dos seguintes formatos: '#abcdef', '#abc', 'rgb(a,b,c)', 'rgba(a,b,c)' ou ser um nome comum de cor, tal como 'red' ou 'yellow'. */ function corClara(cor) { var r, g, b; try { var rgb = cor.trim().toUpperCase(); if (colorMap[rgb]) rgb = colorMap[rgb]; if (rgb.startsWith("#") && rgb.length === 7) { r = parseInt(rgb.substring(1, 3), 16) / 255; g = parseInt(rgb.substring(3, 5), 16) / 255; b = parseInt(rgb.substring(5, 7), 16) / 255; } else if (rgb.startsWith("#") && rgb.length === 4) { r = parseInt(rgb.substring(1, 2), 16) * 17 / 255; g = parseInt(rgb.substring(2, 3), 16) * 17 / 255; b = parseInt(rgb.substring(3, 4), 16) * 17 / 255; } else if (rgb.startsWith("RGB") && rgb.endsWith(")")) { rgb = rgb.substring(3); var a = rgb.charAt(0) === 'A'; if (a) rgb = rgb.substring(1); rgb = rgb.trim(); if (!rgb.startsWith("(")) throw new Error(); rgb = rgb.substring(1, rgb.length - 1); var x = rgb.split(','); if (x.length !== (a ? 4 : 3)) throw new Error(); r = parseInt(x[0].trim()); g = parseInt(x[1].trim()); b = parseInt(x[2].trim()); aa = a ? parseFloat(x[3].trim()) : 0.0; if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a) || r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255 || aa < 0.0 || aa > 1.0) throw new Error(); r /= 255; g /= 255; b /= 255; } else { throw new Error(); } return corClaraRgb(r, g, b); } catch (x) { throw new Error("A cor '" + cor + "' não foi reconhecida."); } } // Teste function teste(x) { try { document.write("A cor '" + x + "' é uma cor " + (corClara(x) ? "clara" : "escura") + ".<br>"); } catch (e) { document.write(e.message + "<br>"); } } document.write("<h2>Essas cores devem ser todas válidas</h2>"); teste("#102030"); teste("#0000ff"); teste("#00f"); teste("#00ff00"); teste("#FF00FF"); teste("#808080"); teste("#888"); teste("#ffffff"); teste("#fff"); teste("#000000"); teste("#000"); teste("#a000A0"); teste("#a0A"); teste("yellow"); teste("BLUE"); teste("PowderBlue"); teste("rgb(20, 40, 60)"); teste("rgb(100, 180, 250)"); teste(" rgb (100 , 180 , 250 )"); teste(" rgb (255 , 255 , 255 ) "); teste("rgba(20, 40, 60, 0.4)"); teste("rgba(100, 180, 250, 0.7)"); teste(" rgba (100 , 180 , 250 , 0.9)"); teste(" rgba (255 , 255 , 255 , 0.33 ) "); document.write("<h2>Essas cores devem ser todas inválidas</h2>"); teste("hahaha"); teste("cor de burro quando foge"); teste("rgba(255, 255, 255)"); teste("rgb(255, 255, 255, 255)"); teste("rgb(255, 255)"); teste("rgba(255, 255, 255, 0, 0)"); teste("rgb(256, 0, 0)"); teste("rgb(-1, 0, 0)"); teste("rgba(256, 0, 0, 0.0)"); teste("rgba(-1, 0, 0, 0.0)"); teste("rgba(255, 0, 0, -1.0)"); teste("rgba(255, 0, 0, 1.1)"); teste({}); teste(1245); teste([]); teste(undefined); teste(null); <!-- end snippet --> [2]: https://i.sstatic.net/Sn58i.png