Em mais um post sobre CSS3, hoje vamos nos prender especificamente nas cores em CSS3, mas vamos nos prender mesmo… O objetivo de hoje é fazer com que tenhamos (e eu também estou incluso) pleno conhecimento das características e diferenças que há em cada “modo” nas cores. Vamos lá:

No CSS2 a cor mais usada é no formato hexadecimal (#000000), logo depois, neste rank vem a definição da cor de acordo com o seu nome (black), chamada de color-name – não entrarei em mais detalhes. De fato estes dois modos (principalmente o primeiro), são mais que suficiente para se trabalhar com cores em CSS. Sendo assim, antes de entrar nas cores em CSS3, vamos dissecar o formato hexadecimal, que é onde encontraremos nossa “inspiração” para entender as cores em CSS3.

O Formato Hexadecimal

Composto pelas cores RGB (red, green e blue – traduzindo: vermelho, verde e azul), o formato hexadecimal pode ser definido usando 3 valores (RGB) ou 6 (RRGGBB), antecedidos do caractere #, chamado de hash.

#111
#F2F2F2

Quando você define uma cor usando 3 valores, CSS converte automaticamente esta cor para 6 dígitos repetindo os valores setados. Por exemplo, ao definir a cor #F03, é o mesmo que definir a cor #FF0033. Mais abaixo você irá entender o porque desta conversão…

A princípio é bem difícil de entender o que são esses valores e porque forma a cor X ou Y, mas você verá que não tem segredo. Em cada definição é possível setar os seguintes caracteres: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C, D, E e F, 16 ao todo. Para você entender o porque da presença das letras, pense da seguinte maneira:

Se o código é hexadecimal, logo teríamos que ter valores numerais: 1, 2, 3… Quando chegasse no 10 continuaria normalmente (10.11, 12…), mas neste caso nós não podemos continuar, porque a declaração é de 3 e 6 valores, não 4, 5 ou até mesmo 7, 8, 9…. Observe:

#ABC /* CORRETO - Neste caso A = AA, B = BB e C = CC; */
#123 /* CORRETO - 1 = 11, 2 = 22 e 3 = 33 */
#112233 /* CORRETO - Como disse o código de 3 valores é convertido para 6, neste caso já está convertido. */
#1234 /* ERRADO */

São 3 ou 6 valores porque para cada definição, deve ter apenas um dígito, não dois dígitos, como aconteceria no 10, 11… Vamos considerar que eu tenho 6 valores para uma cor (#123456), e nestas cores, a cor1 e a cor2, tem o valor maior ou igual a 10, então ficaria assim: #13153456 – cor1 = 13, cor2 = 15. E agora? Não posso definir mais de um dígito, vai dar erro na interpretação da cor… é justamente ai que entram as letras.

As letras na verdade representam os valor que são de 2 dígitos (A = 10, B = 11, C = 12, D = 13, E = 14 e  F = 15). Sendo assim, trocando os números por letras, podemos criar uma cor válida para o CSS: #DF3456.

São 16 (0 + 15) valores porque cada cor tem 256 variações (horizontais e verticais): 16×16 = 256. Nos programas, como photoshop, é exibido o valor 1-255 + 0. Resumidamente, os valores hexadecimais formam os números de 0 a 255, fazendo um cálculo matemático para se chegar a esse resultado. Para realizar este cálculo, é obrigatório a definição com 6 dígitos, por isso o CSS faz a conversão de 3 valores. O cálculo é:

R1+R2, G1+G2, B1+B2

Cálculo para achar o valor de R (R1 + R2, respectivamente 13 e 15 em nosso exemplo):

Cálculo base para cada valor: Valor N x (16 elevado a posição do N) = N x (16ˆP)

R1 = 13 x (16ˆ1) = 208

R2 = 15 x (16ˆ0) = 15

R = R1 + R2 = 223

O mesmo para G e B …

Deixando de lados a matemática, vamos voltar ao valores numerais (256). Uma vez definido o valor em hexadecimal e feito o cálculo, sabemos a posição em que a cor está definida. Agora você só precisa entender o porque dos valores 0 a 255.

A posição das cores

A posição, nada mais é do que o ponto de encontro de duas retas; é o que acontece no plano cartesiano. No caso das cores, é a variação da cor para o branco (horizontal), e a variação da cor para o preto (vertical), representados pelos valores de 0 a 255.

Por exemplo: nós estamos na cor vermelha, a cor vermelha possui muitas variações até chegar no branco, e também possui muitas variações para se chegar no preto. Usando o valor decimal, vamos encontrar o ponto de encontro das variações e assim chegar na cor desejada. Neste caso precisamos de apenas um valor (125 por exemplo). Este valor é usado para medir na horizontal e na vertical. Depois de definido o ponto de encontro, a cor que está naquele ponto é a cor passada pelo CSS.

No CSS2, como você sabe, o formato usado é o hexadecimal, que faz toda a brincadeira descrita acima para chegar na posição da cor. Agora no CSS3, você pode usar diretamente a posição da cor, que é até mais fácil de entender. Vejamos:

CSS3 – Formato RGB

Usando a posição das cores, R, G e B, podemos definir uma cor. É bem simples, apenas separe cada posição com uma virgula, dentro da função rgb():

div{
	background-color: rgb(223, 53, 86);
}

Demonstração

Feito isto, neste exemplo, teremos a cor de fundo. Também é possível usar valores em porcentagem. Cada porcentagem representa a distância do ponto à reta a qual ele pertence (em porcentagem).

div{
	background-color: rgb(87%, 15%, 43%);
}

• Não é valido, usar R como porcentagem (95%) e os demais (G e B) com valores(125, 46). Isto causará erro de interpretação.
• Se você definir uma cor com valor maior que 255, CSS irá considerar este valor como sendo o máximo (255). O mesmo acontece para o valor mínimo (O -zero).

CSS3 – Formato RGBA

Além do RGB, também foi implementando o formato RGBA. Neste formato, temos um parâmetros adicional, o parâmetro Alpha (A). Como no formato RGB, o formato RBGA também forma uma cor usando o mesmo princípio. A grande diferença do formato RGBA é que com ele, você também define a opacidade/transparência da cor:

div{
	background-color: rgba(223, 53, 86, 0.3);
}

Demonstração

Usar o formato RGBA é o mesmo que usar o formato RGB, mais a propriedade de opacidade:

div{
	background-color: rgb(223, 53, 86);
	opacity: 0.3;
}

• O valor para a opacidade/alpha é de 0 a 1. Para semi-transparência use 0.5 por exemplo.

CSS3 – HSL

Usando outro conceito das cores, o formato HSL usa as propriedades de hue, saturation e lightness para se chegar em uma cor determinada. Em português essas propriedades seriam: tom, saturação e luminosidade. Usar HSL também parece um pouco confuso:

São três valores que devem ser passados. Primeiramente temos o ângulo do tom, que vai de 0 a 360. A tabela abaixo mostra qual é o ângulo de cada cor:

Ângulo	Cor
0	vermelho
60	amarelo
120	verde
180	ciano
240	azul
300	púrpura
360	vermelho

Logo depois do ângulo (tom), temos a saturação, que é medida em porcentagem. A saturação, também chamada de grau de pureza, indica a presença da cor media cinza. Quanto mais saturada for a cor, menor será a presença do cinza, chegando cada vez mais ao branco. Você pode ver mais detalhes no wikipédia.

E na terceira e última posição, definimos a luminosidade da cor, que também é definida em porcentagem. O valor padrão é de 50%. Resumidamente com a luminosidade você altera a claridade da cor, podendo chegar ao branco completo (100%) ou ao preto (0%). Se quiser aprender mais sobre a luminosidade, dê uma olhada no wikipédia também que está bem completo.

Finalmente chegamos a definição da cor no formato HSL:

div{
	background-color: hsl(229, 62%, 76%);
}

Demonstração

CSS3 – Formato HSLA

Semelhantemente ao formato RGBA, o formato HSLA também faz a adição do parâmetro Alpha (A) como última declaração. O resultado é o mesmo: uma cor com o nível de opacidade diferente – se você definir valores menores que 1 é claro…

div{
	background-color: hsla(229, 62%, 76%, 0.2);
}

Demonstração

Considerações finais

Antes de terminar o post, tenho algumas considerações, já que estamos falando de cor, não da pra deixar de tocar neste assunto:

Alguns monitores, tem mais cores que outros, então pode ter uma diferenciação na visualização de acordo com o monitor do usuário. Outro fator que contribui para esta diferença é o Sistema Operacional do usuário. No caso do OSX, ele possui um sistema de correção de gama, o que já não acontece no Windows o Linux por exemplo. Fica ai o alerta se você ainda não sabia disso. Em minha opinião isto não é algo que você deva se preocupar, seja moderado e tudo ocorrerá bem!

E para fixar mais o assunto, uma lista com links interessantes:

CSS Color Module Level 3 – W3C
Módulo para as cores CSS3 – Majour
Colorometria – Wikipédia

Até a próxima.

A Séria Completa

Iniciando com CSS3
Prosseguindo com CSS3 – Bordas e Sombras
Avançando com CSS3 – Trabalhando com Backgrounds
Avançando com CSS3 – Entendendo as Cores
Aprendendo CSS3 – Trabalhando com Textos
Desenvolvendo CSS3 – Propriedades de Interface
Desenvolvendo CSS3 – Propriedades de Interface: Múltiplas Colunas em CSS3