Conversor de Cor

Sobre esta ferramenta

Trabalhar com cor exige saltar entre notações: HEX para CSS legado, RGB para manipulação de canais, HSL para ajustes intuitivos e OKLCH para paletas perceptualmente uniformes. Este conversor aceita qualquer um desses formatos — incluindo um seletor visual — e mostra os quatro equivalentes instantaneamente, além da taxa de contraste da cor sobre branco e preto segundo os critérios WCAG 2 (AA ≥ 4.5, AAA ≥ 7 para texto normal). Se você inserir uma cor OKLCH fora do gamut sRGB, o resultado é ajustado e sinalizado. Tudo é calculado no navegador.

Casos de uso

• Converter tokens de design entre formatos CSS
• Gerar valores OKLCH para paletas perceptualmente uniformes
• Verificar contraste WCAG de cores de marca em fundos claros/escuros
• Normalizar cores recebidas em formatos mistos

Perguntas frequentes

Quais formatos de entrada são aceitos?

Hexadecimal de 3, 4, 6 ou 8 dígitos (com ou sem #), rgb()/rgba() com números ou porcentagens, hsl()/hsla() e oklch(l c h). Você também pode usar o seletor visual de cor.

O que é OKLCH e por que usá-lo?

OKLCH é um espaço de cor perceptualmente uniforme: variar L muda a luminosidade percebida de forma consistente, ao contrário do HSL. É ideal para gerar paletas e escalas de cor equilibradas.

O que significa o aviso «fora do gamut»?

Algumas cores OKLCH não têm equivalente em sRGB (telas padrão). O conversor aproxima para a cor visível mais próxima e exibe o aviso para você saber que o valor foi ajustado.

Como o contraste é calculado?

Usa-se a fórmula WCAG 2 de luminância relativa: a taxa vai de 1 a 21. AA exige ≥ 4.5 para texto normal e AAA ≥ 7. O painel mostra a taxa da cor sobre branco e sobre preto.