Última atualização: 2026-06-23

Conversão de cores (HEX, RGB, HSL)

Um conversor de cores traduz uma única cor entre as três notações mais utilizadas na web: HEX, RGB e HSL. Cada uma descreve a mesma cor de forma diferente, e desenvolvedores front-end, designers e qualquer pessoa que edite uma folha de estilos frequentemente precisam converter um valor de um formato para outro — colar um código HEX de uma ferramenta de design em uma função RGB, ou ajustar uma cor em HSL por ser mais intuitivo operar nesse modelo.

Três formas de representar uma cor

O modelo RGB define uma cor pela quantidade de luz vermelha, verde e azul que ela mistura, com cada canal sendo um inteiro de 0 a 255. O HEX representa esses mesmos três canais em base 16: dois dígitos hexadecimais por canal, reunidos em um código de seis dígitos como #3B82F6. Como ambos os formatos armazenam os mesmos oito bits por canal, a conversão entre HEX e RGB é exata — nenhuma informação é perdida ou distorcida.

O modelo HSL adota uma perspectiva diferente. Em vez de misturar cores primárias, descreve uma cor por matiz (um ângulo de 0 a 360 graus na roda de cores), saturação (de 0 a 100%, de cinza a vívido) e luminosidade (de 0 a 100%, do preto passando pelo matiz puro até o branco). O HSL se aproxima mais da forma como as pessoas descrevem cores — "um azul ligeiramente mais claro e menos intenso" — o que o torna conveniente para ajustes visuais.

Como a conversão funciona

Dividir um código HEX em RGB é uma operação aritmética sobre os dígitos: cada par de dígitos hex é interpretado como um número de 00 a FF, isto é, de 0 a 255. Para converter de RGB para HSL, os canais são primeiro normalizados para o intervalo unitário; em seguida, a luminosidade é derivada do ponto médio entre o canal máximo e o mínimo, a saturação é determinada pela diferença entre eles, e o matiz é calculado a partir do canal dominante.

Exemplo

Considere #3B82F6. Os três pares são 3B, 82 e F6 — ou seja, 59, 130 e 246 —, resultando em rgb(59, 130, 246). Normalizando cada canal para o intervalo unitário, obtemos aproximadamente 0,231, 0,510 e 0,965. O canal dominante é o azul e o menor é o vermelho, portanto

com matiz de aproximadamente 217 graus, resultando em hsl(217, 91%, 60%).

Como o RGB armazena 256 níveis discretos enquanto o HSL arredonda para graus e percentuais inteiros, uma conversão de ida e volta pode deslocar um valor em uma única unidade — imperceptível ao olho, mas relevante ao comparar códigos. Para explorar a aritmética em base 16 por trás dos códigos HEX, consulte a Conversor de Base Numérica.