Converter HEX para RGB e HSL: conversor de cores

Designers entregam códigos hexadecimais, animações CSS preferem HSL porque a interpolação faz sentido e o trabalho com canvas precisa dos canais RGB. Este conversor recebe uma cor e gera os equivalentes, com uma amostra ao vivo e a razão de contraste contra preto e branco para conferir a acessibilidade.

Conversor de cores: como usar

1. Digite uma cor em HEX ou escolha no seletor.
2. Leia os valores equivalentes em RGB e HSL.
3. Confira as razões de contraste com texto branco e preto.
4. Copie o formato que precisa, já na sintaxe CSS.

Perguntas frequentes

Por que usar HSL em vez de HEX?

Porque o HSL é legível para humanos. Clarear uma cor é aumentar um número, em vez de recalcular três pares hexadecimais, o que facilita muito montar uma paleta coerente.

Qual contraste preciso para acessibilidade?

A WCAG AA exige 4,5:1 para texto normal e 3:1 para texto grande; a AAA sobe para 7:1. Os números da ferramenta mostram na hora se funciona melhor texto branco ou preto.

O que significa o quarto valor do RGBA?

É o alfa, a opacidade, de 0 (totalmente transparente) a 1 (totalmente opaco). O CSS moderno também aceita um hexadecimal de oito dígitos em que o último par codifica o alfa.

Por que o mesmo HEX parece diferente em duas telas?

Por gerenciamento de cor. As telas variam em gama e calibração e, sem um perfil de cor explícito, o mesmo valor sRGB aparece diferente num monitor de gama ampla.

Formatador JSON · Codificador Base64 · Codificador de URL · Decodificador JWT · Ver todas as ferramentas

Também disponível em: English · Español · Français · Deutsch