Como usar
- Passo 1
Insira o código da cor em qualquer formato (HEX, RGB, HSL, CMYK).
- Passo 2
Ou use o seletor visual de cores para escolher a cor desejada.
- Passo 3
Veja a cor convertida em todos os formatos disponíveis.
O que é a conversão de códigos de cores?
A conversão de códigos de cores consiste em expressar a mesma cor em diferentes sistemas de notação, como HEX, RGB e HSL. A tela cria cor misturando as cores primárias da luz — vermelho, verde e azul —, de modo que toda cor se reduz, no fim, à intensidade de três canais RGB. O HEX comprime esses valores RGB em uma cadeia hexadecimal de seis dígitos (#RRGGBB), enquanto o HSL os reorganiza conforme a forma como as pessoas percebem a cor, usando ângulo de matiz, saturação e luminosidade.
Por que a conversão importa
- Escrever CSS — Pegue o código HEX de um layout e converta para RGB, o que facilita ajustar a opacidade.
- Ajuste de cor — Quando você quer apenas escurecer um pouco uma cor, converter para HSL permite ajustar somente o valor L.
- Colaboração — Mantenha alinhados o HEX do Figma do designer, as variáveis RGB do desenvolvedor e as referências de cor da equipe de impressão.
Não importa em qual formato você digite, este conversor calcula todos os outros formatos de uma vez e mostra a cor real em uma prévia.
Fórmula de conversão
HEX → RGB divide o número hexadecimal em pares de dois dígitos e lê cada um como um número decimal.
R = parseInt(hex[0:2], 16); G e B são calculados da mesma forma. Exemplo: #FF5733 → FF=255, 57=87, 33=51 → RGB(255, 87, 51).
RGB → HSL primeiro normaliza cada canal para o intervalo 0-1 e depois obtém a luminosidade.
L = (max + min) / 2S = delta / (2 − max − min) (quando L > 0,5)
onde delta = max − min. No exemplo acima, max=1 e min=0,2 resultam em L = 0,6 (60%), S = 0,8/0,8 = 100% e um ângulo de matiz H ≈ 11°, convertendo-se em HSL(11°, 100%, 60%).