Conversor de cores para UI real
Converta valores de cor, confira contraste e explore paletas relacionadas antes de um token de design ir para produção.
A proporção 4,5:1 é a base comum da WCAG para texto normal. Texto grande tem limite menor, mas contraste fraco ainda prejudica usuários reais.
Relações de cor sugeridas
Guia de formatos de cor
HEX
Formato compacto muito usado em design web, normalmente escrito como um valor hexadecimal de seis dígitos.
RGB
Modelo de cor voltado a telas, baseado em valores de luz vermelha, verde e azul.
HSL
Modelo mais legível para humanos, baseado em matiz, saturação e luminosidade. Ajuda a criar estados de UI mais claros, escuros ou relacionados.
CMYK
Modelo voltado a impressão, baseado em ciano, magenta, amarelo e preto. Espere alguma variação ao traduzir cores brilhantes de tela para impressão.
Contraste
Contraste afeta formulários, dashboards, tabelas de preço, estados de erro e qualquer lugar em que o usuário precise ler rápido.
Perguntas frequentes
Por que conversões RGB e CMYK variam um pouco?
Cor de tela e cor de impressão operam em espaços diferentes. Algumas cores RGB simplesmente não podem ser reproduzidas exatamente em CMYK.
O que significa a pontuação de contraste WCAG?
Ela mede o quão legíveis ficam, juntos, primeiro plano e fundo. Valores maiores geralmente indicam melhor leitura para texto.
Cores de marca devem ser usadas em texto corrido?
Não necessariamente. Uma cor de marca que funciona bem em logos ou acentos pode falhar como texto. Use neutros mais fortes ou tons ajustados quando legibilidade importar.
Por que as cores parecem diferentes entre ferramentas?
Telas, perfis de cor, navegadores e fluxos de impressão podem renderizar o mesmo valor numérico de formas diferentes. Use a conversão como guia prático e teste no meio final.