Publicado em 8/06/2009 - Categoria: Geral
Para falar sobre as cores na web, temos que começar pelas explicações físicas. Passando a bola para a Wikipedia:
"A cor é uma percepção visual provocada pela ação de um feixe de fótons sobre células especializadas da retina, que transmitem através de informação pré-processada no nervo óptico, impressões para o sistema nervoso.
A cor de um material é determinada pela média de frequências dos pacotes de onda que as suas moléculas constituintes refletem. Um objecto terá determinada cor se não absorver justamente os raios correspondentes à freqüência daquela cor.".
Interessante, a cor de um objeto é justamente aquela que ele não consegue absorver. A idéia é que um objeto vermelho, para ser percebido como vermelho, precisa primeiro estar iluminado, depois, ao contrário do que pode parecer, precisa "absorver" todas as cores, menos o vermelho - que será refletido. Isso causa ao espectador a impressão de que tal objeto é vermelho. Mas isso define a cor-pigmento, que tem uma teoria diferente do tipo de cor usado na web, a cor-luz.
Para trabalhar com cor-pigmento, usa-se o sistema CMYK que trabalha com as cores-pigmento primárias (Cian, Magenta, Yellow e blacK). As primárias são apenas as três primeiras (ciano, magenta e amarelo), mas apesar de a teoria mostrar que a combinação delas deveria gerar qualquer cor, mas na prática isso só acontece quando o preto é adicionado.
Num monitor de computador, as cores utilizadas são as cores-luz, pois o que vemos na tela não depende de iluminação, é gerado por uma fonte interna de luz. As cores-luz primárias são apenas três e para trabalhar com elas vamos usar o sistema RGB (Red, Green, Blue ou Vermelho, Verde e Azul). Há duas printcipais formas aceitas na web para definir as cores: Hexadecimal e RGB, sendo que o hexdecimal é outra forma de definir uma cor em RGB.
Vamos começar pelo chamado sistema RGB, onde trabalharemos com 3 "canais de cor", R, G e B. Ao alterar a porcentagem de cada canal de cor, alteramos o resultado final da cor exibida. Vamos lembrar que no sistema RGB, o branco é a soma de todas as cores e o preto é a ausência de cor, ou seja, branco = R+G+B (todas a 100%) e preto = R+G+B (todas a 0%).
Bem, os valores numéricos para cada canal vão de zero (0%) a 255 (100%). Veja alguns exemplos (para CSS):
A partir daí podemos, por dedução simples, perceber que para representar as primárias "puras", bastaria partir do preto, adicionando apenas um canal a 100%:
Se usarmos o método "inverso", partindo do branco e subtraindo apenas um dos canais, chegamos às cores CMY do sistema CMYK:
Outra coisa de simples percepção é que sempre que todos os canais tiverem o mesmo valor (como no branco e no preto), estaremos falando de tons de cinza.
Não vou entrar em detalhes sobre o sistema hexadecimal mas vamos ver como traduzir um valor decimal para hexadecimal usando Javascript. Os valores hexadecimais são 16: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E e F. As letras foram usadas para representar números de dois dígitos com apenas um caracter (A = 10, B = 11, C = 12 , D = 13, E = 14, F = 15). O sistema hexadecimal é largamente utilizado em computação (não apenas nas cores) por representar uma economia considerável de memória e de processamento.
Veja o que achei na wikipedia (link acima):
A utilização do sistema hexadecimal nos computadores, deve-se a que um dígito hexadecimal representa quatro dígitos binários (4 bits = 1 nibble); portanto, dois dígitos hexadecimais representam oito dígitos binários (8 bits = 1 byte), que, como é sabido, é a unidade básica de armazenamento de informação.
Uma cor RGB em hexadecimal deve ser representada da seguinte forma: "#FF8800", onde o "#" é apenas um identificador e os 6 dígitos seguintes representam os canais RGB, na sequência, dois dígitos para cada canal. No nosso caso, "FF" é o Red, "88" é o G e "00" é o B. Sabrndo que "00" corresponde ao 0 (zero) no sistema mostrado acima e que "FF" corresponde ao 255, vamos ver como ficam os exemplos acima em hexadecimal:
RGB:
Cores CMY do sistema CMYK:
Tons de cinza:
No sistema hexadecimal, podemos também condensar para apenas três caracteres, quando todos os canais são formados de dois dígitos iguais, como em "#44FF22" ou em "#CCCCCC", eles podem ser expressos também de form reduzida, assim: "#4F2" e "#CCC".
Segue uma forma de conversão em Javascript para transformar decimal em hexadecimal, canal por canal:
Esta é uma preocupação que fazia sentido quando os monitoes trabalhavam com 256 cores, havia a tabela de cores seguras, ou seja, cores que seriam exibidas da mesma forma em todos os navegadores. Mas hoje todos os navegadores do mercado são capazes de exibir mais de 16 milhões de cores e essa preocupação não existe mais.
Alguns links interessantes: