Módulo para cores RGBA, HSL e HSLA

visualizações Publicado em: 10/11/2009
Atualizações em: 27/03/2011 — 17/08/2015

Introdução

O Módulo das CSS3 denominado "CSS3 Color Module - Level 3" 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 é uma Recomendação do W3C, e sua implementação é realidade nos navegadores standards e no IE9+

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 IE8 e anteriores 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 decimais devem ser escritos com uso de 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 está atrás do DIV e destina-se a facilitar a visualização da opacidade aplicada.

RGBA Interativo

Altere os valores RGBA nos campos abaixo e clique OK.

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), não existia nas CSS2.1, Ela permite que você declare as cores com uso de três parâmetros:
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 (expresso em 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

O valor do ângulo segue as regras da trigonometria para medida de ângulos. Por exemplo 0graus = 360graus, -120graus = 240graus e assim por diante.

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:

seletor { color: hsl(0, 100%, 50%) }   /* vermelho */
seletor { color: hsl(120, 100%, 50%) } /* verde */ 
seletor { color: hsl(120, 100%, 25%) } /* verde escuro */ 
seletor { color: hsl(120, 100%, 75%) } /* verde claro */ 
seletor { color: hsl(120, 75%, 75%) }  /* verde pastel */
seletor { color: hsl(60, 100%, 50%) } /* amarelo */ 
seletor { color: hsl(120, 100%, 50%) } /* verde */ 
seletor { color: hsl(240, 100%, 50%) } /* azul */ 
seletor { color: hsl(300, 100%, 50%) }  /* púrpura */

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

  • A interação só vai funcionar (é claro) em navegadores que suportam HSLA, ou seja, os IE8 e anteriores estão fora;
  • O campo H (hue) admite valores de 0 a 360. Não contempla valores maiores que 360 e nem valores negativos embora sejam válidos;
  • O campo A (opacidade alfa) admite decimais de 0 a 1 sendo 0 transparente e 1 opaco. Valores decimais devem ser escritos com uso de ponto. Exemplo: 0.5;
  • 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.

HSLA Interativo

Altere os valores HSLA nos campos abaixo e clique OK.

% %

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

Gradientes

Uma aplicação prática bem interessante para uso de RGBA ou HSLA é a possibilidade de se criar uma máscara transparente a ser aplicada sobre uma cor sólida obtendo como resultado o efeito gradiente.

Exemplo 1

Observe a regra CSS:

div.exemplo1 { 
  width: 300px;
  height: 150px;
  border: 2px solid black;
  background: rgba(0, 0, 0, 0.5); 
  }

O elemento div.exemplo1 será estilizado com uma cor de fundo preta 50% opaca, conforme mostrado a seguir:

Eu sou o div com a classe exemplo1

Exemplo 2

Vamos agora criar um gradiente linear constituido de duas cores: a cor preta transparente mostrada no exemplo anterior e a cor vermelha e definí-lo (o gradiente) como imagem de fundo de um div conforme regras CSS mostrada a seguir:

div.exemplo2 { 
  width: 300px;
  height: 150px;
  border: 2px solid black;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), red); 
  }

O elemento div.exemplo2 será estilizado com uma cor de fundo preta 50% opaca que vai se tornando vermelha totalmente opaca no sentido horizontal da esquerda para a direita, conforme mostrado a seguir:

Eu sou o div com a classe exemplo2

Exemplo 3

Suponha agora que nosso gradiente linear seja constituido das seguintes duas cores: a cor preta transparente (como usada no exemplo anterior) e a cor transparente. Lembre-se que em CSS um dos valores para cores é a palavra chave transparent que define uma cor, transparente

Observe a regra CSS:

div.exemplo3 { 
  width: 300px;
  height: 150px;
  border: 2px solid black;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent); 
  }

O elemento div.exemplo3 será estilizado com uma cor de fundo em gradiente de preta 50% opaca para transparente, conforme mostrado a seguir:

Eu sou o div com a classe exemplo3

A mágica!

O que fizemos no exemplo 3 foi criar uma máscara transparente. Suponha que essa máscara seja aplicada sobre um elemento div com uma cor de fundo sólida conforme a regra CSS mostrada a seguir.

div.exemplo4 { 
  width: 300px;
  height: 150px;
  border: 2px solid black;
  background: red linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent); 
  }

O elemento div.exemplo4 será estilizado com uma cor de fundo em gradiente de vermelho escuro para vermelho claro, conforme mostrado a seguir:

Eu sou o div com a classe exemplo4

Notas:

O uso desta técnica possibilita a criação de um código fácil de manutenir e de grande flexibilidade. Por exemplo: basta alterar a cor de fundo de um elemento para obter fundos em gradientes de diferentes cores sem a preocupação de codificar o gradiente com sua sintaxe CSS tradicional.

Exemplo prático de uso da "mágica"

Você pode criar um box padrão para sua aplicação estilizado com diferentes cores de fundo em gradiente de acordo com seu conteúdo como mostrado no exemplo a seguir.

HTML

<div class="box">
	Eu sou o box padrão
</div>
<div class="box eletronicos">
	Eu sou o box para eletrônicos
</div>
<div class="box moveis">
	Eu sou o box para moveis
</div>

CSS

div.box { 
    width: 200px;
    height: 300px;
    border: 1px solid black;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent); 
		}
  div.box.eletronicos { 
    background-color: red;
	}
  div.box.moveis { 
    background-color: green;
	}

O que resulta na estilização mostrada a seguir:

Eu sou o box padrão

Eu sou o box para eletrônicos

Eu sou o box para moveis

Para demonstrar a técnica da máscara usamos RGBA, mas o uso de HSLA produz o mesmo efeito. É uma questão de preferência pessoal.

Sugestão: Crie máscaras com gradientes de mais de duas cores e também com gradientes radiais.

Crédito: Lea Verou

Conclusões

O uso das declarações CSS para cores com estas novas funcionalidades e em particular a possibilidade de declarar opacidade alfa simplifica, 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. Além disso usar a técnica de criação de máscara para simular gradientes é uma ferramenta poderosa para simpleificação de código e modularização das CSS.

X

Matérias recomendadas

A sintaxe da regra CSS

Seletores CSS3