Gerador de paleta de cores
Gere paletas de cores — esquemas harmoniosos com códigos hexadecimais copiáveis.
Como usar Gerador de paleta de cores
- Gere paletas até que uma corresponda ao clima — ou semeie a cor da sua marca, se tiver uma.
- Atribua funções: dominante neutro, secundário, acento — a divisão 60-30-10.
- Copie os códigos hexadecimais em variáveis CSS ou nos estilos da sua ferramenta de design.
- Verifique o contraste em cada par de texto/fundo antes de confirmar — Mínimo de 4,5:1.
O que é Gerador de paleta de cores?
Um gerador de paleta de cores produz conjuntos de cores que funcionam juntas (pares complementares, execuções análogas, tonalidades de uma base) com códigos hexadecimais prontos para serem copiados em CSS ou em uma ferramenta de design. Ele automatiza a etapa da teoria das cores: as cores se harmonizam de acordo com suas relações na roda de cores e as paletas geradas codificam essas relações em vez de esperar.
O problema prático que ele resolve: escolher uma cor bonita é fácil; escolher cinco que combinem é uma habilidade de design que a maioria dos projetos não tem em mãos. Uma paleta gerada começa coerente – a diferença entre uma UI que parece temática e outra que parece montada.
Sobre o Gerador de paleta de cores
Gere paletas e copie os códigos hexadecimais adequados ao seu projeto — como um esquema completo ou um ponto de partida que você ajusta.
Transformando uma paleta em um sistema utilizável: aplique a regra 60-30-10 (neutro dominante ~60% da UI, secundário ~30%, acento ~10% — o destaque são seus botões e destaques, não seus planos de fundo); derivar cores funcionais da temperatura da paleta (verde de sucesso, âmbar de aviso, vermelho de perigo que correspondam à saturação do esquema); e gerar matizes/sombras de cada cor para estados de foco, bordas e modo escuro, em vez de introduzir novos matizes.
As duas verificações antes do envio: contraste - pares de texto sobre fundo precisam da proporção de 4,5:1 das WCAG (uma bela paleta que falha no contraste é um redesenho esperando para acontecer); e contexto - as cores mudam perceptualmente contra fundos diferentes, então teste a paleta em branco, escuro e em suas próprias cores. Combine com nosso Conversor de cores para alterações de formato (hex↔RGB↔HSL) à medida que os valores se movem entre as ferramentas.