🎨 Como usar as cores em RGB

Personalizar as cores de muitos dos códigos disponibilizados neste blog exige o entendimento das cores RGB ou o acesso à tabela de cores para acessar esses códigos.

Sabendo como são formados os códigos você ganha tempo, porque terá independência para fazer modificações como diminuir o azul, aumentar o verde, escurecer, clarear, etc.

1. RGB não é tinta guache
2. RGB em valor absoluto
3. RGB em porcentagem
4. O código hexadecimal
5. Os nomes das cores
6. As cores seguras

1. RGB não é tinta guache

Nas aulas de artes da escola geralmente temos um kit com apenas seis cores de tinta: preto, vermelho, amarelo, verde, azul e branco. Então não demora muito para aprendermos a fazer combinações e obter outras cores, dentre elas:

• azul claro = azul + branco
• cinza = preto + branco
• laranja = vermelho + amarelo
• lilás = vermelho + azul + branco
• rosa = vermelho + branco
• roxo = vermelho + azul

Na combinação de pigmentos, como quando aprendemos a usar tinta guache, a cor que nossos olhos veem é exatamente a cor de luz que aquele pigmento não consegue absorver, refletindo-a. Os pigmentos brancos são os que absorvem pouca ou nenhuma luz e assim refletem quase todas, enquanto os pigmentos pretos são os que absorvem quase todas as luzes, refletindo muito pouco.

Essa é a lógica do CMYK, sistema de cores utilizado para materiais que serão impressos: revistas, jornais, panfletos, outdoors, etc.

Já para produtos audiovisuais, o que inclui a web, utilizamos o sistema de cores RGB, onde não há combinação de pigmentos, mas sim de luzes. Vejamos algumas combinações de cores em RGB:

• amarelo = vermelho + verde limão
• azul claro = vermelho escuro + verde + azul
• branco = vermelho + verde + azul
• ciano = azul + verde
• cinza = vermelho escuro + amarelo mostarda + azul escuro
• laranja = vermelho + verde escuro
• rosa choque (magenta) = vermelho + azul
• roxo = vermelho escuro + azul escuro

Pelo exemplo você já pode perceber que, se quiser entender RGB, vai ter que suspender, ao menos por alguns instantes, seu conhecimento prévio de combinação de cores.

2. RGB em valores absolutos

A escala de cada cor em RGB vai de 0 a 255, sendo que 0 equivale à sua ausência total e 255 à sua máxima saturação. A forma de representar uma cor em valores absolutos é a seguinte:

rgb(255,255,255)

Exemplos de aplicação na folha de estilos:

<style>
body {background:rgb(255,100,255); color:rgb(0,0,0)}
<style>

Exemplos de aplicação direto na tag:

<span style="color:rgb(255,0,0)">Texto destacado.</span>

3. RGB em porcentagem (valores relativos)

Outra forma de representar as cores RGB é por meio da porcentagem:

rgb(100%,100%,100%)

Exemplo de aplicação:

body {background-color:rgb(100%,80%,0%); color:rgb(80%,0%,0%);}

Ao usar esse tipo de notação é preciso ter muito cuidado para não esquecer o sinal de porcentagem (%) em todos os algarismos (inclusive nos zeros) e também para não misturar valores absolutos com valores relativos na mesma declaração.

Observe como fica a equivalência:

Valor absoluto	Porcentagem	Hexadecimal
0	0%	00
33	20%	33
102	40%	66
153	60%	99
153	60%	99
204	80%	cc
255	100%	ff

4. O código hexadecimal

A notação hexadecimal é mais utilizada, porque ocupa menos caracteres, pode ser abreviada e, na minha humilde opinião, é muito mais fácil de memorizar por usar letras e números.

Os códigos que parecem indecifráveis aos leigos, nada mais são do que a combinação das cores vermelho (dois primeiros caracteres), verde (dois caracteres do meio) e azul (dois  últimos caracteres).

#ffffff

O sustenido (#) é imprescindível no começo, pois é ele que avisa ao navegador que é um código hexadecimal e não um nome de cor.

Na abreviação são utilizados apenas três caracteres, cada um representando uma cor. O navegador entende, então, que #00c é igual a #0000cc, que #560 é #556600. Logo, não é possível abreviar valores em que os valores de cada par não são iguais, como #751abc, por exemplo.

#fff

O menor valor RGB é #000000 (preto) e o maior é #ffffff (branco). Para você entender melhor como funciona, segue uma escala de tons de cinza:

#000000 #000	#ffffff #fff
#111111 #111	#eeeeee #eee
#222222 #222	#dddddd #ddd
#333333 #333	#cccccc #ccc
#444444 #444	#bbbbbb #bbb
#555555 #555	#aaaaaa #aaa
#666666 #666	#999999 #999
#777777 #777	#888888 #888

Veja uma tabela com as cores que em RGB podemos chamar de básicas, por usarem saturação máxima. As cores complementares (que somadas resultam em branco) estão lado a lado.

#f00 #ff0000 rgb(255,0,0) rgb(100%,0,0)	#0ff #00ffff rgb(0,255,255) rgb(0,100%,100%)
#ff0 #ffff00 rgb(255,255,0) rgb(100%,100%,0)	#00f #0000ff rgb(0,0,255) rgb(0,0,100%)
#0f0 #00ff00 rgb(0,255,0) rgb(0,100%,0)	#f0f #ff00ff rgb(255,0,255) rgb(100%,0,100%)

5. Os nomes das cores

Se você olhar esta tabela de cores vai notar que dezenas de cores podem ser reconhecidas pelo nome.

body {background-color:darkred; color:salmon;}

Por padrão e para compatibilidade com navegadores muito antigos, apenas as seguinte dezessete cores podem ser escritas pelo nome:

aqua	black	blue	fuchsia
gray	green	lime	maroon
navy
olive	orange	purple	red
silver	teal	white	yellow

Três dessas cores têm dois nomes, apesar de apenas um deles fazer parte dos padrões de validação.

aqua	fuchsia	gray
cyan	magenta	grey

Mas existem outras cores que podem ser reconhecidas pelo nome em navegadores novos. Como alguns nomes são muito fáceis de decorar, principalmente se você souber inglês, conhecer algumas delas pode quebrar um galho.

aquamarine	azure	brown
beige	bisque	chocolate
coral	crimson	deeppink
gold	greenyellow	hotpink
indigo	ivory	lavender
linen	magenta	orchid
pink	plum	salmon
sandybrown	silver	skyblue
snow	steelblue	tan
tomato	turquoise	violet
wheat	whitesmoke	yellowgreen

Recomendo que não use esses nomes de cores no seu código final, aquele que vai para a web. Uma espécie de truque que eu uso às vezes é colocar o nome da cor da qual me lembro e, quando visualizo a página salva no Firefox, eu pego o código da cor com o Colorzilla:

É claro que isso só faz sentido porque eu já teria que abrir a página no navegador de qualquer jeito para ver como está ficando, então aproveito a viagem para pegar o código da cor. Se não for esse o caso, compensa mais olhar na tabela primeiro.

6. As cores seguras

São consideradas cores seguras aquelas que teoricamente são vistas da mesma forma por todos os navegadores. Elas são formadas pelos seguintes pares:

00, 33, 66, 99, cc, ff

Nós nos preocupávamos mais com isso quando ainda convivíamos com computadores e navegadores muito antigos (não estou falando do Internet Explorer 6, foi muito antes!). Hoje em dia talvez a maior vantagem é que são cores fáceis de decorar (só usam 6 dos 16 caracteres) e porque também podem ser abreviadas. Conheça as cores seguras clicando aqui.

Consulte também:

• Cubo de cores seguras
• Tabela de cores

Até mais!