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). 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 uma ferramenta. 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. As ferramentas CSS do ValorFinal calculam essa razão e indicam 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.
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 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.