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álogo, triádico, tetrádico, quadrado, complementar dividido, monocromático e tons. Cada paleta é apresentada com valores HEX, RGB e HSL que pode copiar com um clique e usar diretamente em CSS ou em design tokens.
Casos de Uso Comuns para Programadores
Designers prototipam paletas de marca explorando como um matiz de marca evolui sob diferentes regras de harmonia. Programadores frontend definem cores de destaque para botões, alertas e badges a partir de uma cor principal da marca. Engenheiros de visualização de dados escolhem conjuntos de cores categóricas que parecem intencionais, mas continuam distinguíveis. Gestores de produto comparam opções de paleta ao rever propostas de design sem precisarem de ferramentas de design dedicadas.
Formatos, Tipos ou Variantes de Dados
Estão disponíveis oito esquemas: Complementar (base + 180°), Análogo (base ± 30°), Triádico (3 cores separadas por 120°), Tetrádico (retangular, 4 cores), Quadrado (4 cores separadas por 90°), Complementar dividido (base + ±150°), Monocromático (mesmo matiz com luminosidade variável 10–90%) e Tons (mesmo matiz, do escuro ao claro). Cada cor inclui as suas representações HEX, RGB e HSL, juntamente com uma etiqueta de função.
Erros Comuns e Casos Limite
Harmonias derivadas de cores base extremamente dessaturadas ou quase em tons de cinzento parecem indistinguíveis entre esquemas — comece com uma base saturada. Bases muito saturadas combinadas com esquemas triádicos ou tetrádicos podem produzir paletas estridentes e difíceis de equilibrar; considere reduzir a saturação para uso em UI. Algumas combinações derivadas das harmonias não cumprem o contraste WCAG — verifique sempre os pares texto/fundo na ferramenta de Contraste de Cores antes de lançar.
Quando Usar Esta Ferramenta vs Código
Use a ferramenta no browser para ideação, exploração rápida e revisão de design. Em código, bibliotecas como chroma.js, colord ou culori permitem calcular harmonias programaticamente, integrá-las em pipelines de build de design tokens e combinar a matemática das harmonias com espaços de cor perceptualmente uniformes como Oklch para paletas com aspeto mais uniforme.