segunda-feira, 5 de outubro de 2009

🎨 Como usar as cores em RGB

Lápis de cor

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
255100%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.

aquafuchsiagray
cyanmagentagrey

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:

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:

Até mais!

Pix meutedio arroba mail ponto com

2 comentários:

  1. Helen Fernanda, muito obrigada por tirar as dúvidas que eu tinha em relação as cores rgb. Lindo site, a propósito!!

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.