http: / /www. tiagosouza. com
Podemos obter qualquer cor que desejarmos combinando proporções corretas de três cores bases: Vermelho (Red) , Verde (Green) e Azul (Blue) .
12.1 - Formas de exprimir cores
Em CSS a forma recomendada para utilizar cores é usando código (notações) hexadecimal. Desta forma as cores exprimem usando três números hexadecimais que definem as quantidades de vermelho, verde e azul que entram na composição de uma determinada cor. O valor mais baixo de uma determinada cor é 0 (#00 na notação hexadecimal usada em CSS) e o valor mais alto é 255 (#FF em código hexadecimal). Assim, a cor preta tem 0 de vermelho, 0 de verde e 0 de azul, escrevendo na forma #000000. Já o branco possui 255 de vermelho, 255 de verde e 255 de azul , sendo seu código #FFFFFF. O amarelo forte possui 255 de vermelho, 255 de verde e 0 de azul, sendo seu código #FFFF00
A tabela abaixo mostra os resultados de diversas combinações de cores:
|
COR |
CÓDIGO HEXADECIMAL |
RGB (DECIMAL) |
| #000000 | rgb(0,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #00FF00 | rgb(0,255,0) | |
| #0000FF | rgb(0,0,255) | |
| #FFFF00 | rgb(255,255,0) | |
| #00FFFF | rgb(0,255,255) | |
|
#C0C0C0 |
rgb(192,192,192) | |
| #FFFFFF | rgb(255,255,255) | |
|
#FF00FF |
rgb(255,0,255) |
12.2 – Nomes de cores
A tabela seguinte mostra as 16 cores cujos nomes foram definidos oficialmente pelo W3C. Todos os navegadores reconhecem estes nomes pelo que podem usá-los sem qualquer problema:
|
Cores com Nomes Atribuídos Oficialmente
|
|||
|
Green |
Gray |
Lime |
Maroon |
|
Navy |
Olive |
Purple |
Red |
|
Silver |
Teal |
Whte |
Yellow |
Apesar de não estarem definidos oficialmente, os nomes das cores apresentados a seguir são reconhecidos por todos os navegadores relevantes, com exceção das versões mais antigas
.
Nota: Estes nomes de cores não estão definidos em nenhum padrão do W3C, apesar de serem reconhecidos pelos principais navegadores, esse reconhecimento não é exigido a nenhum navegador para estar conforme com as recomendações oficiais. É pouco provável que nos anos mais próximos os navegadores para PDA e telefones móveis consigam reconhecer estes nomes de cor. Se quiser garantir a apresentação correta das cores das suas páginas em todos os navegadores conformes com as normas do W3C, em vez dos nomes apresentados na tabela, utilize os códigos hexadecimais apresentados junto das cores.
|
COR |
CÓDIGO HEXADECIMAL |
NOME DA COR |
| #F0F8FF | AliceBlue | |
| #FAEBD7 | AntiqueWhite | |
| #7FFFD4 | Aquamarine | |
| #000000 | Black | |
| #0000FF | Blue | |
| #8A2BE2 | BlueViolet | |
|
#A52A2A |
Brown |
12.3 – Cores seguras da Web
Problemas causados por um número reduzido de cores
Todos os computadores modernos são capazes de mostrar dezenas de milhar ou milhões de cores em simultâneo. Contudo, até meados da década de 1990 muitos sistemas apenas conseguiam apresentar 256 cores diferentes de cada vez. Esta limitação obrigava os navegadores a trabalharem com uma paleta fixa que continha apenas 256 cores.
Os navegadores eram obrigados a usar apenas 256 cores para simular todas as cores que não conseguiam apresentar. Os efeitos destas aproximações eram visíveis na forma pontos adjacentes com cores diferentes e de manchas de cor. Atualmente estas limitações já quase não existem.
Como acabamos de ver , na primeira metade da década de 1990, a maioria dos computadores eram capazes de apresentar apenas 256 cores diferentes de cada vez. Dessas 256 cores, os sistemas operativos Windows e Apple Macintosh reservavam 20 cores cada um (40 no total ) para desenhar suas inter faces gráficas. Assim, de um total de 256 cores possíveis, apenas 216 podiam ser escolhidas livremente com a garantia de poderem ser apresentadas tanto numa máquina Windows como em um Mac. Estas 216 cores receberam a designação de cores seguras da Web.
A forma encontrada para limitar as conseqüências resultantes da utilização de uma paleta com apenas 216 cores consiste em usar apenas cores cujos códigos hexadecimais usam apenas combinações dos números indicados na
tabela seguinte:
|
RGB
|
00
|
51
|
102
|
153
|
204
|
204
|
|
Hex
|
00
|
33
|
66
|
99
|
CC
|
FF
|
A tabela abaixo mostra todas as 216 combinações de cores que podemos formar com os valores apresentados na tabela anterior. Estas são, por tanto, as 216 cores seguras da Web, que mostramos juntamente com seus códigos hexadecimais (o caractere # no início foi omitido) :
| 000000 |
000033 |
000066 |
000099 |
0000CC |
0000FF |
| 003300 |
003333 |
003366 |
003399 |
0033CC |
0033FF |
| 006600 |
006633 |
006666 |
006699 |
0066CC |
0066FF |
| 009900 |
009933 |
009966 |
009999 |
0099CC |
0099FF |
| 00CC00 |
00CC33 |
00CC66 |
00CC99 |
00CCCC |
00CCFF |
| 00FF00 |
00FF33 |
00FF66 |
00FF99 |
00FFCC |
00FFFF |
| 330000 |
330033 |
330066 |
330099 |
3300CC |
3300FF |
| 333300 |
333333 |
333366 |
333399 |
3333CC |
3333FF |
| 336600 |
336633 |
336666 |
336699 |
3366CC |
3366FF |
| 339900 |
339933 |
339966 |
339999 |
3399CC |
3399FF |
| 33CC00 |
33CC33 |
33CC66 |
33CC99 |
33CCCC |
33CCFF |
| 33FF00 |
33FF33 |
33FF66 |
33FF99 |
33FFCC |
33FFFF |
| 660000 |
660033 |
660066 |
660099 |
6600CC |
6600FF |
| 663300 |
663333 |
663366 |
663399 |
6633CC |
6633FF |
| 666600 |
666633 |
666666 |
666699 |
6666CC |
6666FF |
| 669900 |
669933 |
669966 |
669999 |
6699CC |
6699FF |
| 66CC00 |
66CC33 |
66CC66 |
66CC99 |
66CCCC |
66CCFF |
| 66FF00 |
66FF33 |
66FF66 |
66FF99 |
66FFCC |
66FFFF |
| 990000 |
990033 |
990066 |
990099 |
9900CC |
9900FF |
| 993300 |
993333 |
993366 |
993399 |
9933CC |
9933FF |
| 996600 |
996633 |
996666 |
996699 |
9966CC |
9966FF |
| 999900 |
999933 |
999966 |
999999 |
9999CC |
9999FF |
| 99CC00 |
99CC33 |
99CC66 |
99CC99 |
99CCCC |
99CCFF |
| 99FF00 |
99FF33 |
99FF66 |
99FF99 |
99FFCC |
99FFFF |
| CC0000 |
CC0033 |
CC0066 |
CC0099 |
CC00CC |
CC00FF |
| CC3300 |
CC3333 |
CC3366 |
CC3399 |
CC33CC |
CC33FF |
| CC6600 |
CC6633 |
CC6666 |
CC6699 |
CC66CC |
CC66FF |
| CC9900 |
CC9933 |
CC9966 |
CC9999 |
CC99CC |
CC99FF |
| CCCC00 |
CCCC33 |
CCCC66 |
CCCC99 |
CCCCCC |
CCCCFF |
| CCFF00 |
CCFF33 |
CCFF66 |
CCFF99 |
CCFFCC |
CCFFFF |
| FF0000 |
FF0033 |
FF0066 |
FF0099 |
FF00CC |
FF00FF |
| FF3300 |
FF3333 |
FF3366 |
FF3399 |
FF33CC |
FF33FF |
| FF6600 |
FF6633 |
FF6666 |
FF6699 |
FF66CC |
FF66FF |
| FF9900 |
FF9933 |
FF9966 |
FF9999 |
FF99CC |
FF99FF |
| FFCC00 |
FFCC33 |
FFCC66 |
FFCC99 |
FFCCCC |
FFCCFF |
| FFFF00 |
FFFF33 |
FFFF66 |
FFFF99 |
FFFFCC |
FFFFFF |
Atualmente qualquer computador consegue apresentar milhões de cores diferentes ao mesmo tempo, não havendo necessidade de usar apenas cores seguras da Web. Apesar disso, este tema continua a ser focado em quase todas as introduções à construção de páginas.
12.4 - Formas de exprimir os valores das cores
As cores definem-se usando notação hexadecimal que exprime as quantidades de Vermelho (Red) , Verde (Green) e Azul (Blue) que entram em sua composição. A quantidade mínima de uma cor é 0 (#00 em código hexadecimal) e a quantidade máxima é 255 (#FF em código hexadecimal) Assim, a cor branca escreve-se na forma #FFFFFF e a cor preta na forma #000000. Uma forma mais antiga que ainda funciona é a forma decimal. Na forma decimal a cor branca exprime-se como rgb(255,255,255) e a cor preta exprime-se como rgb(0,0,0). Entre estes dois extremos, temos toda a gama de cores que podem ser apresentadas em um monitor.
Nada de Vermelho
Se desligarmos completamente a cor Vermelha, ficamos com 65536 cores diferentes que resultam de combinar 256 quantidades de verde com 256 quantidades de azul (65536 = 256 × 256) .
A tabela seguinte mostra algumas destas combinações:
| 003300 |
006600 |
009900 |
00CC00 |
00FF00 |
| 003333 |
006633 |
009933 |
00CC33 |
00FF33 |
| 003366 |
006666 |
009966 |
00CC66 |
00FF66 |
| 003399 |
006699 |
009999 |
00CC99 |
00FF99 |
| 0033CC |
0066CC |
0099CC |
00CCCC |
00FFCC |
| 0033FF |
0066FF |
0099FF |
00CCFF |
00FFFF |
Vermelho ao Máximo
Se colocarmos a quantidade de Vermelho com seu valor máximo, que é 255 (#FF em código hexadecimal ) ficamos ainda com 65536 (256 x 256) cores diferentes que resultam de combinarmos todos os valores possíveis de Verde com todos os valores possíveis de Azul.
A tabela seguinte mostra algumas destas combinações:
| FF3300 |
FF6600 |
FF9900 |
FFCC00 |
FFFF00 |
| FF3333 |
FF6633 |
FF9933 |
FFCC33 |
FFFF33 |
| FF3366 |
FF6666 |
FF9966 |
FFCC66 |
FFFF66 |
| FF3399 |
FF6699 |
FF9999 |
FFCC99 |
FFFF99 |
| FF33CC |
FF66CC |
FF99CC |
FFCCCC |
FFFFCC |
| FF33FF |
FF66FF |
FF99FF |
FFCCFF |
FFFFFF |
Tons de Vermelho
A tabela apresentada abaixo mostra o resultado obtido variando a quantidade de cor vermelha de 0 até 255 ao mesmo tempo que se mantêm em zero as quantidades de verde e de azul. Existem 256 tons diferentes de vermelho puro e muitas outras que contêm misturas de outras cores.
|
Tons de Vermelho
|
Hexadecimal
|
RGB
|
|---|---|---|
|
#100000
|
rgb(16,0,0) | |
|
#200000
|
rgb(32,0,0) | |
|
#300000
|
rgb(48,0,0) | |
|
#400000
|
rgb(64,0,0) | |
|
#500000
|
rgb(80,0,0) | |
|
#600000
|
rgb(96,0,0) | |
|
#700000
|
rgb(112,0,0) | |
|
#800000
|
rgb(128,0,0) | |
|
#900000
|
rgb(144,0,0) | |
|
#A00000
|
rgb(160,0,0) | |
|
#B00000
|
rgb(176,0,0) | |
|
#C00000
|
rgb(192,0,0) | |
|
#D00000
|
rgb(208,0,0) | |
|
#E00000
|
rgb(224,0,0) | |
|
#F00000
|
rgb(240,0,0) | |
|
#FF0000
|
rgb(255,0,0) |
Tons de Cinza
As cores cinzas obtêm-se combinando quantidades iguais de vermelho, verde e azul. A cor branca cor responde ao cinza mais claro de todos e obtém-se juntando 255 de vermelho, 255 de verde e 255 de azul (#FFFFFF em hexadecimal). O preto é o cinza mais escuro de todos e obtém-se colocando todas as cores em 0 (#000000 em hexadecimal) . Entre estes dois valores extremos, temos 254 graus de intensidade possíveis.
A tabela seguinte dá uma idéia dos tons de cinza que podemos obter:
|
Tons de Cinza
| RGB |
Hexadecimal
|
|---|---|---|
| rgb(0,0,0) |
#000000
|
|
| rgb(16,16,16) |
#101010
|
|
| rgb(32,32,32) |
#202020
|
|
| rgb(48,48,48) |
#303030
|
|
| rgb(64,64,64) |
#404040
|
|
| rgb(80,80,80) |
#505050
|
|
| rgb(96,96,96) |
#606060
|
|
| rgb(112,112,112) |
#707070
|
|
| rgb(128,128,128) |
#808080
|
|
| rgb(144,144,144) |
#909090
|
|
| rgb(160,160,160) |
#A0A0A0
|
|
| rgb(176,176,176) |
#B0B0B0
|
|
| rgb(192,192,192) |
#C0C0C0
|
|
| rgb(208,208,208) |
#D0D0D0
|
|
| rgb(224,224,224) |
#E0E0E0
|
|
| rgb(240,240,240) |
#F0F0F0
|
|
| rgb(255,255,255) |
#FFFFFF
|
12.5 - Mais de 16 milhões de cores diferentes
Combinando as 256 cores de Vermelho com as 256 cores de Verde e as 256 cores do Azul, conseguimos criar mais de 16 milhões de cores di ferentes (256×256×256) .
Praticamente todos os monitores dos computadores modernos estão preparados para apresentar mais de 16 milhões de cores diferentes. No entanto, é preciso ter em mente que os novos sistemas móveis (celulares, PDA’s, etc) , geralmente possuem paletas mais reduzidas. Alguns mostram apenas 256 cores, outros 4096 ou 65536.
12.6 - Mais nomes de cores
As cores mostradas no site abaixo possuem diversos códigos hexadecimais relacionados a cores, todos estão definidos nos padrões do W3C.
http://www.criarweb.com/artigos/exemplos/tallerjs/ tabelacores.html
| < Anterior | Próximo > |
|---|




