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.
- RGB não é tinta guache
- RGB em valor absoluto
- RGB em porcentagem
- O código hexadecimal
- Os nomes das cores
- 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:
body {background:rgb(255,100,255); color:rgb(0,0,0)}
<style>
Exemplos de aplicação direto na tag:
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:
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).
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.
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.
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:
Até mais!
Helen Fernanda, muito obrigada por tirar as dúvidas que eu tinha em relação as cores rgb. Lindo site, a propósito!!
ResponderExcluirQue bom que foi útil. Obrigada e volte sempre. :)
Excluir