pcdicasHTML
Para visualizar corretamente configurar a tela para 1024 x 768 pixels

Códigos das cores



Para melhor compreender esse texto leia antes Cores.

Utilização de cores

O uso de cores torna o processo de comunicação mais eficiente pois

deixa os terminais de vídeo mais bonitos e agradáveis,
auxilia a visualização de conexões em desenhos complexos, melhorando a legibilidade da informação,
permite criar imagens realistas e
possibilita indicar mecanismos de segurança.

Cores primárias, secundárias e complementares


Os comprimentos de onda vermelho, verde e azul constituem a base para todas as cores da natureza, portanto são chamados de cores primárias.

Todas as outras cores do espectro são criadas pela combinação de diferentes quantidades desses 3 comprimentos.

Exemplo: Se as 3 primárias estão presentes na mistura, na mesma proporção, obtém-se a cor branca.

Essas cores, as 3 misturadas entre si, ou duas a duas, em proporções diferentes ou iguais, vão resultar em todas as cores possíveis. É importante lembrar que as cores correspondem a comprimentos de onda da luz. Tintas não se comportam exatamente desse modo, pois os pigmentos que as formam não são perfeitos, mas a mistura delas pode chegar a resultados bem próximos.


primárias secundárias


Quando as cores primárias se sobrepõem, duas a duas, elas geram outras 3 cores: ciano, magenta e amarelo, chamadas de cores secundárias.

Vermelho + Verde = AMARELO
Vermelho + Azul = MAGENTA
Azul + Verde = CIANO
Azul + Verde + Vermelho = BRANCO

Portanto, cada uma das cores secundárias é formada por 2 primárias e não possui a terceira.

Exemplos:

amarelo é formado pelo vermelho e pelo verde e não possui o azul, que é a cor complementar ao amarelo.
vermelho: se adicionarmos as outras duas cores básicas, ou seja, o azul e o verde, obtém-se a cor complementar do vermelho, que é o ciano.

A cores complementares são as que mais diferem umas das outras, pois a secundária não possui sua cor primária complementar.

As cores que podemos ver na tela do monitor dependem de interpretação a partir do conjunto de nosso sistema, que inclui o navegador ("browser"), como o Firefox, o sistema operacional e, também, de alguns recursos do monitor (configuração e calibragem), para que cada cor seja transformada em luz e fique visível.

É importante lembrar que a visualização correta das cores só pode ocorrer em monitores configurados a partir de Color (16 bits), True Color (24 bits) ou em modo superior.


O código RGB numérico

RGB é a sigla para Red, Green, Blue (Vermelho, Verde, Azul), que gera o padrão de cores pelo qual os monitores obtém cores com brilho.

A codificação das cores está baseada na mistura cromática. Ou seja, certas quantidades dessas 3 cores são misturadas para se obter uma determinada cor.

Entretanto, as cores podem ser codificadas em diferentes bases.

Base 10

O valor de cada componente (R, G e B) deve ser um número inteiro que pode variar entre 0 e 255, gerando um código numérico, em base 10.

Exemplo:
A cor vermelha é representada por #255 0 0:
red (vermenho): 255,
green (verde): 0 e
blue (azul): 0.

Ou seja, o vermelho possuí intensidade 255 da cor vermelha e 0 tanto de verde como de azul.


Ao se usar a notação decimal a representação da cor fica extensa. Para evitar isso convencionou-se utilizar a representação hexadecimal das tonalidades de cada cor. È importante notar que os números hexadecimais devem ser precedidos pelo caracter cerquilha também chamado "sustenido"ou "jogo da velha" (#).

Assim o número 0 em decimal é igual a 0 em hexadecimal já o 10 em decimal é igual ao A em hexidacimal, o 125 em decimal equivale ao 7D em hexadecimal e por fim o número 255 em decimal equivale a FF em hexadecimal.

Deste modo cada cor pode variar de 00 a ff na representação hexadeciamal. combinando-se a intensidade das cores do RGB temos a representação da cor.

Exemplos:

Branco: #FFFFFF - Presença de todas as cores,
Preto: #000000 - Ausência de todas as cores,
Vermelho: #FF0000 - intensidade máxima (255) de vermelho e 0 das outras cores,
Verde: #00FF00 - intensidade máxima de verde e 0 das outras cores,
Azul = #0000FF - intensidade máxima (255) de azul e 0 das outras cores,
Amarelo = #FFFF00 - intensidade máxima (255) de vermelho e verde e 0 da cor azul,
"Aquamarine 1" tem 127 / 255 de vermelho, 255 / 255 de verde e 212 / 255 de azul. Assim, a grafia dessa cor em código RGB, em base 10, é 127 255 212.

Lembrando que preto é a ausência de cores e branco é a presença de todas elas, quando o valor é o mínimo (zero) para os três cores, obtém-se a cor preta (em base 10: 0, 0, 0 e, em base16: 000000).

E, quando se tem o valor máximo (255 ou FF) para todos, obtém-se a cor branca (em base 10: 255, 255, 255 e, em base16: FFFFFF).

Nome Cor Base 10 Base 16
Aquamarine1
127 255 212 7FFFD4
Blanched Almon
252 235 205 FFEBCD
Red1
255 0 0 FF0000
Light Green
0 255 0 00FF00
Blue
0 0 255 0000FF
Black
0 0 0
 000000
White
255 255 255 FFFFFF

Base 16 - Codificação Hexadecimal

A quantidade de cada cor pode também ser definida pelo código hexadecimal, que tem seis dígitos, entre 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E a F, os quais são divididos em 3 grupos de dois, obedecendo a base 16.

Assim, o código hexadecimal é um código RGB alfanumérico, formado por 3 pares de caracteres que representam, da esquerda para a direita, as intensidades relativas de vermelho, de verde e de azul que formam uma determinada cor, sendo que 00 = 0% e FF = 100%.

Cada um dos 3 pares do código é formado por um valor hexadecimal, ou seja, um valor de 00 a FF, na base 16, os quais são equivalentes a um número de 0 a 255, na base 10.

Portanto, o menor valor, o 0 (zero), na base 10 é traduzido como 00, na base 16. E o maior valor, o 255, é traduzido como FF (veja a terceira coluna das tabelas acima).

Nessa ordem, as letras tem valores mais altos do que os números, ou seja, a cor será mais clara quanto menor for o número e será mais escura quando expressa por letras. Por exemplo, se o atributo para todas as cores for zero, a sintaxe no padrão RGB seria: 000000, como é fácil notar, a ausência de cores é total (00 para R, ou seja, nada de vermelho; 00 para G, ou seja, nada de verde; 00 para azul, ou seja, nada de azul), portanto temos a cor preta, cuja grafia é <FONT COLOR=#000000>.

Já a grafia da cor "Aquamarine 1" em código RGB, em base 16, é: <FONT COLOR=#7FFFD4>

Para garantir a apresentação correta das cores em todos os navegadores, de acordo com as normas do W3C, deve-se usar, sempre os códigos hexadecimais.

Nota: Quando se usa folhas de estilo pode-se utilizar a representação reduzida da cor em hexadecimal, ou seja, quando o hexadecimal é representado por dois dígitos iguais para cada cor, pode-se reduzir a representação da cor para 3 dígitos apenas. Exemplo:

Branco: #FFFFFF - pode ser #FFF
Preto: #000000 - pode ser, #000

Nomes das cores

Não é recomendável, mas pode-se, ainda, usar como valor da cor o seu nome, previamente codificado, para que o navegador a reconheça.

Exemplo: <FONT COLOR=tomato> Texto que foi colorido.

Apesar de não estarem definidos oficialmente, os nomes de cor apresentados a seguir são reconhecidos por vários navegadores como o Firefox.


Cores com nomes atribuídos oficialmente

Aqua
(#00FFFF) 		Black
(#000000) 		Blue
(#0000FF) 		Fuchsia
(#FF00FF)
Green
(#008000) 		Gray
(#808080) 		Lime
(#00FF00) 		Maroon
(#800000)
Navy
(#000080) 		Olive
(#808000) 		Purple
(#800080) 		Red
(#FF0000)
Silver
(#C0C0C0) 		Teal
(#008080) 		White
(#FFFFFF) 		Yellow
(#FFFF00)


Mais de 16 milhões de cores diferentes

Combinando as 256 quantidades possíveis de vermelho com as 256 quantidades possíveis de verde e as 256 quantidades possíveis de azul conseguimos criar mais de 16 milhões de cores diferentes (256×256×256).

Atualmente praticamente todos os monitores de computador modernos estão preparados para apresentar mais de 16 milhões de cores diferentes. No entanto, é preciso ter em conta que os novos terminais móveis (em telefones móveis e em PDAs) em regra possuem paletas mais reduzidas. Alguns mostram apenas 256 cores, outros 4096 ou 65536.


Cores seguras da Web

Os computadores modernos são capazes de mostrar dezenas de milhares ou milhões de cores simultaneamente. Entretanto, até meados da década de 1990 muitos sistemas apenas conseguiam apresentar 256 cores diferentes de cada vez, o que obrigava os navegadores a trabalharem com uma paleta fixa que continha apenas estas 256 cores.

Dessas 256 cores, os sistemas operacionais Windows e Apple Macintosh reservavam 20 cores cada um (40 no total) para desenhar as suas interfaces 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 com o sistema Windows como com o Mac. Então, essas 216 cores receberam o nome de cores seguras da Web.

A forma encontrada para limitar as consequê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:

Base 10
 00
 51
 102
 153
 204
 255
Base 16
 00
 33
 66
 99
 CC
 FF

A Tabela 3 mostra todas as 216 combinações de cores que se pode formar com os valores apresentados com os valores acima.

Há três tabelas de cores disponíveis aqui:

| Tabela 1 | Tabela 2 | Tabela 3 |

Cores e HTML

Na linguagem codificada, estes códigos de cor podem ser utilizados como valor de atributo em vários elementos como
<FONT COLOR> e
<BODY BGCOLOR FGCOLOR TEXT LINK VLINK ALINK>.

(Deve-se lembrar que não funcionarão se o Windows estiver configurado para menos de 256 cores).

a. Texto:
O teor de um documento html é determinado no tag BODY.
- Usando-se o nome da cor.
- Usando-se o seu valor hexadecimal.

b. Plano de fundo da página:
Ainda em BODY pode-se escolher uma cor para preencher todo o fundo de uma página com um valor como BGCOLOR="#000000".

c. Fundo de tabela:
O tag Table permite escolher uma cor para preencher todo o fundo de uma tabela, com um valor como BGCOLOR="#000000". Uma tabela pode possuir várias células de cores diferentes, adicionando-se os valores em TD ou TH.

d. Imagens:
As cores escolhidas para o feitio de uma imagem formam sua paleta de cores.

e. Links:
Os diferentes "estados" de um link <BODY TEXT LINK VLINK ALINK> também podem ser definidos no tag <BODY>, em que:

LINK: é a cor dos links ainda não visitados,
ALINK: é a cor dos links, no momento em que são acessados e
VLINK: é a cor dos links já visitados.

Onde encontrar mais informação

Referências Bibliográficas
(topo)




Este "site", destinado prioritariamente aos alunos de Fátima Conti,
pretende auxiliar quem esteja começando a se interessar por internet,
segue as regras da FDL (Free Documentation Licence),
computadores e programas, estando em permanente construção.
Sugestões e comentários são bem vindos.
Se desejar colaborar, clique aqui.
Agradeço antecipadamente.

Deseja enviar essa página?


Se você usa um programa de correio eletrônico devidamente configurado e tem
um e-mail pop3, clique em "Enviar página" (abaixo) para abrir o programa.
Preencha o endereço do destinatário da mensagem.
E pode acrescentar o que quiser.
(Se não der certo, clique aqui para saber mais).

Enviar página


Se você usa webmail copie o endereço abaixo

http://www.ufpa.br/dicas/htm/htm-cor.htm


Acesse a página do seu provedor. Abra uma nova mensagem.
Cole o endereço no campo de texto.
Preencha o endereço do destinatário.
E também pode acrescentar o que quiser.

Última alteração: 22 abr 2012