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.