Conversor de Cores
Insira um código de cor hex para ver seus equivalentes em RGB e HSL com valores individuais dos canais vermelho, verde e azul.
Como usar este conversor de cores
- Insira o código de cor hex
Digite um código hex de 6 dígitos no campo de código de cor Hex (ex: FF6B35 ou 00FF88). Omita o símbolo #.
- Leia os valores RGB
Os resultados dos canais Vermelho, Verde e Azul mostram os valores de 0 a 255 para cada componente.
- Verifique a saída HSL
Revise o resultado HSL para matiz (0–360°), saturação e luminosidade — útil para ajustes de cor.
Como funciona este conversor de cores
Esta ferramenta converte um código de cor hexadecimal em representações RGB (vermelho, verde, azul) e HSL (matiz, saturação, luminosidade). Cada par hexadecimal corresponde a um valor de canal de 8 bits (0–255), e a conversão HSL utiliza matemática padrão de espaço de cores.
R = hex[0:2] → decimal; G = hex[2:4] → decimal; B = hex[4:6] → decimal Hex #FF6B35 → RGB(255, 107, 53) → HSL(16, 100%, 60%).
Hex 000000 → RGB(0, 0, 0) → HSL(0, 0%, 0%) — preto puro.
Hex FFFFFF → RGB(255, 255, 255) → HSL(0, 0%, 100%) — branco puro. Hex 808080 → RGB(128, 128, 128) → HSL(0, 0%, 50%) — cinza médio.
- ✓ A entrada é um código de cor hexadecimal de 6 dígitos válido.
- ✓ O canal alfa não é suportado nesta versão.
- A conversão CMYK requer um perfil de cores e não está incluída aqui.
Entendendo os modelos de cores
HEX, RGB e HSL são formas diferentes de descrever a mesma cor. HEX codifica RGB como uma string hexadecimal de 6 dígitos: cada par de caracteres é um canal de 8 bits (0–255). RGB expressa os mesmos valores como três números, as cores primárias aditivas que as telas emitem. HSL (Matiz, Saturação, Luminosidade) é um modelo cilíndrico: matiz é o ângulo na roda de cores (0° vermelho, 120° verde, 240° azul), saturação é a intensidade da cor e luminosidade é o brilho. Designers costumam preferir HSL ao ajustar cores programaticamente — alterar apenas a luminosidade escurece ou clareia sem mudar o matiz, e ajustar a saturação altera a vivacidade.
Casos de uso de desenvolvedores para conversão de cores
Desenvolvedores convertem cores ao criar sistemas de design, implementar temas, gerar paletas de cores e depurar CSS. Tokens de design geralmente armazenam cores em hex; a conversão para RGB ou HSL permite cálculos em tempo de execução, como sobreposições de opacidade ou verificações de contraste acessíveis. Alternadores de tema podem precisar derivar variantes mais claras ou escuras de uma cor base usando HSL. Ferramentas de acessibilidade automatizadas convertem cores para calcular taxas de luminância e contraste. Ao depurar bugs de layout ou temas, ver um valor hex como RGB ou HSL ajuda a identificar qual canal está incorreto. A conversão de cores também é usada em visualização de dados, bibliotecas de gráficos e temas dinâmicos de interface.
Perguntas frequentes
Posso inserir um código hex de 3 dígitos?
Atualmente, esta ferramenta espera um código de 6 dígitos. Para abreviações de 3 dígitos como F60, expanda para FF6600 primeiro.
O que é HSL?
HSL significa Hue (Matiz), Saturation (Saturação) e Lightness (Luminosidade). É uma forma alternativa de descrever cores que alguns designers consideram mais intuitiva que o RGB.