Como usar o conversor de cores
- Escolha HEX, RGB ou HSL como formato de origem.
- Preencha os canais: HEX com 3 ou 6 dígitos, RGB inteiro de 0 a 255 e HSL com matiz numérico e percentuais de 0 a 100.
- Escolha o destino e selecione Converter cor. O código e a amostra aparecem juntos.
- Copie o resultado ou troque os formatos. Editar qualquer campo apaga o resultado anterior até uma nova conversão.
Três formas de representar a mesma cor web
HEX e RGB codificam luz vermelha, verde e azul. #3366FF corresponde a 51, 102, 255; #0F8 se expande para #00FF88. A saída HEX sempre usa seis dígitos maiúsculos.
HSL representa matiz, saturação e luminosidade. O matiz percorre o círculo de cores, a saturação vai do cinza ao vivo e a luminosidade do preto ao branco. É útil para ajustar cores relacionadas.
Direções e fórmulas
HEX para RGB transforma cada par hexadecimal em 0–255; RGB para HEX faz o inverso. RGB para HSL normaliza os canais e calcula máximo, mínimo, luminosidade, saturação e setor do matiz. HSL para RGB usa croma, setor e deslocamento.
São aceitas as seis direções: HEX para RGB, RGB para HEX, HEX para HSL, HSL para HEX, RGB para HSL e HSL para RGB. RGB é a representação intermediária entre HEX e HSL.
Faixas, ciclo do matiz e precisão
- HEX aceita exatamente 3 ou 6 dígitos e # opcional; alfa, nomes e expressões CSS livres ficam de fora.
- RGB exige inteiros de 0 a 255 e não limita silenciosamente valores inválidos.
- Saturação e luminosidade vão de 0% a 100%. O matiz é periódico: 420° = 60° e −120° = 240°.
- RGB e HEX usam inteiros; HSL exibe no máximo duas casas. Cinzas com saturação 0% usam matiz 0°.
- A amostra não substitui calibração, perfil de impressão ou verificação de contraste.
Usos e saída
- Converta um token HEX em canais RGB para código ou documentação.
- Passe RGB para HSL antes de ajustar hover, borda ou fundo relacionado.
- Confira a amostra e copie um valor CSS; a entrada fica local e não vai para analytics.
- Não cria paletas, não extrai cores de imagens e não oferece perfis CMYK.
Direções de conversão HEX, RGB e HSL
Escolha o par que corresponde ao código disponível e ao código desejado. Cada direção traz os nomes completos, a regra e um exemplo de entrada para resultado.
HEX hexadecimal para RGB vermelho, verde e azul
Separe os seis dígitos HEX em três pares e converta cada par em inteiro decimal. Exemplo: #3366FF gera 0x33 = 51, 0x66 = 102 e 0xFF = 255, portanto rgb(51, 102, 255). #0F8 primeiro se expande para #00FF88.
RGB vermelho, verde e azul para HEX hexadecimal
Converta cada canal inteiro de 0–255 em dois dígitos hexadecimais e una-os depois de #. Exemplo: rgb(255, 87, 51) gera FF, 57 e 33, formando #FF5733. Canais menores que 16 recebem zero inicial.
HEX hexadecimal para HSL matiz, saturação e luminosidade
Decodifique HEX para RGB, normalize os canais e calcule HSL usando máximo, mínimo e diferença. Exemplo: #3366FF se converte em hsl(225deg, 100%, 60%).
HSL matiz, saturação e luminosidade para HEX hexadecimal
O matiz escolhe o setor de cor; saturação e luminosidade geram RGB, que é arredondado e codificado em HEX. Exemplo: hsl(60deg, 100%, 50%) vira #FFFF00. 420° dá o mesmo resultado porque o matiz se repete a cada 360°.
RGB vermelho, verde e azul para HSL matiz, saturação e luminosidade
Normalize RGB, encontre máximo e mínimo, use o ponto médio para luminosidade e a diferença para saturação e matiz. Exemplo: rgb(128, 128, 128) vira aproximadamente hsl(0deg, 0%, 50.2%); com saturação zero, o matiz não altera o cinza.
HSL matiz, saturação e luminosidade para RGB vermelho, verde e azul
Calcule o croma, posicione-o no setor do matiz e some o deslocamento de luminosidade antes de escalar para 0–255. Exemplo: hsl(240deg, 100%, 50%) vira rgb(0, 0, 255). Os canais finais são arredondados para inteiros.
Exemplos de conversão
Exemplo 1: HEX para RGB e HSL
#3366FF resulta em rgb(51, 102, 255) e, ao mudar o destino após converter, hsl(225deg, 100%, 60%). O azul visual não muda.
Exemplo 2: ciclo HSL para HEX
H=420, S=100 e L=50 equivale a 60°. O amarelo resultante é #FFFF00 ou rgb(255, 255, 0).
Perguntas frequentes
Posso usar a forma curta #RGB?
Sim. #0F8 se torna #00FF88. Formas alfa com quatro ou oito dígitos não são aceitas.
Por que o cinza tem matiz 0°?
Com saturação 0%, qualquer matiz produz o mesmo cinza; 0° é um valor convencional estável.
Quando trocar o formato atualiza o resultado?
Antes de converter ou após editar, ele fica vazio. Depois de uma conversão válida, mudar só o formato atualiza imediatamente.
A ida e volta preserva os decimais HSL?
A cor passa por canais RGB inteiros; os números HSL podem mudar um pouco.
Serve para impressão ou contraste?
Não. CMYK, calibração e contraste WCAG exigem ferramentas e contexto próprios.