:: Módulo para cores das CSS3 ::

Introdução

O Módulo das CSS3 denominado "CSS3 Color Module" destina-se a especificar as diferentes maneiras de se atribuir valores para as propriedades CSS que admitem cores tais como background-color e color. O Módulo encontra-se na fase de rascunho de trabalho do W3C, mas sua implementação parcial já é realidade nos navegadores standards versão atual, exceto nos IE todas as versões

O objetivo deste módulo segundo as especificações do W3C é o seguinte:

CSS (Cascading Style Sheets) é uma linguagem que descreve como devem ser apresentados os documentos HTML e XML na tela, no papel, em um dispositivo aural, etc. A linguage utiliza propriedades e valores para cores de textos, backgrounds, bordas e outras partes dos elementos em um documento. Esta especificação descreve os valores de cores e suas propriedades bem como opacidade de cores. Estão aqui incluidas as propriedades das CSS nível 2 e alguns novos valores para estas propriedades.

Declaração com RGBA

A declaração de cores com uso de RGB (red, green, blue) está prevista na atual versão das CSS e nós desenvolvedores já estamos usando-a há algum tempo, pois é bem suportada pelos navegadores atuais. Se você quiser rever a declaração de cores com uso de RGB consulte este tutorial.

O Módulo CSS3 para Cores estendeu o uso de RGB criando RGBA (red, green, blue, alpha-opacity) acresentando mais um argumento na declaração da cor, que permite definir a opacidade em uma escala decimal de 0 a 1. Os valores RGB podem ser declarados em escala numérica de 0 a 255 ou percentual de 0 a 100%, conforme explicado neste tutorial, já citado anteriomente.

Para que você possa constatar o funcionamento desta declaração com uso de RGBA eu desenvolvi uma tela interativa com uso de JavaScript que é apresentada a seguir. O funcionamento é intuitivo, mas aqui vão as instruções gerais:

A interação só vai funcionar (é claro) em navegadores que suportam RGBA, ou seja, os IE atuais (até versão 8) estão fora;
Os campos RGB (red, green, blue) admitem valores numéricos de 0 a 255. Não contempla porcentagens embora sejam válidas;
O campo A (opacidade alfa) admite decimais de 0 a 1 sendo 0 transparente e 1 opaco. Valores intermediários devem ser separados por ponto. Exemplo: 0.5;
Para valores RGB a especificação prevê que valores superiores a 255 serão considerados 255 e inferiores a zero (números negativos) serão considerados 0. Contudo não há razão para usar valores fora da faixa e o script não permite tais valores;
Para valores A (opacidade) a especificação prevê o mesmo comportamento do item anterior com relação aos limites 0 e 1;
Aprenda divertindo-se! :-)

Nota: o retângulo na cor preta destina-se a facilitar a visualização da opacidade aplicada.

RGBA Interativo

Altere os valores RGBA nos campos abaixo

R: G: B: A:

A cor RGBA escolhida será aplicada
como fundo deste retângulo

Declaração com HSL

A declaração de cores com uso de HSL (hue, saturation, lightness) permite que você declare as cores com uso dos seus três componentes:
hue = tom, saturation = saturação e lightness = luminosidade.
A sintaxe geral para a declaração com uso desta variante é mostrada a seguir:

seletor {
	color: hsl(120, 75%, 50%)
	}

O primeiro valor é para o tom (hue) da cor. O seu valor é um número que representa a medida de um ângulo (varia de 0 a 360 graus) apontando para um tom da cor na roda de cores. Observe os valores a os respectivos tons de cores:

0 - vermelho
60 - amarelo
120 - verde
180 - ciano
240 - azul
300 - púrpura
360 - vermelha

Notar que o valor angular segue as regras da trigonometria para medida de ângulos. Por exemplo 0graus = 360graus, -120graus = 240graus e assim por diante. Contudo não vejo razão para se adotar um valor fora da faixa 0 - 360 para valores de hue.

O segundo valor é para a saturação (saturation) da cor. O seu valor é expresso em porcentagem. Um valor igual a 100% representa saturação total da cor e 0 é um leve sombreado cinza de saturação.

O terceiro valor é para a luminosidade (lightness). O seu valor é expresso em porcentagem. Um valor igual a 100% resulta em cor branca e 0 em cor preta, sendo 50% o valor normal.

As figuras a seguir dão uma idéia bem aproximada de como os valores determinam a cor final.

roda de cores

Exemplos:

* { color: hsl(0, 100%, 50%) }   /* vermelho */
* { color: hsl(120, 100%, 50%) } /* verde */ 
* { color: hsl(120, 100%, 25%) } /* verde escuro */ 
* { color: hsl(120, 100%, 75%) } /* verde claro */ 
* { color: hsl(120, 75%, 75%) }  /* verde pastel */

Como você já deve ter notado o uso de HSL para declarar cores é semelhante ao uso de RGB. A única diferença é que HSL é uma maneira mais intuitiva de se trabalhar com as cores.

Declaração com HSLA

A declaração de cores com uso de HSLA (hue, saturation, lightness, alpha-opacity) é uma maneira estendida da declaração HSL na qual um quarto argumento define a opacidade da cor. Este quarto argumento é um número decimal entre 0 e 1.

A seguir a versão interativa para você fazer experiências com a declaração de cores usando HSLA.

Nota: o retângulo na cor preta destina-se a facilitar a visualização da opacidade aplicada.

HSLA Interativo

Altere os valores HSLA nos campos abaixo

H: S: % L: % A:

A cor HSLA escolhida será aplicada
como fundo deste retângulo

Conclusão

O uso das declarações CSS para cores com estas novas funcionalidades e em particular a possibilidade de declarar opacidade alfa vai simplificar, e muito, declarar cores com CSS. Notar que os conteúdos inseridos em um container com opacidade assim declarada não herdam a opacidade, por exemplo, textos dentro de containers transparentes não ficam transparentes. Isto não é possível, sem uso de hacks, com as atuais CSS 2.