Escopo: conversão HEX ↔ RGB ↔ HSL, sem canal alpha
Entrada aceita: #RRGGBB, #RGB, rgb(r, g, b) ouhsl(h, s%, l%) (também reconhece rgba()/hsla(), mas descarta o alpha — a saída é sempre opaca nos três formatos). O formato de entrada é detectado automaticamente pelo prefixo/sintaxe.
Quando usar cada formato
- HEX — padrão de fato em ferramentas de design (Figma, Sketch) e em paletas de marca; mais compacto para copiar/colar entre design e código.
- HSL — melhor para gerar variações programáticas de uma cor base (hover, disabled, dark mode, escalas de tema): fixe o hue e varie só
l(luminosidade) ous(saturação). - RGB — mais direto quando o canal de transparência importa: use
rgba(r, g, b, a), já que HEX de 8 dígitos com alpha não tem suporte universal em navegadores e ferramentas de design.
Casos de uso típicos: extrair uma cor HEX de um design em Figma e gerar a escala de tons correspondente em HSL para um design system; ou depurar um valor de rgb() vindo de getComputedStyle no DevTools.
O que cada modelo representa
RGB descreve a cor pela intensidade de três emissores — vermelho, verde e azul —, cada um de 0 a 255. É como o monitor efetivamente funciona, o que torna o modelo preciso e ao mesmo tempo pouco intuitivo: não há como olhar para rgb(217, 119, 6) e saber que se trata de um laranja escuro.
HEX é a mesma informação do RGB em notação hexadecimal — dois dígitos por canal. #D97706 e rgb(217, 119, 6) são exatamente a mesma cor. A forma curta de 3 dígitos é uma abreviação em que cada dígito é duplicado: #F80 equivale a #FF8800.
HSL descreve a cor por matiz, saturação e luminosidade. O matiz é um ângulo de 0 a 360 no círculo cromático: 0 é vermelho, 120 é verde, 240 é azul. É o único dos três que permite raciocinar sobre a cor em vez de sobre a máquina.
Por que HSL facilita a construção de temas
A vantagem prática do HSL aparece quando você precisa de variações coerentes de uma cor base. Fixando o matiz e mexendo apenas na luminosidade, sai uma escala inteira:
hsl(217, 91%, 95%)— fundo sutilhsl(217, 91%, 60%)— cor principalhsl(217, 91%, 45%)— estado hoverhsl(217, 91%, 25%)— texto sobre fundo claro
Fazer o mesmo em HEX exige recalcular os três canais a cada tom, e o resultado raramente mantém a harmonia. Reduzir a saturação, por sua vez, é a forma natural de criar estados desabilitados.
Vale uma ressalva: a luminosidade do HSL é matemática, não perceptual. Dois tons com o mesmo l mas matizes diferentes — um amarelo e um azul, por exemplo — parecem ter brilhos bem distintos aos olhos. Modelos mais recentes do CSS, como oklch(), corrigem isso usando um espaço perceptualmente uniforme, e são a escolha melhor quando o alinhamento visual entre matizes importa.
Contraste e acessibilidade
Escolher a cor é metade do trabalho; a outra é garantir que ela seja legível. As diretrizes WCAG estabelecem razões mínimas de contraste entre texto e fundo:
- 4,5:1 para texto normal, no nível AA;
- 3:1 para texto grande, a partir de 18pt ou 14pt em negrito;
- 7:1 para o nível AAA, mais rigoroso.
Um erro comum é confiar na luminosidade do HSL como se ela indicasse contraste. Ela não indica: o cálculo de contraste usa a luminância relativa, que pondera os canais de forma diferente — o verde contribui muito mais que o azul para a percepção de brilho. Texto branco sobre amarelo com l: 50% é ilegível, enquanto sobre azul com a mesma luminosidade fica confortável.
Sobre o canal alpha
A entrada aceita rgba() e hsla(), mas o canal de transparência é descartado — a saída é sempre opaca nos três formatos. Se você precisa de transparência, mantenha a notação com alpha diretamente no CSS.
Existe HEX de 8 dígitos, em que os dois últimos representam o alpha (#RRGGBBAA), com suporte amplo nos navegadores atuais — mas ainda irregular em ferramentas de design e em clientes de e-mail, o que faz de rgba() a opção mais segura para transparência.
Para gerar paletas a partir de uma cor de marca ou depurar valores capturados no DevTools, combine esta ferramenta com o formatador de CSS. Toda a conversão acontece no seu navegador.