Durante anos tive uma estamparia, tipo empresa de um homem só, onde eu fazia tudo. No início, comprava cores variadas em potes pequenos - para ter uma paleta mais rica. Mas o fato é que isso ficava bem caro e a solução foi começar a comprar apenas 5 cores e misturá-las para chegar a outras tonalidades. Essas cores, segundo um livro que consultei na época, deveriam ser: ciano, magenta, amarelo, além do branco e do preto.
Era uma diversão misturar e tentar atingir a cor que eu queria. Consultava uma tabela de cores, via a porcentagem de cada uma das primárias e transportava isso para meus potes de tinta - quase sempre era preciso acrescentar uma pitada de branco ou preto. Esse método me dava uma nova tinta, uma cor "chapada", por isso a necessidade do branco de vez em quando… mas o sistema usado nas gráficas para imprimir separa as três cores primárias e acrescenta uma camada corretiva de preto, imprimindo uma sobre a outra separadamente (o branco é o papel no fundo). É o sistema CMYK (Cian, Magenta, Yellow e blacK). A teoria é que a soma C+M+Y, os três a 100%, seria igual a preto - mas na prática isso não se mostra verdadeiro, por isso a camada K foi adicionada.
Até aqui falamos de cor-pigmento, ou seja a cor de uma determinada superfície, que depende da luz branca para aparecer. A idéia é que uma superfície colorida ao receber a luz branca, reflete o seu tom, "absorvendo" as outras tonalidades do espectro, mas existe outro tipo de cor: a cor-luz.
Esta é como é, não depende de ser iluminada para ser vista. Os tons do pôr-do-Sol, por exemplo, ou as cores que você vê no seu monitor. Pois é, o monitor trabalha com cor-luz e aqui a teoria é bem diferente. Trabalhar com cores-luz significa usar o sistema RGB - Red, Green e Blue (vermelho, verde e azul), um outro sistema, que inversamente ao anterior, determina que a soma das primárias R+G+B a 100% é igual a branco! O preto aqui se manifesta pela ausência de luz. Esse é o sistema com que vamos trabalhar: RGB e para expressar uma cor RGB em documentos HTML usamos normalmente o modo hexadecimal ou, para o CSS, podemos também definir uma cor diretamente em RGB. Vamos inicialmente entender o RGB, depois o hexadecimal.
Para formar determinada cor, trabalhamos 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. Como foi dito, R+G+B a 100% = branco, portanto, R+G+B a 0% = preto.
Bem, os valores numéricos para cada canal vão de zero (0%) a 255 (100%), portanto os exemplos acima seriam (para CSS) escritos assim:
- preto: "rgb(0,0,0)"
- branco: "rgb(255,255,255)"
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%:
- vermelho (R): "rgb(255,0,0)"
- verde (G): "rgb(0,255,0)"
- azul (B): "rgb(0,0,255)";
Se usarmos o método "inverso", partindo do branco e subtraindo apenas um dos canais, chegamos às cores CMY do sistema CMYK:
- ciano (C): "rgb(0,255,255)"
- magenta (M): "rgb(255,0,255)"
- amarelo (Y): "rgb(255,255,0)"
Outra é que sempre que todos os canais tiverem o mesmo valor (como no branco e no preto), estaremos falando de tons de cinza. Se imaginarmos um gráfico para representar os três canais, entenderemos que a cor surge da curva, enquanto a reta é cinza. Apenas para dar uma idéia mais clara sobre o que estou falando:
Já ficou mais fácil entender como funciona a coisa, não? Agora é só começar a usar valores intermediários para se conseguir as outras cores. Não é muito diferente de misturar tintas… Ok, vamos agora entender o sistema hexadecimal, que será apenas uma outra forma de escrever uma cor RGB, dividida por canais, só que com os valores representados de forma hexadecimal.
Não vou entrar em detalhes sobre o sistema hexadecimal mas vamos ver como traduzir um valor decimal para hexadecimal usando Javascript. Num post recente, mostro funções para converter rgb <-> hexadecimal, aqui vou mostrar apenas o cerne da coisa.
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.
Veja: A = 10, B = 11, C = 12 , …, F = 15.
O sistema hexadecimal é largamente utilizado em computação (não apenas nas cores) por representar uma economia considerável de de memória e de processamento. Veja o que achei na wikipedia (…/wiki/Sistema_hexadecimal):
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.
O sistema matemático de conversão para hexadecimal não é algo tão complicado… Veja neste comentário ou nesta página mais completa.
O formulário abaixo usa Javascript para traduzir um valor RGB (0-255) decimal para hexadecimal. Tudo acontece no evento onsubmit do form (veja o código abaixo).
// dc -> valor decimal digitado (ou ‘null’)
var dc = /^\-?\d+$/.test(this.dec.value) ?
parseInt(this.dec.value) : ‘null’;
if(dc == ‘null’) alert(’Isto não é um número decimal’);
if(dc < 0 || dc > 255) {
alert(’Este não é um valor RGB válido’);
dc = ‘null’;
}
// Aqui usamos o método Number.toString() passando
// o núm. 16 como parâmetro. Isso faz retornar uma
// string equivalente em hexadecimal
var hx = dc.toString(16).toUpperCase();
// se retornar um único caracter, colocamos o ‘0′ antes.
// Cada canal de cor trabalha com dois dígitos,
// obrigatoriamente.
this.hex.value = hx.length < 2 ? ‘0′+hx : hx;
this.dec.focus();
this.dec.select();
return false;">
decimal <input type="text" name="dec" size="10" value="255">
<input type="submit" value=" >> " />
<input type="text" name="hex" size="10"> hexadecimal
</form>
Retirando-se o "#" , os seis caracteres restantes representam os 3 canais RGB, nessa sequência, dois a dois. Por ex. em "#66AAFF" o canal R está representado por "66", o G por "AA" e o B por "FF". Se você clicou no botão acima, já viu que 255 em hex. é igual a "FF". Então já podemos deduzir que "#FFFFFF" é o mesmo que "rgb(255,255,255)" (branco) e que "rgb(0,0,0)" é igual a "#000000" (preto). Como seriam então as primárias em hexadecimal?
- vermelho (R): "#FF0000"
- verde (G): "#00FF00"
- azul (B): "#0000FF"
ou, para as primárias do sistema CMYK:
- ciano (C): "#00FFFF"
- magenta (M): "#FF00FF"
- amarelo (Y): "#FFFF00"
Como em RGB, agora basta usar tons maiores que "00" e menores que "FF" para obter qualquer outra cor. aqui está uma ferramenta legal para botar em prática o que foi dito aqui.
No mais, bom carnaval 2007!!!!
Mapa do site