Já falei disso nesta outra resposta minha:
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:
É uma pena que não lembro o título, mas o bfavaretto deu três referências para isso nos comentários: 1, 2 e 3, 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, a fórmula recomendada pela W3C (parecida com essa anterior) é:
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 (). 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:
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:
/**
* 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);