Conversor de Cores: RGB, RGBA, HEX e HSL

As cores fazem parte do nosso dia-a-dia, tanto no mundo real como no digital.
Quando criamos uma página Web, escolhemos cores para os fundos, os títulos, as ligações, os botões e praticamente todos os elementos que compõem o desenho do sítio.

Mas como é que dizemos ao navegador que cor queremos utilizar?
Afinal, não basta escrever "azul" ou "laranja" em qualquer parte do código e esperar que ele adivinhe o que temos em mente.

Existem várias formas de representar as cores em HTML e CSS.
Algumas são bastante simples de compreender, enquanto outras permitem um controlo mais preciso sobre os diferentes componentes da cor.

A seguir dou-te a conhecer algumas das mais utilizadas.
E ainda incluo uma ferramenta para te ajudar. 8)

RGB: vermelho, verde e azul

O modelo RGB vem das palavras inglesas Red, Green e Blue, ou seja, vermelho, verde e azul.

Este modelo baseia-se na mistura aditiva destas três cores.
Cada uma pode assumir um valor entre 0 e 255, permitindo combinar diferentes intensidades para obter milhões de cores.

Em CSS, podemos representar uma cor RGB desta forma:

color: rgb(255, 0, 0);
   

Neste exemplo, o vermelho está no valor máximo, enquanto o verde e o azul estão a zero.
O resultado é, portanto, vermelho puro.

Vejamos mais alguns exemplos:

/* Vermelho */
color: rgb(255, 0, 0);

/* Verde */
color: rgb(0, 128, 0);

/* Azul */
color: rgb(0, 0, 255);

/* Branco */
color: rgb(255, 255, 255);

/* Preto */
color: rgb(0, 0, 0);
  

A vantagem deste formato é permitir controlar directamente a intensidade de cada componente.
Por exemplo, ao aumentar o valor do vermelho e reduzir os outros dois, podemos criar diferentes tons avermelhados.

Uma maneira que pode ajudar-te é imaginares quando na escola, aprendemos a misturar as cores primárias para obter outras... e a misturar essas outras para obter ainda mais cores diferentes. ;)

RGBA: quando a transparência entra em jogo

O formato RGBA acrescenta um quarto componente ao RGB: o canal alfa (Alpha), que controla a transparência da cor.

A sintaxe é semelhante à anterior, mas inclui um valor adicional, normalmente entre 0 e 1.

background-color: rgba(255, 0, 0, 0.5);
   

Aqui temos vermelho com 50% de opacidade.
Um valor de 1 corresponde a uma cor totalmente opaca, enquanto 0 a torna totalmente transparente.

Podemos experimentar outros valores:

/* Totalmente opaco */
background-color: rgba(0, 0, 255, 1);

/* Semi-transparente */
background-color: rgba(0, 0, 255, 0.5);

/* Totalmente transparente */
background-color: rgba(0, 0, 255, 0);
   

Esta possibilidade é especialmente útil quando queremos aplicar uma camada de cor sobre uma imagem, criar fundos semi-transparentes ou destacar determinados elementos sem esconder completamente o que está por trás.

Nas versões actuais de CSS, também podemos escrever estas cores com a função rgb() e uma barra para separar o canal alfa:

background-color: rgb(255 0 0 / 50%);
   

HEX: seis caracteres que fazem as cores

Se já mexeste no HTML ou no CSS de um blogue, é muito provável que tenhas encontrado códigos como #ff0000, #00ff00 ou #0000ff.

Este é o formato hexadecimal, habitualmente conhecido como HEX.

O código começa pelo símbolo # e utiliza seis algarismos e/ou letras para representar os componentes vermelho, verde e azul.
Cada componente ocupa dois caracteres e pode assumir valores entre 00 e ff, em hexadecimal, equivalentes a 0 e 255 em decimal.

Por exemplo:

/* Vermelho */
color: #ff0000;

/* Verde */
color: #008000;

/* Azul */
color: #0000ff;

/* Branco */
color: #ffffff;

/* Preto */
color: #000000;
   

A ordem é sempre a mesma: vermelho, verde e azul.

Assim, o código #ff8844 corresponde a uma cor com bastante vermelho, uma quantidade intermédia de verde e menos azul.

Existe ainda uma forma abreviada de escrever determinados códigos HEX.
Quando os dois caracteres de cada par são iguais, podemos eliminar o segundo carácter de cada par, reduzindo o código de seis para três caracteres (sem contar com o símbolo #).

Por exemplo, no código #ff2288, os pares são ff, 22 e 88.
Como os caracteres de cada par são iguais, podemos retirar o segundo de cada um, obtendo #f28.

Vejamos mais alguns exemplos:

#ff2288  /* abreviado: #f28 */
#aabbcc  /* abreviado: #abc */
#112233  /* abreviado: #123 */
#f27d9c  /* não pode ser abreviado */
   

Como podemos ver, o último código não pode ser abreviado segundo esta regra, porque os dois caracteres de cada par são diferentes.

Isso não significa, porém, que não possamos experimentar uma versão mais curta que produza uma cor semelhante.
Por exemplo, #f79 corresponde a #ff7799, um tom próximo de #f27d9c, mas não exactamente igual.

Esta possibilidade pode ser útil quando estamos a experimentar cores para o nosso blogue, embora seja importante lembrar que se trata de escolher uma tonalidade aproximada, e não de abreviar o código original.

O navegador interpreta cada carácter da forma abreviada como se estivesse repetido duas vezes.
Não basta, portanto, retirar caracteres para encurtar o código: os pares têm de permitir essa conversão sem alterar a cor.

Também podemos incluir transparência num código hexadecimal, acrescentando dois caracteres para o canal alfa:

/* Vermelho com 50% de opacidade */
color: #ff000080;
   

Os dois últimos caracteres representam o canal alfa, que controla a opacidade.
Tal como os restantes componentes do código HEX, utilizam a escala hexadecimal, de 00 (0 em decimal) a ff (255 em decimal).

Neste exemplo, 80 corresponde a 128 em decimal, o que representa cerca de 50% de opacidade.
O valor 00 corresponde a transparência total, enquanto ff representa opacidade total.

O formato HEX é particularmente popular no desenvolvimento Web porque permite identificar as cores de forma compacta e directa.

HSL: matiz, saturação e luminosidade

O formato HSL representa as cores de uma maneira que, para muitas pessoas, como por exemplo, quem trabalha com imagens/fotomontagens, é mais intuitiva.

A sigla vem de Hue, Saturation e Lightness:

• Matiz (Hue): a cor propriamente dita, representada por um ângulo entre 0 e 360 graus.

• Saturação (Saturation): a intensidade da cor, expressa em percentagem.

• Luminosidade (Lightness): o grau de luminosidade, também expresso em percentagem.

Em CSS, podemos escrever:

color: hsl(0, 100%, 50%);
   

O resultado é vermelho puro.
O valor 0 indica o matiz vermelho, a saturação está no máximo e a luminosidade encontra-se a meio da escala.

Outros exemplos:

/* Vermelho */
color: hsl(0, 100%, 50%);

/* Verde */
color: hsl(120, 100%, 25%);

/* Azul */
color: hsl(240, 100%, 50%);

/* Branco */
color: hsl(0, 0%, 100%);

/* Preto */
color: hsl(0, 0%, 0%);
   

Uma das vantagens do HSL é facilitar a criação de variações da mesma cor.
Podemos manter o matiz e a saturação e alterar apenas a luminosidade, obtendo tons mais claros ou mais escuros.

Por exemplo, para criar vários tons de azul, basta alterar o terceiro valor:

color: hsl(210, 100%, 25%);
color: hsl(210, 100%, 50%);
color: hsl(210, 100%, 75%);
   

E se precisarmos de transparência, temos o HSLA, que acrescenta o canal alfa:

background-color: hsla(210, 100%, 50%, 0.5);
   

Tal como no caso do RGBA, também podemos utilizar a sintaxe moderna de hsl() com uma barra para indicar a opacidade.

Os nomes das cores em CSS

Nem sempre precisamos de escrever códigos numéricos.
O CSS também reconhece nomes de cores, como red, blue, green, orange, tomato, rebeccapurple e muitos outros.

Por exemplo:

color: red;
background-color: lightblue;
border-color: darkslategray;
   

É uma forma prática de trabalhar, sobretudo quando utilizamos cores conhecidas.
No entanto, os nomes disponíveis são definidos pelo CSS, e nem todas as cores que imaginamos têm um nome próprio reconhecido pelo navegador.

Além disso, o nome de uma cor pode não ser suficientemente preciso para o resultado que pretendemos.
Por isso se quisermos escolher um tom específico de azul, por exemplo, um código HEX, RGB ou HSL dá-nos muito mais controlo.

E as cores Web-safe?

Nos primórdios da Web, os computadores e as placas gráficas tinham capacidades bastante mais limitadas do que as actuais.
Para reduzir as diferenças na apresentação das cores entre equipamentos, tornou-se popular uma paleta de 216 cores conhecida como Web-safe.

Estas cores eram construídas a partir de seis níveis para cada componente RGB, combinados entre si.

Actualmente, os ecrãs modernos e os navegadores suportam uma gama de cores muito mais vasta.
Por isso, a paleta Web-safe já não é necessária para garantir que as cores de uma página são apresentadas correctamente nos equipamentos actuais.

Continua, contudo, a ter interesse histórico e pode ser uma curiosidade interessante para quem gosta de conhecer a evolução da Web.
É por isso que a incluí na ferramenta que acompanha este artigo, como referência clássica, e não como uma recomendação técnica actual.

Qual é o melhor formato?

Depende do que queremos fazer.
Os formatos apresentados permitem representar cores em CSS, mas cada um tem as suas vantagens.

O HEX é compacto e muito comum nos códigos de páginas Web.
O RGB permite controlar directamente os valores das três componentes.
O RGBA acrescenta transparência, enquanto o HSL facilita a criação de variações a partir do matiz, da saturação e da luminosidade.

Não precisamos, naturalmente, de escolher apenas um formato para todo o projecto.
Podemos utilizar aquele que nos for mais conveniente em cada situação.

E, se tivermos um código de cor num formato e precisarmos dele noutro, não temos de fazer as contas à mão.

Conversor e biblioteca de cores

Foi precisamente a pensar nisso que preparei esta ferramenta.
Para além de converter cores entre os diferentes formatos, permite experimentar tonalidades, consultar uma biblioteca de cores, criar paletas, verificar contrastes e até obter uma cor a partir de uma imagem.

Se andas a personalizar o teu blogue, a criar uma página Web ou simplesmente a experimentar combinações de cores, espero que te seja útil.

Experimenta, escolhe uma cor e diverte-te. :D
Afinal, a Web também se pinta! 🎨

Conversor de Cores

Escolhe uma cor, converte os seus valores, recolhe cores de imagens e cria paletas.

Escolher uma cor

Selector de cores

Introduz um código HEX: #3498db ou #3498db80 (com transparência).

Opacidade

100%

Códigos da cor

HEX

RGB

RGBA

HSL

HSLA

HEX + alfa

Os valores são actualizados automaticamente. O alfa indica a opacidade: 0 é transparente e 1 é opaco.

As cores são processadas no teu navegador. As conversões representam os formatos CSS habituais; pequenas diferenças de arredondamento são normais.

E por hoje é tudo. 8)

Até Breve. :-F

Queres ler outro artigo ao calhas?