19

Tempos atras li em algum lugar sobre isso, mas nunca entendi o seu funcionamento: Vejam o exemplo com a palavra chucknorris:

<body bgcolor="chucknorris"> teste </body>

Não só com a palavra chucknorris mas qualquer palavra aleatória sempre produz resultados diferentes:

Earendul produz amarelo:

<body bgcolor="Earendul"> teste </body>

Fulano produz vermelho:

<body bgcolor="Fulano"> teste </body>

Mamusca produz azul:

<body bgcolor="Mamusca"> teste </body>

Alguém tem alguma explicação para esse comportamento?

3
  • 3
    E Gandalf ciano. :)
    – Kazzkiq
    Commented 4/09/2014 às 11:42
  • 3
    Deve ter alguma coisa a ver (há ver) com hexadecimal, pois percebi que colocando 3 letras aleatórias o resultado sempre é preto para mim, e a projeção de cor só vem com alguma letra entre [a, b, c, d, e, f] Commented 4/09/2014 às 11:52
  • 1
    Vale notar que o atributo bgcolor="" está em desuso/obsoleto: html.spec.whatwg.org/multipage/obsolete.html, conforme o link: Os elementos da lista a seguir são totalmente obsoletos e não devem ser usados pelos autores: html.spec.whatwg.org/multipage/…
    – Syzoth
    Commented 6/02/2023 às 14:41

2 Respostas 2

26

Isso acontece porque todos os caracteres em falta são interpretados como 0. Ou seja, #CC0000 é igual a #CCXXXX, o resultado será o mesmo, um vermelho.

Logo, se fizermos isso com a palavra "Earendul" o resultado é EA0E0D00, que depois divide-se por 3 parcelas, sendo RGB(Red, Green, Blue). EA0E0D00 tem 8 caracteres, para ser divisível por 3 tem ser 9. Como eu disse anteriormente, quando falta um caracter adiciona-se um 0. O resultado final seria: (EA0, E0D, 000)

Ou seja, no final basta retirar o excesso, ficando apenas com 2 caracteres por cada parcela:

RGB( 0xEA, 0xE0, 0x00) = #EAE000

Veja o exemplo:

<!--<body bgcolor="Earendul"> teste </body>-->
<body bgcolor="#EAE000"> teste </body>

1
  • 2
    Não sabia dessa rsrs, faz total sentido, teste uma palavra que não tenha nenhum caracter #HEX, tipo putim, ele interpreta como se fosse 00000 e a cor fica preta Commented 4/09/2014 às 14:55
3

Esse comportamento tem relação com o parser de atributos legados em navegadores, no caso bgcolor, um atributo obsoleto (vide link e html.spec.whatwg.org), inclusive nem se recomenda usar esse atributo. A alternativa recomendada é fazer uso do atributo CSS background-color que não sofre desse comportamento da pergunta. Veja que o exemplo da pergunta não se aplica quando se usa o CSS:

body {
  background-color: chucknorris;
}
<body> teste chucknorris não funciona com "background-color"</body>

O comportamento apresentado na pergunta não se restringi somente ao texto chucknorris ou esquadraoclasseA ou Fulano, etc. Ele pode ser reaplicado a qualquer texto aleatório. Por exemplo gandalf, melancia, graxa, etc. Veja o exemplo nesta tabela abaixo:

<table>
  <tr>
    <td bgcolor="fulano"  cellpadding="8" width="100" align="center">fulano</td>
    <td bgcolor="esquadraoclasseA"  cellpadding="8" width="100" align="center">esquadraoclasseA</td>
    <td bgcolor="gandalf"  cellpadding="8" width="100" align="center">gandalf</td>
  </tr>
  <tr>
    <td bgcolor="melancia"  cellpadding="8" width="100" align="center">melancia</td>
    <td bgcolor="graxa"  cellpadding="8" width="100" align="center">graxa</td>
    <td bgcolor="aleatório"  cellpadding="8" width="100" align="center">aleatório</td>
  </tr>
</table>

O que acontece é que os navegadores não conseguem entender o texto informado e o que eles tentam é transformar em algo que entendam, no caso uma string em hexadecimal, verificando quais caracteres do texto são um hexadecimal válido. Caso seja um hexadecimal válido, mantém, caso contrário, substitui por um zero (0).

Vemos pegar de exemplo o texto esquadraoclasseA que produz um fundo vermelho no exemplo. O que o navegador vai pensar e fazer é:

  1. O que é esse esquadraoclasseA? Não sei.
  2. Vou tentar converter esquadraoclasseA para hexadecimal
  3. O que é esse e? É um hexadecimal válido. Maravilha!
  4. Agora eu tenho o texto esquadraoclasseA ainda.
  5. Pera ai! O que é esse s? Não é um hexadecimal. Vou colocar um 0
  6. Agora eu tenho o texto e0quadraoclasseA. Opa!
  7. E por esse caminho eu vou...
  8. Ufa! Finalmente terminei. Agora eu tenho a string: e000ad0a0c0a00eA
  9. e000ad0a0c0a00eA é um hexadecimal válido, mas preciso de um padrão RGB
  10. Vou dividir e000ad0a0c0a00eA em 3 seções do RGB. Se o tamanho da string não for múltiplo de 3, completo com 0 no fim da string:
`e000ad0a0c0a00eA` => tamanho 16. Preciso completar com `0` até ter 18.
`e000ad0a0c0a00eA00` => tamanho 18.
`e000ad0a0c0a00eA00` => Em 3 seções temos: `R:e000ad G:0a0c0a B:00eA00`.
  1. Para cada seção, vou pegar apenas os 2 primeiros valores:
`R:e000ad G:0a0c0a B:00eA00` => `R:e0 G:0a B:00`
  1. Agora, vou juntar esses valores: RGB: e00a00

  2. OPA! Finalmente tenho a string e00a00, um hexadecimal válido. Vou usar ele #e00a00 como cor de fundo.

Logo que cor é esse #e00a00? A mesma de esquadraoclasseA. Veja no exemplo:

td {
  color: white;
}
<table>
  <tr>
    <td bgcolor="esquadraoclasseA" cellpadding="8" width="100" align="center">esquadraoclasseA</td>
    <td bgcolor="#e00a00" cellpadding="8" width="100" align="center">#e00a00</td>
  </tr>
</table>

Vamos replicar esse passao-a-passo para o exemplo graxa e ver o resultado final:

  1. graxa vamos substituir tudo não hexadecimal por 0
  2. Temos 00a0a
  3. O tamanho de 00a0a é 5 e não é múltiplo e 3. Vou acrescentar mais um 0 para chegar ao tamanho 6
  4. Tenho agora a string 00a0a0. Vou dividir nas 3 seções do RGB: R:00 G:a0 B:a0
  5. Vou usar os 2 primeiros dígitos de cada seção para montar o hex da cor
  6. Finalmente teremos a string #00a0a0

Agora vamos testar a cor #00a0a0 no exemplo abaixo:

<table>
  <tr>
    <td bgcolor="graxa" cellpadding="8" width="100" align="center">graxa</td>
    <td bgcolor="#00a0a0" cellpadding="8" width="100" align="center">#00a0a0</td>
  </tr>
</table>


Nota

Essa resposta é baseada nas respostas desta pergunta do Stack Overflow, tentando extrair o que eu acho mais interessante de cada uma.

1
  • 1
    Tomei a liberdade de adicionar o link relevante.
    – Syzoth
    Commented 6/02/2023 às 14:51

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 .