P√°ginas

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.