Entendendo as cores hexadecimais (RGB)

Publicado por Juliao Junior em 09/03/2009

[ Hits: 16.243 ]

 


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

SocNetV - visualizador de redes sociais

Pubuntu - o Ubuntu rodando dentro do Windows

Instalando pacotes no sidux

Referências bibliográficas em TeX

Teclas de atalho para desligar/reiniciar o Linux

Leitura recomendada

TUX: tenha em casa seu próprio mascote Linux

Cairo-dock no Slackware64

Caffeine - Não deixe seu monitor dormir!

GKrellM - GTK Meters

Zoom no Plank do Elementary OS 5 (Juno)

  

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