Em resumo: HEX, RGB e HSL descrevem todos as mesmas cores, mas de formas diferentes. HEX e RGB são duas notações dos mesmos valores vermelho-verde-azul; o HSL os reexpressa como matiz, saturação e luminosidade, muito mais fáceis de ajustar à mão. Saber qual formato usar poupa muitas suposições ao igualar ou ajustar cores.
Uma cor na web é, no fim, três canais — vermelho, verde e azul — mas a forma de escrever esses canais muda o quanto é fácil raciocinar com eles.
HEX e RGB: a mesma coisa, escrita duas vezes
RGB lista os três canais diretamente: rgb(37, 99, 235). HEX empacota os valores idênticos numa string hexadecimal: #2563EB, onde 25, 63 e EB são os bytes de vermelho, verde e azul. São intercambiáveis — HEX é compacto e comum em ferramentas de design, RGB é conveniente no código porque você pode calcular cada canal. Nenhum é mais «exato»; são duas grafias de uma mesma cor.
HSL: o formato feito para ajustar
HSL descreve uma cor como matiz (sua posição na roda de cores, 0–360°), saturação (quão viva, 0–100%) e luminosidade (quão clara, 0–100%). É o formato para ajustar em vez de substituir uma cor: baixe a luminosidade para um estado hover, reduza a saturação para uma variante suave, ou desloque o matiz para achar uma cor complementar. Fazer os mesmos ajustes em HEX é adivinhar valores de bytes.
Alfa e HEX de 8 dígitos
A transparência se expressa com um canal alfa: rgba() e hsla() adicionam um quarto valor de 0 (transparente) a 1 (opaco). O CSS moderno também suporta HEX de 8 dígitos, onde os dois últimos caracteres codificam o alfa — #2563EB80 é o mesmo azul a cerca de 50% de opacidade.
O CMYK é outro mundo
HEX, RGB e HSL são todos modelos de cor de tela (luz aditiva). O CMYK é para impressão (tinta subtrativa). Uma conversão entre eles é sempre aproximada porque os dois não reproduzem exatamente a mesma gama, então trate uma conversão tela-para-impressão como ponto de partida a verificar, não como correspondência exata.
Um fluxo prático
- Cole a cor de partida — em qualquer formato — no Conversor de Cores para ver todos os formatos de uma vez.
- Mude para HSL para construir variantes: ajuste a luminosidade para os estados, a saturação para os tons suaves.
- Adicione alfa com
rgba()/hsla()ou o HEX de 8 dígitos onde precisar de transparência. - Use a pré-visualização do gradiente para gerar um trecho CSS pronto para duas ou mais cores.
Se trabalha uma paleta em lote, converta várias cores de uma vez (separadas por vírgulas ou quebras de linha) e mantenha os resultados junto às notas com o Contador de Caracteres.
Erros comuns a evitar
- Ajustar cores em HEX quando o HSL tornaria o ajuste óbvio.
- Esperar que uma conversão CMYK corresponda exatamente à tela.
- Esquecer o canal alfa e obter uma cor opaca onde queria transparência.
- Misturar formatos de forma incoerente numa folha de estilos.