1. O Que E Harmonia de Cores

Harmonia de cores e a combinacao esteticamente agradavel de duas ou mais cores, baseada em relacoes matematicas entre suas posicoes na roda de cores. Na teoria classica das cores — originalmente formalizada por Johann Wolfgang von Goethe e Johannes Itten — certas combinacoes produzem sensacoes de equilibrio, tensao ou vibracao, dependendo da relacao angular entre as matizes.

Para designers e desenvolvedores frontend, entender harmonia de cores e fundamental para criar interfaces consistentes, marcas coesas e experiencias visuais que comunicam os valores certos ao usuario.

2. A Roda de Cores e o Espaco HSL

A roda de cores organiza matizes em um circulo de 0 a 360 graus. O espaco de cor HSL (Matiz, Saturacao, Luminosidade) e ideal para calcular harmonias porque a matiz (H) corresponde diretamente ao angulo na roda — tornando operacoes como "cor oposta" simples adicoes de 180 graus.

• Matiz (H): o angulo na roda de cores (0-360). 0 e vermelho, 120 e verde, 240 e azul.
• Saturacao (S): a intensidade da cor (0% e cinza, 100% e vibrante).
• Luminosidade (L): o brilho (0% e preto, 100% e branco).

Nossa ferramenta converte internamente entre HEX e HSL para calcular as harmonias, garantindo precisao matematica em todas as operacoes.

3. Tipos de Harmonia e Quando Usar

Cada tipo de harmonia tem caracteristicas distintas e casos de uso ideais:

• Complementar: maxima tensao e contraste. Ideal para chamadas de atencao, botoes de CTA e elementos que precisam se destacar do fundo.
• Analogas: transicao suave, sensacao organica e natural. Excelente para fundos, gradientes e interfaces que precisam parecer calmas e coesas.
• Triade: equilibrio dinamico com tres cores igualmente espacadas. Usada em identidades visuais que precisam de variedade sem perder harmonia.
• Split-Complementar: contraste mais suave que o complementar, com tres cores. Boa escolha para paletas de interface com cor de destaque e duas neutras coloridas.
• Quadrada/Tetrade: quatro cores, maximo de variedade. Requer cuidado — funciona melhor quando uma cor domina e as outras sao usadas com moderacao.
• Monocromatica: uma unica matiz em varios tons. Cria sofisticacao e profundidade sem risco de conflito. Ideal para dark modes e designs minimalistas.

"A melhor paleta nao e a mais bonita isolada — e a que funciona melhor no contexto do produto e do publico que vai usa-lo."

4. Contraste e Acessibilidade WCAG

A ferramenta inclui verificacao de contraste segundo as diretrizes WCAG 2.1 (Web Content Accessibility Guidelines). As regras principais sao:

• AA Normal: razao de contraste minima de 4.5:1 para texto de tamanho normal.
• AA Grande: razao de contraste minima de 3:1 para texto grande (acima de 18pt ou 14pt bold).

Garantir contraste adequado e essencial para usuarios com baixa visao e e exigido por normas de acessibilidade em varios paises. Sempre verifique as combinacoes de cor antes de usa-las em texto sobre fundo.

5. Exportando como CSS Variables

A ferramenta gera automaticamente um bloco :root { } com CSS custom properties prontas para usar. Voce pode colar diretamente no seu arquivo de estilos global e referenciar as variaveis em todo o projeto.

O padrao de nomenclatura --color-1 a --color-N e intencional e generico — renomeie para algo semantico como --color-primary, --color-accent ao integrar no seu design system.

6. Perguntas Frequentes

A ferramenta suporta formatos alem de HEX?

Atualmente o campo de entrada aceita valores HEX de 6 digitos (#RRGGBB). Os swatches exibem tambem os valores RGB e HSL para referencia.

Por que as cores geradas tem a mesma saturacao e luminosidade da cor base?

Por design: a ferramenta varia apenas a matiz, mantendo S e L constantes. Isso garante que a paleta seja visualmente coesa — todas as cores "pesos" equivalentes. Se quiser variacoes de saturacao ou luminosidade, use o modo Monocromatico.

Como usar a verificacao de contraste?

A tabela de contraste compara automaticamente todos os pares de cores gerados na paleta. PASS indica que o par atende o criterio WCAG; FAIL indica contraste insuficiente para uso com texto.