Gerador de Harmonia de Cores

O que é harmonia de cores?

Harmonia de cores é a arte de escolher paletas cujos matizes parecem intencionais em vez de aleatórios — e por trás da arte há geometria simples. O círculo cromático organiza matizes em círculo pela sua posição no espectro visível; paletas harmoniosas são conjuntos de pontos nesse círculo cujos ângulos relativos produzem relações visuais previsíveis. Pares complementares (opostos) maximizam contraste e energia. Conjuntos análogos (próximos) parecem calmos e unificados. Trios triádicos são vibrantes mas equilibrados. Cada esquema é uma fórmula testada, não uma regra dura — dão um ponto de partida que você pode afinar dali.

Como usar este gerador

Escolha uma cor base e selecione um esquema. A grade abaixo mostra todas as cores da harmonia, com valores hex, RGB e HSL para cada uma. Clique em qualquer cartão para copiar o hex; clique em Copiar abaixo do bloco de código para pegar uma declaração :root de propriedades customizadas CSS pronta para colar. Troque de esquema para comparar — a mesma cor base produz humores radicalmente diferentes através de relações geométricas diferentes.

Escolhendo o esquema certo para o caso

Complementar funciona para call-to-actions e sistemas de aviso onde contraste é o ponto. Análogo é imbatível para gradientes de hero, peças de humor e marcas com cara natural. Triádico é ótimo para UI de produto infantil, marcas de games e infográficos com três grupos categóricos. Tetrádico e quadrado dão quatro cores mas podem brigar se as quatro forem usadas em peso igual — escolha uma dominante, uma de acento, e use as outras duas com parcimônia. Paletas monocromáticas casam lindamente com um neutro forte e nunca ficam datadas.

A matemática: rotação de matiz

Cada esquema é uma rotação ao redor do anel de matiz HSL, mantendo saturação e luminosidade da cor base. complementar é (h + 180°). complementar-dividido pega a base mais (h + 150°) e (h + 210°) — alternativa mais suave ao complemento puro. análogo é (h − 30°, h, h + 30°). triádico é (h, h + 120°, h + 240°). tetrádico é o retângulo em (h, h + 60°, h + 180°, h + 240°). quadrado distribui quatro pontos igualmente: (h, h + 90°, h + 180°, h + 270°). monocromático mantém o matiz e varia luminosidade em cinco passos igualmente espaçados.

Cola: esquema → humor

Complementar — energético, atrai atenção, polarizador. Complementar-dividido — ousado mas mais suave que o complemento total; ótimo para quem está começando a montar paletas. Análogo — calmo, harmonioso, ideal para marcas de natureza e bem-estar. Triádico — divertido, equilibrado, vibrante. Tetrádico — versátil, rico, precisa de uma cor dominante. Quadrado — ousado e equilibrado; mais difícil de aplicar do que tetrádico. Monocromático — minimalista, sofisticado, amigo da acessibilidade quando combinado com um neutro.

Perguntas frequentes

Como escolho uma cor base?

Comece pelo matiz mais usado da marca — ou, se está partindo do zero, escolha uma cor cujo humor combine com a marca: amarelos e laranjas quentes para energia, azuis e verde-azulado para confiança, vermelhos profundos para seriedade, verdes para natureza. O esquema então propaga esse humor pelos slots secundários.

Por que minhas cores parecem desbotadas no modo monocromático?

O modo monocromático varia luminosidade mantendo matiz e saturação fixos. Se sua cor base tem saturação baixa, as variantes mais clara e mais escura comprimem em direção ao cinza. Para paletas monocromáticas mais ricas, comece de uma base saturada e considere ajustar saturação junto com luminosidade num app de pintura.

Devo usar as quatro cores de uma paleta tetrádica em peso igual?

Quase nunca. Use a regra 60-30-10-10: 60% de cor dominante, 30% secundária, 10% e 10% para os dois acentos. Paletas de quatro cores em peso igual parecem caóticas — dê o protagonismo a uma cor e papéis de coadjuvante às outras.

Esses esquemas são cientificamente precisos?

São definidos geometricamente, não calibrados perceptualmente. O círculo cromático HSL não reflete como o olho humano percebe distância de matiz — amarelo e verde aparentam estar mais perto do que a matemática sugere, enquanto verdes ocupam uma região perceptual muito mais ampla que azuis. Use os esquemas como ponto de partida e ajuste no olho.

Posso salvar minha paleta?

Clique em Copiar no bloco de variáveis CSS para colocar a paleta na área de transferência, e cole no stylesheet do seu projeto. Não armazenamos paletas em servidor — tudo fica local no seu navegador.

Qual a diferença entre complementar-dividido e complementar?

Complementar puro usa duas cores diretamente opostas no círculo — contraste máximo mas visualmente intenso. Complementar-dividido troca o oposto único por duas cores flanqueando-o (±30° do oposto), suavizando o contraste sem perder a energia. É o esquema mais fácil para quem nunca montou uma paleta antes.

Gerador de Harmonia de Cores