Como verificar se a cor hexadecimal é “muito preta”?

Estou tentando avaliar o escurecimento de uma cor escolhida por um seletor de cores para ver se é "muito preto" e, em caso afirmativo, defina-o como branco. Achei que poderia usar os primeiros caracteres do valor hexadecimal para fazer isso. Está funcionando, mas também está trocando algumas cores "claras" legítimas.

Eu tenho um código fazendo isso:

        if (lightcolor.substring(0,3) == "#00"|| lightcolor.substring(0,3) == "#010"){
            lightcolor="#FFFFFF";
            color=lightcolor;
        }

Deve haver uma maneira mais eficiente com a matemática hexadecimal de saber que uma cor ultrapassou um certo nível de escuridão? Como se lightcolor + "algum valor hexadecimal" <= "algum valor hexadecimal", defina-o como branco.

Eu adicionei tinyColor, que pode ser útil para isso, mas não tenho certeza.

Você deve extrair os três componentes RGB individualmente e, em seguida, usar uma fórmula padrão para converter os valores RGB resultantes em seu brilho percebido.

Supondo uma cor de seis caracteres:

var c = c.substring(1);      // strip #
var rgb = parseInt(c, 16);   // convert rrggbb to decimal
var r = (rgb >> 16) & 0xff;  // extract red
var g = (rgb >>  8) & 0xff;  // extract green
var b = (rgb >>  0) & 0xff;  // extract blue

var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709

if (luma < 40) {
    // pick a different colour
}

EDITAR

Desde maio de 2014 tinycolorpassou a ter uma getBrightness()função, embora usando os fatores de ponderação CCIR601 em vez dos ITU-R acima.

EDITAR

O intervalo de valor luma resultante é 0..255, onde 0 é o mais escuro e 255 é o mais claro. Valores maiores que 128 são considerados leves por tinycolor. (copiado descaradamente dos comentários de @ pau.moreno e @Alnitak)

A biblioteca TinyColor (você já mencionou) oferece várias funções para inspecionar e manipular cores, entre elas:

• getBrightness

  Retorna o brilho percebido de uma cor, de 0 a 255, conforme definido pelas Diretrizes de Acessibilidade de Conteúdo da Web (Versão 1.0) .

  tinycolor("#fff").getBrightness(); // 255

• é leve

  Retorne um booleano indicando se o brilho percebido da cor é claro.

  tinycolor("#fff").isLight(); // true
  tinycolor("#000").isLight(); // false
  

• está escuro

  Retorne um booleano indicando se o brilho percebido da cor é escuro.

  tinycolor("#fff").isDark(); // false
  tinycolor("#000").isDark(); // true
  

• getLuminance

  Retorna a luminância percebida de uma cor, de 0-1, conforme definido pelas Diretrizes de acessibilidade de conteúdo da Web (versão 2.0) .

  tinycolor("#fff").getLuminance(); // 1

Encontrei esta função WooCommerce Wordpress PHP ( wc_hex_is_light ) e converti para JavaScript. Funciona bem!

function wc_hex_is_light(color) {
    const hex = color.replace('#', '');
    const c_r = parseInt(hex.substr(0, 2), 16);
    const c_g = parseInt(hex.substr(2, 2), 16);
    const c_b = parseInt(hex.substr(4, 2), 16);
    const brightness = ((c_r * 299) + (c_g * 587) + (c_b * 114)) / 1000;
    return brightness > 155;
}

Você pode calcular a luminância :

A luminância é, portanto, um indicador de quão brilhante a superfície aparecerá.

Portanto, é ótimo escolher se o texto deve ser branco ou preto.

var getRGB = function(b){
    var a;
    if(b&&b.constructor==Array&&b.length==3)return b;
    if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b))return[parseInt(a[1]),parseInt(a[2]),parseInt(a[3])];
    if(a=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b))return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55];
    if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b))return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],
16)];
    if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b))return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)];
    return (typeof (colors) != "undefined")?colors[jQuery.trim(b).toLowerCase()]:null
};

var luminance_get = function(color) {
    var rgb = getRGB(color);
    if (!rgb) return null;
        return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
}

O método acima permite que você passe a cor em formatos diferentes, mas o algoritmo é basicamente apenas em luminance_get.

Quando o usei, estava definindo a cor para preto se a luminância fosse maior que 180, branco caso contrário.

Há uma distinção importante aqui entre luminância e brilho. Luminância, no final do dia, é uma medida de quanta energia viaja por uma determinada área e ignora completamente como nossos sistemas perceptivos percebem essa energia. O brilho, por outro lado, é uma medida de como percebemos essa energia e leva em consideração a relação entre a luminância e nosso sistema perceptivo. (Como ponto de confusão, existe um termo chamado luminância relativa, que parece ser usado como sinônimo de termos de brilho. Isso me enganou bem).

Para ser preciso, você está procurando por "brilho" ou "valor" ou "luminância relativa", como outros sugeriram. Você pode calcular isso de várias maneiras diferentes (como ser humano!) Http://en.wikipedia.org/wiki/HSL_and_HSV#Lightness

1. Tire o máximo de R, G e B.
2. Tire a média do máximo e do mínimo de R, G e B.
3. Faça a média de todos os três.
4. Use alguma média ponderada como outros sugeriram aqui.

Este trabalho com hex, por exemplo #fefefe

function isTooDark(hexcolor){
    var r = parseInt(hexcolor.substr(1,2),16);
    var g = parseInt(hexcolor.substr(3,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    // Return new color if to dark, else return the original
    return (yiq < 40) ? '#2980b9' : hexcolor;
}

Você pode alterá-lo para retornar trueou falsepor alteração

return (yiq < 40) ? '#2980b9' : hexcolor;

para

return (yiq < 40);

Uma possível solução seria converter sua cor de RGB para HSB . HSB significa matiz, saturação e brilho (também conhecido como HSV, onde V é o valor). Então você tem apenas um parâmetro para verificar: brilho.

Sei que essa conversa já existe há alguns anos, mas ainda é relevante. Eu queria acrescentar que minha equipe estava tendo o mesmo problema em Java (SWT) e achei um pouco mais preciso:

private Color getFontColor(RGB bgColor) {
    Color COLOR_BLACK = new Color(Display.getDefault(), 0, 0, 0);
    Color COLOR_WHITE = new Color(Display.getDefault(), 255, 255, 255);

    double luminance = Math.sqrt(0.241 
       * Math.pow(bgColor.red, 2) + 0.691 * Math.pow(bgColor.green, 2) +  0.068 
       * Math.pow(bgColor.blue, 2));
    if (luminance >= 130) {
        return COLOR_BLACK;
    } else {
        return COLOR_WHITE;
    }
}