HEX, RGB e HSL no mesmo lugar
Conversor de cores HEX, RGB e HSL online
Converta cores entre HEX, RGB e HSL com prévia de cor, suporte a canal alfa e cópia rápida. Ferramenta 100% local, sem envio para servidores.
- Conversão simultânea para HEX, RGB e HSL com prévia visual da cor.
- Aceita formatos curtos (#abc), longos (#aabbcc) e com canal alfa (#aabbccff).
- Cópia em um clique para colar direto no CSS, design ou paleta.
Ferramenta
Converta cores entre HEX, RGB e HSL
Cole uma cor em qualquer formato e veja a equivalência nos outros, com canal alfa quando aplicável. Toda a conversão acontece no navegador.
Exemplos rápidos
Como funciona: HEX, RGB e HSL representam a mesma cor de formas diferentes. RGB descreve a cor pelos canais vermelho, verde e azul (0–255 cada). HEX é a mesma informação em hexadecimal (00–FF por canal). HSL inverte o foco e descreve por matiz (0–360°), saturação (0–100%) e luminosidade (0–100%) — mais intuitivo para criar variações claras e escuras da mesma cor.
Visão geral
O que você encontra nesta página
O conversor de cores resolve uma necessidade frequente em design e front-end: pegar uma cor em um formato e ver imediatamente os equivalentes em HEX, RGB e HSL, com prévia visual e cópia rápida. Útil para alinhar paleta entre design tools, código CSS e bibliotecas que aceitam apenas um dos formatos.
A conversão é matemática (sem perdas entre HEX e RGB; HSL envolve arredondamento natural) e acontece localmente no navegador, sem envio para servidores.
Entenda a ferramenta
O que esta ferramenta faz
- Converte HEX para RGB e HSL com prévia da cor renderizada.
- Aceita também RGB e HSL como entrada para converter de volta para os outros formatos.
- Suporta canal alfa (transparência) em todos os formatos.
- Mostra a forma curta do HEX quando aplicável (#aabbcc → #abc).
Quando usar
Em quais situações ela ajuda
- Ao receber um HEX do design e precisar do RGB para usar em prop de componente.
- Ao trabalhar em HSL para criar variações de tom e exportar o HEX final para CSS.
- Ao conferir se duas cores em formatos diferentes representam o mesmo tom.
Passo a passo
Como usar
- Escolha o formato da cor que você está digitando (HEX, RGB ou HSL).
- Digite ou cole a cor — o resultado aparece em tempo real nos outros formatos.
- Use os botões de Copiar para enviar HEX, RGB ou HSL para a área de transferência.
- Clique em um exemplo rápido para experimentar conversões prontas.
Leitura do resultado
Cuidados e interpretações importantes
- HEX e RGB representam exatamente a mesma informação em bases diferentes (16 vs 10).
- HSL passa por arredondamento — pequenas diferenças decimais são esperadas e não afetam o visual.
- Quando há canal alfa, o HEX usa 8 dígitos (RRGGBBAA), o RGB usa rgba(...) e o HSL usa hsla(...).
Metodologia
Como a estimativa é construída
- A conversão RGB ↔ HSL segue o algoritmo padrão (max/min dos canais, cálculo do matiz por sextante).
- O canal alfa em HEX é representado pelos dois últimos dígitos (00 = transparente, FF = opaco).
- A luminância relativa é calculada via fórmula da WCAG (sRGB linearizado) para escolher cor de texto contrastante na prévia.
Exemplos práticos
Quando esse cálculo ou recurso costuma ser útil
- Converter um HEX gerado pelo design para o equivalente em RGB e HSL antes de aplicar no CSS.
- Pegar uma cor RGB exportada de um software gráfico e descobrir o HEX para usar no Tailwind.
- Trabalhar em HSL para criar variações claras e escuras a partir de uma cor base.
Credibilidade
Revisão editorial
- As ferramentas têm caráter informativo e de apoio prático.
- Resultados importantes devem ser conferidos com documentos, regras vigentes ou atendimento especializado.
- Erros, ajustes e sugestões podem ser enviados para tbdevcompany@gmail.com.
Dúvidas comuns
Perguntas frequentes
Quando usar HSL em vez de HEX ou RGB?
HSL descreve cor por matiz, saturação e luminosidade — mais intuitivo para criar variações de tom (mais claro, mais escuro, mais saturado) sem mudar o "tipo" da cor. HEX e RGB são equivalentes entre si e mais usados na entrega final do CSS.
O que significa o canal alfa?
É a transparência da cor (0 = totalmente transparente, 1 = totalmente opaca). Em HEX aparece como dois dígitos extras (#aabbccff), em RGB como rgba(...) e em HSL como hsla(...).
Os valores RGB devem ficar entre 0 e 255?
Sim, RGB usa 0–255 por canal (256 níveis × 3 canais = ~16,7 milhões de cores). HEX representa o mesmo intervalo em hexadecimal (00–FF). HSL usa 0–360° para matiz e 0–100% para saturação e luminosidade.
A conversão é exata?
HEX e RGB são exatos um para o outro (mesma representação em bases diferentes). HSL envolve arredondamento porque os intervalos não casam perfeitamente — pequenas diferenças decimais são esperadas e não afetam o resultado visual.
Por que vejo um HEX curto em alguns casos?
Quando todos os pares de hexadecimais têm dígitos iguais (#aabbcc → #abc), existe uma forma curta válida. Os navegadores expandem automaticamente, mas o longo é mais explícito e tende a ser preferido em CSS de produção.
Próximos passos
Ferramentas relacionadas
Binário, octal, decimal e hexadecimal
Conversor de Bases Numéricas
Converta um número entre binário, octal, decimal e hexadecimal em tempo real. Suporta valores arbitrariamente grandes via BigInt.
Abrir ferramentaCodificar e decodificar Base64Conversor Base64
Converta texto para Base64 e vice-versa, com variante URL-safe e codificação de arquivos em Data URL — tudo processado localmente no navegador.
Abrir ferramentaFormatar, minificar e validar JSONFormatador JSON
Formate, minifique e valide JSON com indentação configurável e ordenação de chaves. Ferramenta 100% local com diagnóstico de erro por linha e coluna.
Abrir ferramentaBuscas relacionadas
Termos atendidos por esta página
conversor de coreshex para rgbrgb para hexhsl para hexhex para hsl