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