Conversor e Seletor de Cores
HEX, RGB, HSL — e uma verificação de contraste
Entrada
Resultado
- HEX
#1FA89C - RGB
rgb(31, 168, 156) - HSL
hsl(175, 69%, 39%) - CMYK
cmyk(82%, 0%, 7%, 34%)
Tons claros e escuros (clique para ir até aquela cor)
WCAG: texto corrido precisa de 4,5:1 (AA) e 7:1 para AAA. O CMYK é apenas indicativo — ele ignora perfis de cor.
Ferramentas de design falam HEX, animações CSS querem HSL e código de canvas quer canais RGB. Escolha uma cor uma vez e receba todas as notações, junto com os números de contraste que decidem se o texto em cima dela vai ser legível.
Como usar
- 1 Escolha uma cor, ou cole um código em qualquer formato.
- 2 Todas as outras notações aparecem de uma vez.
- 3 Use a escala de tons claros e escuros para montar uma paleta consistente.
- 4 Confira as razões de contraste antes de usar a cor atrás de um texto.
Perguntas frequentes
De que razão de contraste eu preciso?
A WCAG AA exige 4,5:1 para texto corrido e 3:1 para texto grande. A AAA pede 7:1. Abaixo de 3:1 o texto é genuinamente difícil de ler para muita gente, e não apenas menos confortável.
Por que usar HSL em vez de HEX?
O HSL separa matiz de saturação e luminosidade, então deixar uma cor 10% mais clara é mexer em um número, e não adivinhar em três canais. É por isso que sistemas de design montam suas escalas em HSL.
O valor CMYK serve para impressão?
Só como indicação aproximada. A conversão real depende do papel, da tinta e do perfil de cor. Para qualquer coisa que vá para a gráfica, pegue os valores com a gráfica, não com uma fórmula.