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.
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.
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 do texto e a do fundo. As diretrizes WCAG pedem ao menos 4,5 para 1 em texto normal e 3 para 1 em texto grande no nível AA, e valores maiores no nível AAA. Verificar o contraste evita textos cinza-claro sobre fundo branco, que muita gente não consegue ler. 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 base, em é relativo ao elemento pai, 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. Cerca de uma em cada doze pessoas tem alguma deficiência na visão de cores, 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 também melhora a experiência geral e ajuda no SEO técnico de páginas que priorizam acessibilidade.
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.