No CSS, a mesma cor pode ser escrita de várias formas: HEX, RGB e HSL são as mais comuns. Todas descrevem a mesma cor final, mas cada notação é mais conveniente para um objetivo. Neste guia você entende o que é cada formato, como converter entre eles, como medir contraste para acessibilidade e como usar unidades responsivas com clamp(). Para converter cores, medir contraste e gerar clamp() na prática, use as ferramentas CSS, que rodam no navegador.
Resposta rápida
- HEX (#2563eb), RGB (canais 0 a 255) e HSL (matiz, saturação, luminosidade) descrevem a mesma cor.
- HSL é o mais intuitivo para gerar tons claros/escuros: só ajustar a luminosidade.
- Contraste WCAG 2.2, critério 1.4.3 (AA): mínimo 4,5:1 em texto normal e 3:1 em texto grande (18pt, ou 14pt em negrito).
- clamp() cria tamanhos responsivos (mínimo, preferido, máximo) sem media queries.
O que é HEX
HEX é a cor em hexadecimal, no formato sinal de número seguido de seis dígitos: dois para o vermelho, dois para o verde e dois para o azul. Cada par vai de 00 a ff, ou seja, de 0 a 255 em decimal. O preto é #000000 e o branco é #ffffff. Existe a forma curta de três dígitos, como #f80, em que cada dígito é duplicado, virando #ff8800. É a notação mais usada no dia a dia por ser curta e fácil de copiar de ferramentas de design.
O que é RGB
RGB descreve a cor pela intensidade dos três canais de luz: vermelho, verde e azul, cada um de 0 a 255. A cor #2563eb, por exemplo, é rgb(37, 99, 235). É útil quando você pensa diretamente em quanto de cada canal quer, e é a base de como as telas formam cores. Há ainda a variação com transparência, que adiciona um canal alfa.
O que é HSL
HSL separa a cor em três ideias mais próximas da percepção humana: matiz, saturação e luminosidade. A matiz é o tom, medido em graus de 0 a 360, onde 0 é vermelho, 120 é verde e 240 é azul. A saturação, de 0% a 100%, diz se a cor é viva ou acinzentada. A luminosidade, de 0% a 100%, vai do preto ao branco. HSL brilha quando você quer variações: para um tom mais escuro da mesma cor, basta baixar a luminosidade.
A mesma cor nos três formatos
| Cor | HEX | RGB | HSL |
|---|---|---|---|
| Preto | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Branco | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Azul | #2563eb | rgb(37, 99, 235) | hsl(221, 83%, 53%) |
| Vermelho | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
Quando usar cada formato
- HEX: copiar e colar valores fixos da identidade visual.
- RGB: pensar em canais ou trabalhar com transparência.
- HSL: gerar paletas e variações claras e escuras de uma base.
Como converter HEX para RGB
Separe os três pares e converta cada um de hexadecimal para decimal. Em #2563eb: 25 vira 37, 63 vira 99 e eb vira 235, resultando em rgb(37, 99, 235). Quem não quer fazer a conta à mão pode colar o código no conversor de HEX para RGB, que devolve o RGB e o HSL da mesma cor, cada um com botão de copiar. Para entender a conversão entre bases numéricas em geral, o conversor de bases mostra como o hexadecimal vira decimal.
Como converter RGB para HSL
A conversão de RGB para HSL envolve normalizar os canais para a faixa de 0 a 1, encontrar o maior e o menor valor e derivar a matiz, a saturação e a luminosidade a partir deles. É uma conta com algumas etapas, por isso vale usar um conversor de RGB para HSL. O importante é entender o resultado: a matiz indica o tom, e luminosidade e saturação controlam o brilho e a vivacidade.
Contraste e acessibilidade
Contraste é a razão entre a luminância relativa do texto e a do fundo. O critério 1.4.3 da WCAG 2.2 pede, no nível AA, ao menos 4,5 para 1 em texto normal e 3 para 1 em texto grande, e a norma define texto grande como 18 pontos, ou 14 pontos em negrito. No nível AAA os pisos sobem para 7 para 1 e 4,5 para 1. Logotipo, texto decorativo e componente desabilitado ficam fora do critério. Verificar o contraste evita textos cinza-claro sobre fundo branco, que muita gente não consegue ler. Vale lembrar o que o número é: um piso medido, não uma garantia de leitura. Tamanho, espaçamento e peso do traço continuam pesando, e quem passa no 4,5 para 1 com fonte de 11 px ainda entregou uma tela difícil.
O piso também não admite arredondamento. O documento Understanding 1.4.3, do W3C, diz que a razão calculada não se arredonda antes de comparar, e que 4,499 para 1 não atinge 4,5 para 1. Na prática, o cinza #767676 passa sobre fundo branco, com 4,54 para 1, e o #777777, um tom acima, reprova com 4,48 para 1. O verificador de contraste WCAG faz essa conta sem arredondar e mostra quais critérios passam.
CSS clamp e unidades responsivas
Para tamanhos que se adaptam à tela, clamp() define mínimo, valor preferido e máximo em uma única declaração. Por exemplo, uma fonte pode crescer de 16 px no celular até 24 px no monitor, suavemente, sem media queries. Vale também entender as unidades: px é absoluto, rem é relativo à fonte da raiz, em é relativo ao font-size do próprio elemento (e ao do pai apenas quando usado na propriedade font-size), e vw e vh são relativos ao tamanho da janela.
O gerador de CSS clamp() monta a expressão a partir dos dois tamanhos e das duas larguras de tela, e já divide o resultado pela base rem da sua página. Para passar as medidas de um layout de px para rem, o conversor de px para rem traz a tabela das medidas mais usadas na base que você escolher.
Exemplo prático com botão e fundo
Imagine um botão com texto branco (#ffffff) sobre um fundo azul (#2563eb). A razão de contraste fica em 5,17 para 1, acima de 4,5 para 1, então passa no critério AA para texto normal. Se você quisesse uma variação mais escura do azul para o estado pressionado, em HSL bastaria reduzir a luminosidade alguns pontos, mantendo a mesma matiz. Para formatar a folha de estilo resultante, use o formatador de código.
Montando uma paleta consistente
HSL é especialmente útil para construir uma paleta coerente. A partir de uma cor base, você gera variações mantendo a matiz e ajustando a luminosidade: tons mais claros para fundos, tons mais escuros para textos e bordas. Como a matiz permanece, todas as variações parecem da mesma família, o que dá unidade à interface. Por isso muitos sistemas de design definem as cores em HSL e derivam escalas de 50 a 900, do mais claro ao mais escuro.
Ao montar a paleta, pense em pares de uso: qual cor de texto vai sobre cada cor de fundo. É aí que o contraste entra de novo. Uma cor de marca pode ser linda, mas se o texto branco sobre ela não atinge 4,5 para 1, a leitura sofre. Teste cada par antes de fechar a paleta, e tenha alternativas de texto escuro e claro para diferentes fundos.
Por fim, padronize o formato no código. Misturar HEX em um lugar, rgb() em outro e nomes de cores em um terceiro dificulta a manutenção. Escolha uma convenção, documente as cores como variáveis CSS e reutilize. Combinado com unidades responsivas via clamp() para espaçamentos e tipografia, isso deixa o front-end mais previsível e fácil de evoluir, com menos retrabalho quando a identidade visual muda.
Um cuidado extra é com daltonismo e percepção de cor. A deficiência na visão de cores atinge cerca de 1 em cada 12 homens, número usado pelo National Eye Institute, e uma parcela bem menor das mulheres, então não confie só na cor para transmitir informação. Um botão de erro não deve depender apenas do vermelho; acrescente um ícone ou um texto. Da mesma forma, em gráficos, combine cor com padrões ou rótulos. Bom contraste e uso de cor que não seja a única pista deixam a interface acessível a mais gente, o que melhora a experiência de todo mundo e costuma andar junto com um HTML mais semântico e legível.
Quando usar a ferramenta do ValorFinal
Use as ferramentas CSS para converter HEX, RGB e HSL, calcular contraste WCAG, gerar clamp() e converter unidades. Conheça as demais ferramentas de tecnologia para apoiar seu fluxo de front-end.
Fontes e referências
- MDN (CSS color): notações de cor no CSS.
- WCAG 2.2 (W3C): o critério 1.4.3 (contraste mínimo), o 1.4.6 (contraste melhorado) e a definição de texto grande.
- National Eye Institute (color blindness): a prevalência da deficiência na visão de cores entre homens e mulheres.
Conclusão
HEX, RGB e HSL descrevem a mesma cor de formas diferentes, e escolher a notação certa facilita o trabalho: HSL para gerar paletas, HEX para copiar valores, RGB para canais. Não esqueça o contraste WCAG e o uso de unidades responsivas. Para converter cores, medir contraste e gerar clamp(), use as ferramentas CSS e conheça as demais ferramentas de tecnologia.