Gerador de Paleta de Cores

Gerador de Paleta de Cores

O Gerador de Paleta de Cores cria 5 cores harmoniosas em segundos baseadas em teoria das cores: complementares, análogas, triádicas, tetrádicas ou monocromáticas. Exporta em HEX, RGB, HSL ou CSS pronto pra colar.

Esquemas de harmonia

• Complementares: 2 cores opostas no círculo cromático (alto contraste). Ex: azul + laranja, vermelho + verde. Bom para chamar atenção.
• Análogas: 3-5 cores adjacentes (transição suave). Ex: azul, ciano, verde-água. Para visual harmonioso.
• Triádicas: 3 cores equidistantes (120° entre si). Vibrante e balanceado.
• Tetrádicas: 4 cores em retângulo (2 pares complementares). Versátil mas difícil de equilibrar.
• Monocromáticas: 5 tons de uma única cor (claro a escuro). Elegante e profissional.

Formatos de cor

Como usar no design

1. 1 cor primária (60%): domina o layout (fundo, blocos principais)
2. 1 cor secundária (30%): complementa (CTAs, destaques)
3. 1 cor de acento (10%): pra elementos que precisam saltar (botões, badges)
4. 2 cores neutras: tons de cinza/branco/preto pra texto e fundos

Acessibilidade: contraste

Pra textos serem legíveis, contraste fundo/texto deve ser ≥4.5:1 (WCAG AA) ou 7:1 (AAA). Cores muito claras como fundo de texto preto, ou muito escuras com texto branco, são seguras. Use ferramentas como WebAIM Contrast Checker pra validar.

Tendências de cor 2026

• Mocha Mousse (cor Pantone 2025/2026): marrom quente acolhedor
• Verde sálvia: natural, calmante
• Lilás suave: feminino moderno
• Terra cota: orgânico, autêntico
• Azul midnight: clássico, corporativo confiável

Perguntas frequentes

Como escolho a cor base?

Pense em emoção: vermelho = urgência/paixão, azul = confiança, verde = crescimento/dinheiro, amarelo = energia, roxo = luxo/criatividade. A cor base define o tom.

Posso usar paletas geradas comercialmente?

Sim. Cores em si não têm copyright. Pode usar livremente em qualquer projeto comercial, redesign, branding.

Qual diferença HEX vs RGB?

Funcionalmente são iguais — só notação diferente. #3B82F6 = rgb(59, 130, 246). RGB permite alpha (rgba(59,130,246,0.5)), HEX não (até CSS Color 4 não chegar ao geral).

O que é o Color CSS variável?

É a sintaxe :root { --color-primary: #3B82F6; } que permite reutilizar a cor em todo o site. Use var(--color-primary) nos elementos. Mudou a paleta? Só altera no :root.