49

Tenho uma listagem de status que é exibida e cada status tem uma cor atribuída. Essas cores estão salvas no meu banco de dados em formato hexadecimal.

Exemplo:

#add555

Eu estou com um pequeno problema: Se a cor for escura demais, pelo fato da mesma ser usada para background, a cor do texto torna-se ilegível.

Então eu queria saber se tem alguma forma de descobrir se a cor é escura, para, quando for escura, eu determinar que a cor do texto será branco, e se for clara, preto.

Tem como fazer isso?

Nota: A solução pode ser tanto em Javascript como em PHP.

1
  • 3
    tbm tenho esse problema, dai o que fiz foi deixar o usuário escolher a cor de fundo e cor do texto, mas sim, se ele escolher uma cor escura para o texto e para o fundo dai fica ilegível, mas os usuários já foram notificados disso, então ficou como, se acontecer é culpa deles, fiz o que deu no momento. Commented 13/02/2017 às 12:00

3 Respostas 3

57
+50

Calculando luminosidade

A solução já vem do próprio W3:

https://www.w3.org/TR/AERT#color-contrast

Mais especificamente com esta fórmula:

( R * 299 + G * 587 + B * 114) / 1000

Ela retorna a luminosidade na faixa de 0 a 255.

Como o ser humano tem em média uma percepção diferente de cada cor, a fórmula compensa para isto (o azul precisa ser muito mais forte para que tenhamos a "sensação" de que ele brilha tanto quanto um determinado vermelho).

Isto é uma média que não se aplica para os daltônicos. Daltônicos são pessoas que justamente tem problemas com algum desses "canais" de cor, muitas vezes deixando de ver parcialmente ou totalmente alguma das três cores.


Tratando o hexadecimal

Uma cor no formato #add555 nada mais é do que a combinação dos valores RGB em hexadecimal. No caso, temos estes valores:

R (red, vermelho ) 0xAD
G (green, verde )  0xD5
B (blue, azul )    0x55

Como já mencionei nesta outra postagem:

Como funcionam os números em hexadecimal?

O cálculo do hexa é bem simples. Não vou entrar em detalhes, pois tanto JS quanto PHP tem funções próprias para isto, quem quiser mais detalhes pode ler a postagem acima.


Vamos direto aos exemplos em código:

PHP

  $hexa = '#add555';
  $r = hexdec(substr($hexa,1,2)); // Se for sem o #, mude para 0, 2
  $g = hexdec(substr($hexa,3,2)); // Se for sem o #, mude para 3, 2
  $b = hexdec(substr($hexa,5,2)); // Se for sem o #, mude para 5, 2
  $luminosidade = ( $r * 299 + $g * 587 + $b * 114) / 1000;

E para usar o resultado (lembrando que vai de 0 a 255):

  if( $luminosidade > 128 ) {
     echo 'Cor clara';
  } else {
     echo 'Cor escura';
  }

Veja funcionando no IDEONE.

JS

var hex = '#add555';
var r, g, b, lum;

hex = hex.replace('#', '');

r = parseInt(hex.substr(0, 2));
g = parseInt(hex.substr(2, 2));
b = parseInt(hex.substr(4, 2));

lum = (r * 299 + g * 587 + b * 114) / 1000;

Veja funcionando no CODEPEN.


Formato "curto" e desconsiderando o #

Importante saber que as cores no formato "curto", como #fc0 são simplesmente uma maneira mais curta de escrever #ffcc00.

Para converter uma cor do "formato" curto basta isso:

r = r_curto * 17
  • P: Mas de onde veio esse 17?

  • R: No formato curto, 0xF equivale a 0xFF, 0x1 equivale a 0x11. Em outras palavras, uma variação de 0 a 15 em decimal no formato curto equivale a uma variação real de 0 a 255.

    Simplificando: 255 / 15 = 17:)


Em PHP pode ser usado desta forma:

function Luminosidade($hexa) {
   $hexa = trim($hexa, ' #');
   $longo = strlen($hexa) > 3;

   $r = $longo ? hexdec(substr($hexa, 0, 2)) : hexdec(substr($hexa, 0, 1)) * 17;
   $g = $longo ? hexdec(substr($hexa, 3, 2)) : hexdec(substr($hexa, 1, 1)) * 17;
   $b = $longo ? hexdec(substr($hexa, 5, 2)) : hexdec(substr($hexa, 2, 1)) * 17;

   return ( $r * 299 + $g * 587 + $b * 114) / 1000;
}

E em JS:

function Luminosidade(hex) {
   var r, g, b, longo;
   hex = hex.replace( '#', '' );
   longo = hex.length > 3;

   r = longo ? parseInt(hex.substr(0, 2), 16) : parseInt(hex.substr(0, 1), 16) * 17;
   g = longo ? parseInt(hex.substr(2, 2), 16) : parseInt(hex.substr(1, 1), 16) * 17;
   b = longo ? parseInt(hex.substr(4, 2), 16) : parseInt(hex.substr(2, 1), 16) * 17;

   return ( r * 299 + g * 587 + b * 114) / 1000;
}


Vai além do que foi perguntado, mas se precisar de um código mais "universal", que reconheça cores em muitos formatos, tem um parser bem completo pronto aqui:

http://www.phpied.com/rgb-color-parser-in-javascript/

3
  • 1
    Será que segue a mesma regra para os daltônicos?
    – viana
    Commented 13/02/2017 às 12:03
  • 6
    @AckLay com certeza não, pois o daltônico tem uma limitação em alguns dos "canais". Já que você mencionou, vou fazer uma observação.
    – Largato
    Commented 13/02/2017 às 12:04
  • Fabuloso!
    – Syzoth
    Commented 9/08/2017 às 17:33
13

A biblioteca TinyColor disponibiliza diversas funções para inspecionar e manipular cores, entre elas:

  • isLight

    Retorna um boolean indicando se o brilho percebido para a cor é claro.

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

    Retorna um boolean indicando se o brilho percebido para a cor é escuro.

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

Extraído e traduzido de https://stackoverflow.com/a/32442062/5230740.

12

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:

Branco = 0,290 * vermelho + 0,599 * verde + 0,111 * azul

É 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) é:

Brilho = 0,299 * vermelho + 0,587 * verde + 0,114 * 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). 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:

Brilho = sqrt(0,299 * (vermelho)² + 0,587 * (verde)² + 0,114 * (azul)²)

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);

5
  • Eu estou vendo "rgb" na função. No caso do hexadecimal, como ficaria? Commented 13/02/2017 às 12:16
  • @Wallace, no caso de uma cor #abcdef, o ab seria o vermelho, o cd o verde e o ef o azul. Vou editar a resposta para abordar isso. Commented 13/02/2017 às 12:17
  • Tinha imaginado que fosse isso, já que o Bacco tinha me falado pra "dividir em três" Commented 13/02/2017 às 12:18
  • @WallaceMaxters Editado. Ainda vou querer fazer umas alterações para abordar cores especificadas em outros formatos. Commented 13/02/2017 às 12:29
  • @WallaceMaxters Editado de novo. Me diga o que você acha disso. Commented 13/02/2017 às 13:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .