Conversor de cores: HEX, RGB e HSL

Cada ferramenta de design fala uma língua diferente: hexadecimal em CSS, RGB em editores de imagem e HSL quando quer ajustar o tom sem perder a saturação.

É ainda calculado o contraste sobre branco, o dado que decide se um texto será legível.

A cor é interpretada em qualquer dos três formatos e convertida para os outros dois. A luminância relativa segue a fórmula das diretrizes de acessibilidade WCAG.

O contraste não é questão de gosto

As diretrizes de acessibilidade WCAG fixam uma relação mínima de 4,5 para 1 entre texto e fundo para texto normal, e de 3 para 1 para texto grande. Abaixo desses valores, uma parte importante da população não consegue ler comodamente.

Por que HSL é mais manejável que RGB

Em RGB, clarear uma cor exige tocar em três números ao mesmo tempo. Em HSL basta subir a luminosidade deixando o tom intacto, o que permite construir paletas coerentes mudando um só valor.

O canal alfa e a transparência

Uma cor com alfa mistura-se com o que tem por baixo, portanto o contraste real depende do fundo sobre o qual se situe.

A cor não deve ser o único sinal

Cerca de oito por cento dos homens tem alguma forma de daltonismo. Indicar um erro só com vermelho deixa essas pessoas de fora.