Gere paletas de cores e verifique o contraste

Como usar: Gerador de paleta de cores e contraste

1. 1

   Comece por uma cor

   Digite ou escolha uma cor base e depois selecione uma harmonia, como análoga, tríade ou complementar dividida — ou embaralhe uma paleta aleatória.

2. 2

   Trave e refine

   Trave as amostras de que você gosta antes de embaralhar de novo, edite qualquer amostra diretamente ou extraia as cinco cores dominantes de uma foto.

3. 3

   Verifique a legibilidade

   Abra Contraste para testar o texto sobre o fundo com WCAG 2.2 AA e AAA, aplique uma correção sugerida e veja a paleta como pessoas com daltonismo a enxergam.

4. 4

   Exporte

   Copie variáveis CSS, um tema Tailwind v4 ou configuração v3, SCSS ou JSON com tons de 50 a 950, ou baixe amostras em PNG.

Sobre: Gerador de paleta de cores e contraste

O gerador de paleta de cores cria um esquema de cinco cores e tudo o que um design system precisa em torno dele. As harmonias giram o matiz base no círculo cromático HSL: a análoga avança 30° para cada lado, a complementar adiciona o matiz oposto, a complementar dividida usa os dois matizes vizinhos ao oposto, a tríade distribui três matizes a 120° de distância, a tétrade usa um quadrado de 90° e a monocromática mantém um matiz em cinco níveis de luminosidade. O modo aleatório respeita as amostras travadas, e a opção de imagem agrupa os pixels de uma foto em OKLab para encontrar as cinco cores distintas mais comuns.

Para cada cor, a aba Tons gera uma escala de 11 passos, de 50 a 950, em OKLCH, em que o passo mais próximo da sua cor recebe o valor exato; ou, então, os 13 tons do sistema HCT do Material 3, junto com as cinco paletas-chave que um tema Material derivaria. O verificador de contraste usa a fórmula de luminância da WCAG 2.2, nunca arredonda uma taxa para cima e sugere a cor mais próxima que passa, alterando apenas a luminosidade e mantendo o matiz. Uma grade mostra a taxa de cada par da paleta contra o branco e o preto.

As simulações cobrem protanopia, deuteranopia, tritanopia e acromatopsia com as matrizes de Machado e indicam amostras que se confundem entre si. As exportações nomeiam as cores pelo matiz e aceitam nomes personalizados. A ferramenta não avalia se as cores combinam com uma marca, e as simulações são aproximações de como pessoas com deficiência na visão de cores enxergam; elas não substituem testes com essas pessoas.

Recursos

Gerador de paleta de cores e contraste: perguntas frequentes