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.
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.
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.
Credibilidade
Revisão editorial
Conteúdo mantido por Equipe editorial do Hub de Utilidades com revisão pública desta versão em 1 de maio de 2026.
- 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.
- Esta página foi construída para combinar ferramenta interativa, contexto e navegação relacionada.
- Se você encontrar divergência material, use o canal de contato para relatar a situação.
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