Conversor de Cores

Sobre formatos de cor

As cores em telas costumam ser expressas em três formatos. O HEX usa um código hexadecimal de seis dígitos, como #4f46e5. O RGB (Vermelho, Verde, Azul) descreve a mesma cor como três números de 0 a 255. O HSL (Matiz, Saturação, Luminosidade) expressa a cor pelo ângulo dela na roda de cores (0-360°), pela pureza (0-100%) e pelo brilho (0-100%). Os três formatos descrevem o mesmo espaço de cor e podem ser convertidos entre si.

Como converter HEX para RGB e HSL?

Para converter uma cor HEX em RGB, divida-a em três pares de 2 dígitos e converta cada um de hexadecimal para decimal (0-255); para obter o HSL, calcule matiz, saturação e luminosidade a partir desses valores RGB. Exemplo: #4F46E5 se converte em rgb(79, 70, 229) e hsl(243, 75%, 59%).

Passos para converter HEX em RGB e HSL

1. Remova o símbolo # e divida o código HEX de 6 dígitos em três pares de 2 dígitos (para #4F46E5: 4F, 46, E5).
2. Converta cada par hexadecimal em um número decimal de 0 a 255 (4F=79, 46=70, E5=229) para obter os valores RGB.
3. Divida cada valor RGB por 255 para normalizá-lo em um intervalo de 0 a 1, depois encontre o máximo e o mínimo dos três.
4. A luminosidade é a média entre o máximo e o mínimo; a saturação e a matiz são calculadas a partir da diferença entre o máximo e o mínimo usando as fórmulas padrão de HSL.
5. Arredonde a matiz para graus inteiros (0-360) e a saturação e a luminosidade para porcentagens inteiras (0-100%) na exibição.

De HEX para RGB e para HSL

• R, G, B = valores dos canais vermelho, verde e azul, cada um de 0 a 255
• H, S, L = matiz em graus (0-360), saturação e luminosidade em porcentagem (0-100%)

Exemplos de conversão de cores

Perguntas frequentes

Qual é a diferença entre HEX, RGB e HSL?

HEX e RGB descrevem uma cor da mesma forma, como quantidades de luz vermelha, verde e azul, só que em notações diferentes (base 16 vs. base 10). O HSL descreve a mesma cor pela matiz (a cor em si), pela saturação (intensidade) e pela luminosidade (quão clara ou escura ela é), o que costuma ser mais intuitivo para ajustar uma cor manualmente.

Por que o branco mostra 0% de saturação?

A saturação mede a distância de uma cor em relação ao cinza. Branco puro, preto e todos os tons de cinza entre eles têm valores iguais de vermelho, verde e azul, então a saturação deles é sempre 0%, independentemente da luminosidade.

Posso digitar um código HEX de 3 dígitos, como #FFF?

Esta ferramenta espera o formato HEX completo de 6 dígitos (#RRGGBB). Uma abreviação de 3 dígitos como #FFF é o atalho do CSS para #FFFFFF, em que cada dígito é duplicado; expanda para 6 dígitos antes de digitar aqui.

Como a matiz é calculada quando vermelho, verde e azul são todos diferentes?

A matiz depende de qual canal, vermelho, verde ou azul, tem o valor mais alto, e é calculada pela posição relativa dos outros dois canais. O resultado é um ângulo em uma roda de cores de 360 graus, em que 0 grau é vermelho, 120 é verde e 240 é azul.

Esta ferramenta converte cores HEX padrão de 6 dígitos usadas na web; ela não é compatível com canal alfa (transparência), nomes de cores do CSS, nem espaços de cor além do sRGB, como HSV ou LAB.

Sources: W3C CSS Color Module Level 4