13

Eu sempre tive a curiosidade de saber o que acontece numa expressão hexadecimal de 3 dígitos de uma cor em CSS.

Por exemplo, você tem 000 e 000000, que é a cor preta. E fff ou ffffff que é branco. Também há outras cores que é F00 que é vermelho.

Porém resta uma curiosidade:

  • Como eu traduziria essa cor hexadecimal de 3 dígitos para o de 6 dígitos?

  • Tem alguma fórmula para transformar hexadecimal de cor de 3 para 6?

1

3 Respostas 3

7

As cores hexadecimais de 3 dígitos são expandidas dobrando cada caractere (veja w3 spec).

Assim o código #F3A é transformado para #FF33AA.

Traduzido de https://stackoverflow.com/a/10230746/5230740.

5
  • Como assim "...são expandidas do branco cada caractere"? Commented 13/02/2017 às 13:00
  • 1
    Erro de ortografia corrigido: dobrando cada caractere Commented 13/02/2017 às 13:03
  • 1
    @MurilloGoulart kkkkkkk Commented 13/02/2017 às 13:03
  • kkkkkkk agora entendi Commented 13/02/2017 às 13:06
  • 1
    @MarcelodeAndrade Certo!! Uma edição de terceiro ainda piorou o erro. Mas beleza, o que vale é a intenção! hauhau Commented 13/02/2017 às 13:09
4

Conforme a documentação da W3C sobre unidades de cores, os valores numéricos RGB são representandos por notação hexadecimal, precedido do caractere #.

Eles podem conter 3ou 6 dígitos, sendo representados da seguinte maneira:

EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */

O que acontece quando se usa apenas três dígitos, é a replicação deles na fórmula rrggbb, sendo assim, o valor #fb0 tem seus caracteres replicados e expandidos para #ffbb00.

OBS: Há quem pense que o valor de três dígitos são preenchido com zeros para completar o valor hexadecimal de seis dígitos, e isto é um grande equívoco!

@edit

Como eu traduziria essa cor hexadecimal de 3 dígitos para o de 6 dígitos?

Conforme explicado anteriormente, basta replicar os caracteres, por exemplo: fb0 torna-se: ff, bb e 00 respectivamente, formando o código: ffbb00.

Tem alguma fórmula para transformar hexadecimal de cor de 3 para 6?

Não há nenhuma fórmula específica para esse "esquema", o próprio navegador se encarrega da replicação, mas se for para um caso de uso específico, você pode implementar a replicação da maneira que desejar.

2
  • 1
    eu também pensava que era preenchido com zeros Commented 13/02/2017 às 12:52
  • Exato, @WallaceMaxters. É um equívoco comum, e que passa despercebido na maioria das vezes. Commented 13/02/2017 às 13:02
2

É simples, leia-se assim.

Para #000 - RGB

Para #000000 - RRGGBB

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 .