Conversor de Cores
Converta uma cor entre os formatos HEX, RGB, HSL e CMYK, confira o contraste com a cor de fundo pelos critérios WCAG e gere uma escala de dez tons do claro ao escuro.
Seus dados são processados no seu navegador e não são enviados nem armazenados.
Como usar
- Escolha a cor pelo seletor ou digite o código HEX.
- Confira os valores em HEX, RGB, HSL e CMYK e copie o que precisar.
- Escolha a cor de fundo para ver a razão de contraste e a aprovação AA e AAA.
- Veja os dez tons gerados e copie o que quiser usar.
HEX, RGB e HSL
HEX e RGB descrevem a mesma cor com os níveis de vermelho, verde e azul. HSL descreve a cor pela matiz, saturação e luminosidade, o que facilita criar variações. A ferramenta converte nos dois sentidos e aceita HEX com três, seis ou oito dígitos.
CMYK para impressão
CMYK usa ciano, magenta, amarelo e preto, tintas da impressão. Cores bem vivas na tela podem ficar mais opacas no papel, por isso confira o resultado com a gráfica antes de imprimir em grande quantidade.
Contraste WCAG
A razão de contraste mede a diferença de luminosidade entre texto e fundo. Para texto normal, o mínimo AA é 4,5 para 1, e o AAA pede 7 para 1. Para texto grande, o mínimo AA é 3 para 1. Textos com pouco contraste são difíceis de ler.
Tons da mesma cor
Os dez tons mantêm a matiz e a saturação da cor escolhida e variam só a luminosidade. São úteis para fundos, bordas e estados de botões, mantendo a identidade visual do projeto.
Limites da conversão
As conversões entre CMYK e RGB são aproximações, porque os espaços de cor têm gamas diferentes. Para produção profissional, use um perfil de cor da sua gráfica.
Como usar o resultado
Antes de publicar uma paleta, teste os pares de cores de texto e fundo com a razão de contraste. Use a escala de tons para criar estados como hover, desabilitado e destaque, mantendo a mesma matiz. Copie o valor no formato que o seu projeto usa, seja HEX, RGB ou HSL, e confira o resultado na tela antes de aplicar.
Atenção
Cores que passam no contraste em uma tela podem falhar em outra, por causa do brilho e das condições de luz. Teste o resultado em aparelhos reais quando a legibilidade for crítica.
Perguntas frequentes
Qual a diferença entre HEX e RGB?
São a mesma informação em formatos diferentes. HEX usa base 16 e RGB usa números de 0 a 255.
O que significa AA e AAA?
São níveis de acessibilidade do padrão WCAG. AA é o mínimo recomendado, e AAA é um nível mais exigente.
A cor fica salva em algum lugar?
Não. A conversão acontece no navegador e nada é enviado a servidores.
Por que a cor no CMYK muda um pouco?
A conversão é aproximada. Telas e impressoras reproduzem cores de formas diferentes.