Atividades Educativas

Escola Games

Escola Games
 

Entendendo as cores hexadecimais (RGB)

terça-feira, 21 de maio de 2013

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?