Conversor de Cores (HEX/RGB/HSL)
Converta cores entre os formatos HEX, RGB e HSL. Inclui seletor de cores visual e pré-visualização.
Como Usar
- Insira um valor de cor em qualquer formato (HEX, RGB ou HSL)
- Veja os valores convertidos em todos os outros formatos instantaneamente
- Use o seletor de cores para selecionar uma cor visualmente
- Copie qualquer formato com o botão Copiar
Perguntas Frequentes
-
Qual é a diferença entre HEX, RGB e HSL?
HEX usa notação hexadecimal (#FF5733). RGB define cores pelos valores de Vermelho, Verde e Azul (0-255). HSL define cores por Matiz (0-360), Saturação (0-100%) e Luminosidade (0-100%).
-
Qual formato de cor devo usar no CSS?
Os três formatos são válidos em CSS. HEX é o mais compacto, RGB é intuitivo para misturar cores, e HSL é melhor para criar variações de cores ajustando luminosidade ou saturação.
-
Esta ferramenta suporta alfa/transparência?
A versão atual converte cores opacas. O suporte para canais alfa (RGBA, HSLA, HEX de 8 dígitos) está planejado para uma atualização futura.
-
Posso usar o seletor de cores no celular?
Sim, o seletor de cores usa o seletor nativo em todos os dispositivos, incluindo navegadores móveis.
Os Três Formatos de Cor do CSS
Em desenvolvimento web, três formatos dominam a representação de cores no CSS: HEX, RGB e HSL. Cada um tem suas forças e situações onde brilha. Entender as diferenças ajuda a escolher o formato certo para cada contexto.
HEX: Conciso e Onipresente
O formato hexadecimal (#FF5733) representa cada canal de cor (vermelho, verde, azul) com dois dígitos hexadecimais, de 00 a FF (0 a 255 em decimal). Quando ambos os dígitos de um canal são iguais, pode ser abreviado: #FF5533 → #F53.
Quando usar HEX:
- Em folhas de estilo com valores de cor fixos definidos pelo design
- Ao copiar cores de ferramentas como Figma, Adobe XD ou Photoshop — elas exportam em HEX por padrão
- Quando a compacidade importa e você não precisa ajustar os valores programaticamente
Limitação: HEX não é intuitivo para ajustes manuais. Escurecer #3A7BD5 em 20% mentalmente é quase impossível.
RGB: Intuitivo para Mistura de Cores
O modelo RGB (rgb(255, 87, 51)) define cores pelos valores dos canais vermelho (Red), verde (Green) e azul (Blue), cada um variando de 0 a 255. A variante RGBA adiciona um quarto valor de opacidade (alpha) entre 0 e 1.
Quando usar RGB:
- Quando você precisa manipular cores via JavaScript (fácil de decompor e recalcular)
- Para animações onde os valores mudam gradualmente
- Quando a transparência é necessária:
rgba(0, 0, 0, 0.5)para um overlay semitransparente
Dica prática: rgb(0, 0, 0) é preto, rgb(255, 255, 255) é branco — útil para criar gradientes entre extremos.
HSL: O Formato Mais Amigável para Desenvolvedores
O modelo HSL (hsl(14, 100%, 60%)) descreve cores com três propriedades humanas intuitivas:
- Matiz (Hue): o ângulo na roda de cores (0–360°). 0°/360° = vermelho, 120° = verde, 240° = azul.
- Saturação (Saturation): a intensidade da cor. 0% = escala de cinza, 100% = cor pura.
- Luminosidade (Lightness): o brilho. 0% = preto, 50% = cor normal, 100% = branco.
Quando usar HSL:
- Para criar paletas de cores com variações consistentes — altere apenas a luminosidade para gerar tons mais claros e escuros da mesma cor
- Para implementar modo escuro: inverta ou ajuste a luminosidade das cores da paleta
- Para garantir acessibilidade: é muito mais fácil garantir contraste suficiente manipulando luminosidade no HSL do que no HEX
Exemplo Prático: Paleta com HSL
:root {
--primary: hsl(220, 85%, 55%); /* cor base */
--primary-light: hsl(220, 85%, 70%); /* versão clara */
--primary-dark: hsl(220, 85%, 40%); /* versão escura */
}
Basta mudar o valor de luminosidade para obter variações harmoniosas da mesma cor.
Suporte nos Navegadores
Todos os três formatos são suportados em 100% dos navegadores modernos. O CSS moderno (nível 4) também introduziu novos formatos como oklch() e color() para gamuts de cores mais amplos (como P3), mas HEX, RGB e HSL continuam sendo os pilares do desenvolvimento web cotidiano.