Color

Um conversor de cores online e gratuito que traduz cores entre HEX, RGB e HSL com um seletor ao vivo, além de um verificador de contraste WCAG embutido que reporta aprovação/reprovação AA e AAA para qualquer par de primeiro plano e fundo. Insira uma cor em qualquer formato suportado e obtenha instantaneamente os outros, ajuste-a visualmente com o seletor e copie o valor exato de que seu CSS precisa. O verificador de contraste transforma a acessibilidade de adivinhação em um resultado claro: ele mostra a razão de contraste e se a combinação de texto e fundo atende aos limites WCAG para texto normal e grande. Tudo roda no seu navegador.

Usos comuns

• Converter uma cor de marca em HEX para RGB ou HSL para uso em CSS.
• Verificar se as cores de texto e fundo atendem ao contraste WCAG AA para acessibilidade.
• Ajustar uma cor com o seletor e copiar o valor no formato de que você precisa.
• Verificar se os pares de cores de um design system passam no AAA antes de lançar.
• Traduzir o valor HSL de um designer para o HEX que seu código-base espera.

Perguntas frequentes

Entre quais formatos de cor ele consegue converter?

HEX, RGB e HSL. Insira uma cor em qualquer um desses formatos e ele converte para os outros.

Quais níveis de contraste ele verifica?

Ele reporta a razão de contraste e se o par passa no WCAG AA e AAA tanto para texto normal quanto para texto grande.

De qual razão de contraste eu preciso para passar no WCAG?

O WCAG AA exige pelo menos 4.5:1 para texto normal e 3:1 para texto grande; o AAA exige 7:1 e 4.5:1, respectivamente. O verificador mostra a razão e a aprovação/reprovação para cada um.

Qual é a diferença entre HEX, RGB e HSL?

Eles descrevem as mesmas cores de formas diferentes: HEX e RGB especificam os canais vermelho/verde/azul, enquanto o HSL usa matiz, saturação e luminosidade — geralmente mais fácil para ajustar um tom manualmente.

Os dados da minha cor são enviados para algum lugar?

Não. A conversão e a verificação de contraste rodam inteiramente no seu navegador.