Apresentamos uma tabela para ser usada como ferramenta em HTML e CSS, onde aparecem amostras de cores em células razoavelmente grandes para melhor visualização.
As cores figuram como fundo das diversas células da tabela e cada uma delas pode apresentar-se seguida das seguintes informações:
Algumas cores apresentam-se sem nome e/ou sem o código hexadecimal abreviado (porque não é possível tê-lo).
A tabela está dividida em dez seções, sendo que na seção 10 estão listadas as 216 Cores Seguras da Web, portanto as duas últimas informações acima só se fazem necessárias nas seções de 1 a 9.
Na primeira seção da tabela estão listadas 143 cores cujos nomes são reconhecidos pelos browsers principais, dentre elas as chamadas oficiais. Mas as oficiais são apenas 17 e estão assinaladas com um asterisco.
Quanto aos nomes mencionados em outras seções da tabela (em português ou inglês), são nomes usados na linguagem comum e, no lugar deles, temos de adotar o código.
A sigla RGB significa Red, Green, Blue (Vermelho, Verde, Azul). Qualquer cor que aparece no monitor de seu computador é formada da mistura de certa quantidade de cada uma dessas três cores.
As quantidades podem ser representadas pelos números decimais de 0 a 255, ou seja, 256 quantidades. Combinando as 256 quantidades possíveis de vermelho, verde e azul, é possível obter até 16.777.216 cores diferentes (256 x 256 x 256).
Exemplos:
255,102,0
51,102,153
O primeiro dos exemplos acima refere-se a uma cor composta de mais vermelho (a maior quantidade possível), menos verde e nada de azul. Já no segundo exemplo temos mais verde que vermelho e mais azul que verde.
Vimos no tópico anterior a codificação das cores pelo sistema de numeração decimal (base 10). As cores podem também ser representadas por códigos formados por números hexadecimais (base 16).
Sabemos que para formar um número do sistema decimal utilizamos dez dígitos, os quais são: 0,1,2,3,4,5,6,7,8,9. Assim, ao formarmos, por exemplo, um número de dois dígitos, para o seu primeiro dígito temos 10 possibilidades e para o segundo também. É assim que funciona para números de qualquer quantidade de dígitos; são sempre dez possibilidades para cada dígito. Então, podemos chegar à conclusão que o maior número de dois dígitos no sistema decimal é 99 e o maior com três dígitos é 999 e assim por diante.
No sistema hexadecimal de numeração, temos de percorrer o mesmo raciocínio, só que utilizando 16 dígitos. São eles: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. De maneira análoga, ao estabelecermos um número de dois dígitos, para o primeiro dígito e para o segundo temos 16 possibilidades. Agora também podemos chegar à conclusão que o maior número de dois dígitos no sistema hexadecimal é FF.
Assim como no sistema decimal nós utilizamos a faixa numérica de 0 a 255 na codificação, no sistema hexadecimal utilizamos a faixa numérica de 0 a FF. São 256 números em ambos os sistemas de numeração.
Não é nosso propósito nesta página nos aprofundarmos no assunto "sistemas de numeração", portanto não falaremos sobre como converter um número hexadecimal em um número decimal. Mas o que já foi dito até aqui já é suficiente para que você possa inferir que o número zero do sistema hexadecimal corresponde ao número zero do decimal e que o número FF do sistema hexadecimal corresponde ao número 255 do decimal.
| Hex | Dec |
| 00 | 0 |
| 08 | 8 |
| 80 | 128 |
| 9B | 155 |
| CD | 205 |
| FF | 255 |
Uma forma prática de converter um número de um sistema para outro é utilizando a calculadora do Windows, mas antes, no seu menu Exibir, dê um clique em Científica. Experimente usar essa calculadora para fazer as conversões exibidas ao lado.
Agora que já aprendemos um pouco sobre o sistema de numeração hexadecimal, vamos ao código das cores propriamente dito. Tomemos já de uma vez um exemplo:
Da mesma forma que o código decimal é formado por três números, o hexadecimal também o é. Só que no hexadecimal os números são justapostos (sempre com dois dígitos cada um). No caso do exemplo, temos os números 33, CC e FF. Se, com a calculadora do Windows, você fizer a conversão desses três números do sistema hexadecimal para o sistema decimal, terá como resposta os números 51, 204 e 255.
Note que o código hexadecimal será sempre precedido do símbolo # (tralha).
Vimos que o código hexadecimal das cores é formado por 3 pares de dígitos. Vejamos alguns exemplos:
Observemos os 4 exemplos acima. No exemplo 1, temos um par formado de dígitos iguais e cada um dos outros dois pares formado por dígitos diferentes. No exemplo 2, temos cada um de todos os pares com dígitos diferentes. Já nos exemplos 3 e 4, cada par é formado por dígitos iguais.
Para os exemplos 3 e 4 podemos utilizar o código abreviado, assim:
#F0F
#CF9
O Browser vai saber que F é FF, 0 é 00, C é CC e 9 é 99. Note que para os exemplos 1 e 2 essa redução não é possível.
Existem várias formas de definir as cores em HTML e CSS.
Em HTML e CSS, podemos usar o nome da cor, o código hexadecimal no formato #rrggbb ou o código decimal no formato rgb(x,x,x). Neste último formato, x pode ser um número de 0 a 255 ou um percentual de 0% a 100%.
Em CSS podemos utilizar ainda o código hexadecimal reduzido.
Observação:
Somente aqueles nomes reconhecidos pelos brownsers (seção 1 da tabela) podem ser
utilizados, inclusive os das 17 cores oficiais.
Atualmente os computadores são capazes de exibir simultaneamente milhões de cores em seus monitores. Mas até meados de 1990 não era assim. Naquela época os computadores só conseguiam exibir 256 cores. Isso obrigava os navegadores a trabalharem só com essa quantidade limitada de cores.
Dessa quantidade, os sistemas operacionais Windows e Macintosh reservaram cada um 20 cores para criar suas interfaces gráficas (40 no total). Assim restaram 216 para serem utilizadas com a garantia de que seriam exibidas tanto num sistema quanto no outro.
Essas 216 cores ficaram conhecidas como "Cores Seguras da Web" e são obtidas usando códigos formados com a combinação apenas dos números seguintes:
| Base 10: | 00 | 51 | 102 | 153 | 204 | 255 |
| Base 16: | 00 | 33 | 66 | 99 | CC | FF |
Já que os computadores modernos não mais possuem as limitaçoes mencionadas, precisamos ainda ter essa preocupação? Sim, porque hoje existem terminais móveis (em telefones móveis e em PDAs) que possuem paletas reduzidas.
Então, se queremos que nossa página seja exibida sem problemas também por esses dispositivos, devemos considerar isso.
É por esse motivo que, para cada cor que não se enquadra no conjunto das Cores Seguras da Web, incluimos a apresentação de uma cor alternativa que se enquadra. A informação aparece em código hexadecimal abreviado dentro de uma célula pequena que fica dentro da célula principal. Essa célula pequena aparece sem bordas e seu fundo tem a cor alternativa. Colocamos a célula pequena sem bordas para que fique bem evidenciada a diferença entre as duas cores. No geral, as cores obtidas são bem semelhantes, há algumas que até se esvaem sobre a outra cor. Mas há algumas que são razoavelmente destoantes.
O critério adotado foi o de substituir os números que compõem o código da cor pelos mais próximos, dentre os mencionados acima.