RGBa ou HSLa, eis a questão

Por RamonPage

O PRIMEIRO RASCUNHO da W3C que confronta os tipos de valor rgba() e hsla() para definir cores em CSS é datado de 19 de fevereiro de 2002. Pois é, muito tempo já passou...

De lá pra cá nada mudou na especificação, porém o uso desses tipos só ganharam força alguns anos depois 2002, até porque naquela época ainda não havia suporte pela maioria dos navegadores. O fato interessante é que ainda hoje percebo que há uma certa dúvida sobre qual tipo usar.

Antes de qualquer coisa, qual a diferença entre os modelos RGB e HSL?

O RGB é um modelo de cor aditivo1, onde conseguimos gerar várias cores através da combinação de três cores primárias (Red, Green e Blue). Este modelo é o comumente utilizado em dispositivos eletrônicos desde antes de eu me entender por gente.

1 — Cores aditivas são aquelas representadas pelas combinações de luzes. A soma de todas as cores aditivas gera o branco.

O HSL, por sua vez, também é um modelo aditivo, todavia utiliza um sistema cilíndrico de coordenadas para determinar as cores. HSL significa Hue, Saturation e Lightness.

Existe ainda o modelo HSB (Hue, Saturation e Brightness) ou HSV (Hue, Saturation e Value), utilizado pelo Photoshop e ferramentas como COLOURlovers, no entanto este esquema de cores não é suportado em CSS.

Representando cores tridimensionalmente

Durante séculos vários artistas e filósofos2 criaram teorias das cores e alguns deles chegaram à conclusão de que podemos representá-las de forma tridimensional. A partir desses estudos nós chegamos ao conceito de espaços de cor, que são modelos para descrever cada cor a partir de fórmulas matemáticas.

Rascunhos da esfera de cor
Esfera de cor de Philipp Otto Runge, criada por volta de 1810. Originalmente em colorsystem.

2 — Veja no colorsystem uma lista detalhada de teorias das cores criadas por diversos artistas e pensadores.

A grande diferença entre os sistemas de cor RGB e HSL está nos seus modelos de espaço de cor. O RGB pode ser representado de várias formas, mas o seu espaço de cor mais famoso é o chamado cubo RGB.

Cubo RGB
Cubo RGB, que representa todas as cores possíveis de serem criadas a partir do vermelho, verde e azul. Originalmente em Wikipedia.

Já o HSL é conhecido pelo seu cilindro (ou diamante) de cor. O espaço de cor HSL é simétrico na transformação das cores mais escuras para as cores mais claras.

Cilindro representando o modelo HSL
Cilindro ou diamante HSL, originalmente em Colorizer.

Adicionando o alpha channel na história

O suporte a alpha channel foi adicionado a ambos os modelos de cor à partir das especificações do CSS3. A sua função consiste em determinar o nível de opacidade das cores.

A notação é simples:

    /* CSS */
            rgba(255,0,0,0.1)    /* 10% de vermelho opaco em RGBa */
            hsla(0,100%,50%,0.1) /* 10% de vermelho opaco em HSLa */
        

Nos tempos atuais, com a descontinuação do IE7 e o uso cada vez menor do IE8, é seguro afirmar que podemos abusar sem medo dos tipos rgba() e hsla(). Porém, qual é o melhor?

RGBa ou HSLa: tecnicamente, tanto faz

Entenda, o suporte dos navegadores a rgba() e hsla() é exatamente igual. Além disso, todas as combinações possíveis em RGBa são possíveis em HLSa e vice-versa. Isso quer dizer que a escolha de qual usar é completamente arbitrária.

Minha linha de raciocínio é de que o HSL perde pontos levando em conta a falta de suporte no Photoshop. Utilizei rgba() em praticamente todos os projetos que trabalhei até aqui por este motivo.

Por outro lado, alguns dizem que o HSL é melhor para manipular CSS on-the-fly, por ser mais intuitivo. De qualquer forma, o importante é ter em mente que entre rgba() e hsla() a escolha tanto faz!

Links úteis

Marcado em:

* * *