Gerador de Harmonias de Cores
Detalhes técnicos
Como Funciona o Gerador de Harmonias de Cores
O Que a Ferramenta Faz
O Gerador de Harmonias de Cores calcula conjuntos de cores matematicamente relacionados a partir de um único matiz base: complementar, análoga, triádica, tetrádica, quadrada, complementar dividida, monocromática e tons. Cada paleta é exibida com valores HEX, RGB e HSL que você pode copiar com um clique e usar diretamente em CSS ou em design tokens.
Casos de Uso Comuns para Desenvolvedores
Designers prototipam paletas de marca explorando como um matiz de marca evolui sob diferentes regras de harmonia. Desenvolvedores frontend definem cores de destaque para botões, alertas e badges a partir de uma cor primária da marca. Engenheiros de visualização de dados escolhem conjuntos de cores categóricas que parecem intencionais, mas continuam distinguíveis. Gerentes de produto comparam opções de paleta ao revisar propostas de design sem precisar de ferramentas de design dedicadas.
Formatos de Dados, Tipos ou Variantes
Oito esquemas estão disponíveis: Complementar (base + 180°), Análoga (base ± 30°), Triádica (3 cores a 120° de distância), Tetrádica (retângulo de 4 cores), Quadrada (4 cores a 90° de distância), Complementar dividida (base + ±150°), Monocromática (mesmo matiz com luminosidade variando de 10–90%) e Tons (mesmo matiz, do escuro ao claro). Cada cor inclui suas representações em HEX, RGB e HSL, junto com um rótulo de função.
Armadilhas Comuns e Casos de Borda
Harmonias derivadas de cores base extremamente dessaturadas ou quase em escala de cinza ficam indistinguíveis entre os esquemas — comece com uma base saturada. Bases altamente saturadas combinadas com esquemas triádicos ou tetrádicos podem produzir paletas chamativas e difíceis de equilibrar; considere reduzir a saturação para uso em UI. Algumas combinações derivadas de harmonias não atendem ao contraste WCAG — sempre verifique pares de texto/fundo na ferramenta de Contraste de Cores antes de publicar.
Quando Usar Esta Ferramenta vs Código
Use a ferramenta no navegador para ideação, exploração rápida e revisão de design. No código, bibliotecas como chroma.js, colord ou culori permitem calcular harmonias programaticamente, integrá-las a pipelines de build de design tokens e combinar a matemática de harmonias com espaços de cor perceptualmente uniformes como Oklch para paletas com aparência mais uniforme.