Conversor de Cores

Os três formatos, e para que serve cada um

HEX é o mais comum em CSS: #2563EB são três pares hexadecimais, um por canal, cada um de 00 a FF, ou seja de 0 a 255. Compacto de escrever e péssimo de ajustar mentalmente — ninguém consegue olhar para um HEX e dizer como clareá-lo um pouco.

RGB é o mesmo dado em decimal: rgb(37, 99, 235). Mais legível, e é o formato natural quando a cor vem de código.

HSL muda a lógica: matiz, saturação e luminosidade. É o único dos três em que a manipulação é intuitiva — para clarear uma cor, você aumenta o L e pronto; para gerar uma paleta harmônica, gira o H mantendo S e L. É por isso que designers preferem HSL para construir sistemas de cor, ainda que o resultado final acabe exportado em HEX.

Por que HEX de 3 dígitos funciona

#fff e #ffffff são a mesma cor porque a forma curta duplica cada dígito: #abc equivale a #aabbcc. É uma conveniência de escrita, não um formato distinto.

A consequência é que só 4.096 das 16,7 milhões de cores possíveis podem ser escritas na forma curta — aquelas em que cada par tem os dois dígitos iguais. Aceitamos as duas formas na entrada e sempre devolvemos a completa.

Contraste: a parte que a maioria das ferramentas ignora

Converter formato é aritmética. O que decide se a cor serve é o contraste com o texto que vai por cima, e é isso que a WCAG mede.

A razão de contraste vai de 1:1 (cores idênticas, ilegível) a 21:1 (preto sobre branco, o máximo possível). Os limites que importam:

4,5:1 — mínimo do nível AA para texto normal. É o patamar exigido pela maioria das legislações de acessibilidade, inclusive em contratações públicas.

3:1 — mínimo do nível AA para texto grande, a partir de 18pt, ou 14pt em negrito. Textos maiores toleram menos contraste porque o traço é mais espesso.

7:1 — nível AAA, o mais rigoroso. Recomendado para conteúdo de leitura prolongada.

A conta não é a diferença ingênua entre os valores RGB: ela usa luminância relativa, que pondera os canais conforme a sensibilidade do olho humano. O verde pesa 71%, o vermelho 21% e o azul apenas 7% — motivo pelo qual um azul saturado parece escuro e um verde da mesma intensidade parece claro.

O erro de escolher cor só no olho

Amarelo sobre branco é o caso clássico. Parece uma cor viva e forte, mas a luminância do amarelo é altíssima — o contraste com branco fica em torno de 1,07:1, praticamente invisível. Já o mesmo amarelo sobre preto passa folgado em AAA.

O inverso também engana: cinza médio sobre branco parece confortável em uma tela boa, num escritório iluminado, para quem enxerga bem. Reprova em AA e desaparece num celular sob sol.

Por isso a ferramenta diz explicitamente qual cor de texto usar por cima e se aquilo passa nos critérios — em vez de deixar a decisão para a impressão visual, que varia com a tela, a iluminação e a visão de quem olha.

O que o contraste não cobre

Passar em AA não resolve daltonismo. Cerca de 8% dos homens têm alguma deficiência na percepção de cores, e a forma mais comum confunde vermelho e verde — duas cores que podem ter contraste excelente entre si e ainda assim ser indistinguíveis para essas pessoas.

A regra prática que resolve: nunca use apenas a cor para transmitir informação. Um gráfico com séries em vermelho e verde precisa também de rótulo, padrão de traço ou forma. Um campo de formulário com erro precisa de ícone ou texto, não só de borda vermelha.