Entendendo as cores hexadecimais (RGB)

Publicado por Juliao Junior em 09/03/2009

[ Hits: 16.028 ]

 


Entendendo as cores hexadecimais (RGB)



Muitas vezes encontramos as enigmáticas cores hexadecimais, tanto em programas gráficos (como GIMP, INKSCAPE) como em programas para web. Vamos decifrar o que elas significam.

Primeiro precisamos compreender como as cores são compostas na tela. É utilizado o sistema chamado RGB. A expressão RGB vem de "red green blue", ou seja, "vermelho verde azul". As cores serão definidas pela quantidade de vermelho, de verde e de azul que adicionarmos.

Um dos extremos é quando adicionarmos o máximo de cada cor, onde teríamos 100% de cada uma delas. Isto equivale ao branco, quando temos todas as cores. Por outro lado, se não acrescentarmos nenhuma cor, 0% de cada cor, teremos a cor preta.

Vejamos alguns exemplos. Se em um programa gráfico você definir a cor de um elemento com a composição "80% vermelho 40% verde 0% azul", você terá a cor laranja. Se, em outro elemento, você definir a composição " 55% vermelho 55% verde 55% azul", obtém um tom de cinza. Mas onde estão as cores hexadecimais??

As cores definidas nas "indecifráveis" combinações hexadecimais, como #c4b755, estão apenas escritas de forma diferente. Mas ainda significam a mesma coisa: cores. Veja: não vamos usar porcentagem para definir quanto vermelho, verde e azul uma cor possui. Vamos usar um número, de 0 a 255. Assim, se queremos usar 80 de vermelho, usamos o número 204. Portanto, podemos ver o exemplo do parágrafo anterior como "204vermelho 102verde 0azul", concorda? E novamente você pergunta: "onde estão as cores hexadecimais???".

Veja agora o "segredo" para entender as cores hexadecimais. Cada dois dígitos representam apenas o componente de uma das cores, ou vermelho ou verde ou azul. Assim, os dois primeiros dígitos representam a quantidade de vermelho, os dois próximos a quantidade de verde, e os dois últimos a quantidade de azul.

Como exemplo, veja a cor #cc6600. Você sempre começa com o caractere #. Depois, o componente vermelho está em cc, o componente verde está em 66 e o componente azul está em 00. O mais fácil de entender é o azul, pois havíamos definido o azul como 0%, e portanto ele está marcado na forma hexadecimal como "00", o que já seria esperado. Mas e quanto ao "cc" e "66"?

Pode parecer estranho, mas eles são dígitos, só que escritos em forma "hexadecimal". Na verdade, cc equivale a 204 e 66 equivale a 102. Na verdade, a forma hexadecimal não usa apenas os dígitos 0 a 9. Além desses, usamos também os seguintes dígitos.
  • a = 10
  • b = 11
  • c = 12
  • d = 13
  • e = 14
  • f = 15

Traduzindo: quando vemos o dígito c na verdade ele significa o nosso velho e conhecido 12. Se você lembrar que no sistema hexadecimal não usamos os dígitos 0 a 9, e sim usamos os dígitos 0 a f, tudo ficará mais fácil. Então como compreender uma expressão como #cc6600?

Lembre que a cada dois dígitos temos uma cor. No caso acima, teremos cc para vermelho, 66 para verde e 00 para azul. Vejamos um deles, o vermelho. Para realizar a "transformação", pense da mesma forma como contamos no sistema decimal do dia-a-dia. Como fazemos normalmente? Contamos do 0 ao 9, e depois passamos para outra casa, e assim surge o 10. Quando usamos o número 32, queremos dizer que temos 2 (duas) unidades e 3 (três) dezenas. Note que usamos dezenas em vista do sistema ser decimal.

Da mesma forma no sistema hexadecimal, só que em vez de usarmos dezenas usaremos o número 16. Assim, o primeiro (à direita)c equivale a um simples 12. Mas o segundo (à esquerda) equivale a 12 vezes 16, ou seja, 192. Portanto, cc equivale a 192+12 = 204, ou 80% de vermelho.

Vamos praticar. O código #b5e144 equivale a:
  • b --> 11 * 16 = 176 ==> b5 = 176+5 = 181
  • e --> 14 * 16 = 224 ==> e1 = 224+1 = 225
  • 4 --> 4 * 16 = 64 ==> 44 = 64+4 = 68

Assim, no código #b5e144, em uma escala de 0 a 255, teremos 181 de vermelho, 225 de verde e 68 de azul. Teste em um programa gráfico e veja o resultado. Agora os códigos hexadecimais não parecem tão "indecifráveis", concorda?

Outras dicas deste autor

Lidando com processos

Instalando o novo XFCE 4.6 no Linux

Usando DVDs do Debian no Kurumin

Ferramentas para manipular PDF

Kotivox - Escrevendo diários no Linux

Leitura recomendada

Novo CUBE 2: Trooper Edition

Adicionando um menu à barra de tarefas do Acer Aspire One

Distro de música - Projeto Musix - Execute MIDI sem dor de cabeça

Instalando o Google Chrome + Flash Player no CentOS 6.0 de 32 bits e 64 bits

Ícones duplicados no GNOME Shell (Mint 12)

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts