Conversor de cores HEX / RGB / HSL
Digite ou cole uma cor em qualquer formato e veja a conversão em tempo real. Clique no seletor de cor para navegar visualmente.
Os três formatos de cor do CSS
HEX (Hexadecimal)
O formato HEX representa uma cor como seis dígitos hexadecimais precedidos por #. Os dois primeiros representam o vermelho, os dois do meio o verde e os dois últimos o azul.
color: #3b82f6; /* azul */
color: #ff0000; /* vermelho puro */
color: #ffffff; /* branco */É o formato mais compacto e amplamente usado em CSS, especialmente para cores fixas em design systems.
RGB (Red, Green, Blue)
O modelo RGB descreve cores como uma combinação de três canais de luz: vermelho, verde e azul. Cada canal vai de 0 a 255.
color: rgb(59, 130, 246); /* azul */
color: rgb(255, 0, 0); /* vermelho puro */
color: rgba(0, 0, 0, 0.5); /* preto semitransparente */A variante rgba() adiciona um canal alpha (transparência) de 0 (transparente) a 1 (opaco).
HSL (Hue, Saturation, Lightness)
HSL descreve cores de forma mais intuitiva para humanos:
- H (matiz): ângulo no círculo cromático, de 0° a 360° — 0°/360° vermelho, 120° verde, 240° azul
- S (saturação): intensidade da cor, de 0% (cinza) a 100% (cor pura)
- L (luminosidade): de 0% (preto) a 100% (branco), com 50% sendo a cor plena
color: hsl(217, 91%, 60%); /* azul */
color: hsl(0, 100%, 50%); /* vermelho puro */
color: hsl(217, 91%, 80%); /* azul mais claro */HSL brilha quando você quer criar variações de uma cor — para escurecer, basta reduzir L; para dessaturar, reduza S.
Quando usar cada formato
| Situação | Formato recomendado |
|---|---|
| Tokens de design / branding | HEX |
| Transparência (overlay, sombra) | RGB com rgba() |
| Variações de tom (hover, dark mode) | HSL |
| Paletas geradas programaticamente | HSL |
| Copiar de outras ferramentas de design | HEX |
CSS Custom Properties com cores
Uma prática moderna é definir as cores base do sistema em variáveis CSS, preferencialmente em HSL, para facilitar a criação de temas:
:root {
--primary-h: 217;
--primary-s: 91%;
--primary-l: 60%;
--color-primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
--color-primary-dark: hsl(var(--primary-h), var(--primary-s), 45%);
--color-primary-light: hsl(var(--primary-h), var(--primary-s), 80%);
}Dessa forma, mudar o --primary-h para outro ângulo muda toda a paleta de uma vez.
Exemplos de conversão
| Cor | HEX | RGB | HSL |
|---|---|---|---|
| Azul padrão | #3b82f6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| Verde | #22c55e | rgb(34, 197, 94) | hsl(142, 71%, 45%) |
| Vermelho | #ef4444 | rgb(239, 68, 68) | hsl(0, 84%, 60%) |
| Amarelo | #eab308 | rgb(234, 179, 8) | hsl(48, 96%, 48%) |
| Roxo | #a855f7 | rgb(168, 85, 247) | hsl(271, 91%, 65%) |
Perguntas frequentes
Qual a diferença entre HEX e RGB?
São representações diferentes da mesma informação. HEX usa base hexadecimal (0-F), RGB usa base decimal (0-255). #FF0000 e rgb(255, 0, 0) são o mesmo vermelho puro.
O HSL é suportado por todos os navegadores?
Sim. HSL é suportado em todos os browsers modernos desde o IE9. A sintaxe hsl() sem vírgulas (especificação CSS Color Level 4) tem suporte em Chrome 65+, Firefox 52+, Safari 12.1+.
Como adicionar transparência?
Use rgba(r, g, b, alpha) ou hsla(h, s%, l%, alpha), onde alpha vai de 0 (totalmente transparente) a 1 (totalmente opaco). Em CSS moderno, você pode usar rgb(r g b / alpha) sem vírgulas.
O que é “profundidade de cor” de 8 bits?
Cada canal (R, G, B) tem 8 bits = 256 valores possíveis (0-255). Três canais resultam em 24 bits = mais de 16 milhões de cores possíveis. Esse é o padrão do CSS.