Sobre esta ferramenta
Informe uma cor em HEX (#12808c ou #abc), rgb(18, 128, 140) ou hsl(186, 78%, 31%) e veja na hora nos três formatos, além do contraste WCAG contra texto branco e preto, e uma pequena paleta complementar/análoga pra combinar. Útil quando um design te dá um formato e seu código precisa de outro, ou quando você precisa verificar se uma cor é acessível. Roda inteiramente no navegador.
Como usar
- 1 Digite ou cole um valor de cor no campo.
- 2 Os equivalentes em HEX, RGB e HSL, o contraste e a paleta atualizam juntos.
- 3 Confira o selo AA/AAA para ver se a cor é acessível como texto sobre branco ou preto.
- 4 Clique em qualquer valor ou amostra da paleta para copiá-lo.
Perguntas frequentes
Quais formatos de entrada são aceitos?
HEX de 3 e 6 dígitos (com ou sem #), rgb()/rgba(), e hsl()/hsla(). O canal alfa é ignorado.
As conversões são exatas?
HEX e RGB são exatos. HSL é arredondado para graus e porcentagens inteiros, o que é padrão em CSS.
Funciona offline?
Sim, depois que a página carrega.
O que significa o selo AA/AAA?
É o padrão de acessibilidade WCAG para contraste de texto: AA (4.5:1+) é o mínimo comum, AAA (7:1+) é o nível mais rigoroso, e "AA Large" (3:1+) se aplica só a títulos grandes.
Guia
Incorporar esta ferramenta
Adicione esta ferramenta grátis ao seu site — copie o código abaixo. Ele fica sempre atualizado.
Ferramentas para o seu site →Recomendados
Links de afiliado: podemos receber uma comissão, sem custo extra para você. Só recomendamos o que tem a ver com o assunto. Como Associado da Amazon, ganhamos com compras qualificadas.