Aula 09 HTML – HyperText Markup Language – Cores em HTML (RGB e Hexadecimal)

Cores em HTML

Nesta aula vamos ver como trabalhar com cores com HTML.
Deixe seu comentário nas aulas e no final do curso receba gratuitamente um CERTIFICADO DE PARTICIPAÇÃO.
Então vamos lá!

Cores…
Existem diversos padrões de cores, neste curso vamos falar de dois tipos.

Hexadecimal e RGB.

– 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.

*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 – RGB
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).

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 é .

Já a grafia da cor “Aquamarine 1” em código RGB, em base 16, é:
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: 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.
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.

Confira esta Tabela de Cores em HTML
http://erikasarti.net/html/tabela-cores/

*Mais sobre RGB
As cores RGB provavelmente são as mais conhecidas, são usadas em nossos monitores. As cores são a resposta que chega aos nossos olhos quando a luz reflete nos objetos.
Nós vemos luz.
Quando se reflete toda luz vemos o branco, quando se absorve toda a luz vemos o preto. Por isso o sol quando bate no espelho nos queima os olhos. Vemos todo o branco da luz nos causando cegueira. Quando olhamos uma caverna a luz não bate em nada, ficando tudo absorvido (ou nada refletido) e vemos o preto. Os objetos refletem de maneiras diferentes a luz. Uma folha verde, absorve tudo exceto o verde, e vemos o verde.

O nome RGB vem das cores básicas deste padrão: Red (R – vermelho em inglês), Green (G – verde em inglês) e Blue (B – azul em ingles). A soma delas pode ser observada no experimento em que se gira estas cores muito rapidamente e para nossos olhos só aparece a cor branca.

Onde usamos o RGB? O RGB está presente em quase todos os dispositívos opticos: Monitor, scanner, máquina fotográfica, câmera de filmagem e outros.

Cores e HTML
Na linguagem codificada, estes códigos de cor podem ser utilizados como valor de atributo em vários elementos como é (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 linktambém podem ser definidos no tag, 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.

Fonte: http://www.cardquali.com/quantos-padroes-de-cores-voce-conhece/
http://www.ufpa.br/dicas/htm/htm-cor.htm