Harmonia e Psicologia das Cores
A harmonia de coresé o princípio de combinar cores de forma que a composição seja visualmente agradável. Cores complementares (opostas no círculo cromático) criam contraste vibrante — ideal para destaques e CTAs. Cores análogas (vizinhas no círculo) criam harmonia suave — perfeitas para fundos e seções neutras. Cores triádicas (espaçadas 120°) oferecem equilíbrio entre variedade e coesão.
A psicologia das coresafeta diretamente a percepção e o comportamento do usuário. Vermelhotransmite urgência e paixão (promoções, botões de compra). Azultransmite confiança e profissionalismo (empresas de tecnologia e finanças). Verdeassocia-se a natureza e saúde. Amarelochama atenção e transmite otimismo. Roxoremete a luxo e criatividade. Laranjacombina energia com acessibilidade.
Na prática, a regra 60-30-10é amplamente usada: 60% da composição em cor dominante (fundo), 30% em cor secundária (elementos de apoio) e 10% em cor de destaque (botões, links). Essa proporção cria hierarquia visual clara e guia o olhar do usuário para os elementos mais importantes da interface.
Dicas para Uso de Cores
- Aplique a regra 60-30-10: 60% cor dominante, 30% secundária, 10% de destaque para hierarquia visual.
- Cores quentes (vermelho, laranja) avançam visualmente; cores frias (azul, verde) recuam — use isso para profundidade.
- Para textos, sempre verifique contraste mínimo WCAG (4.5:1) entre cor do texto e cor de fundo.
- Cores saturadas chamam atenção — reserve-as para elementos interativos (botões, badges, alertas).
- Use tons pastéis para fundos e seções grandes — reduzem fadiga visual em uso prolongado.
- O histórico mostra suas últimas cores geradas — combine-as para testar paletas consistentes.
Perguntas Frequentes
Como as cores quentes e frias se diferenciam?
Cores quentes (vermelho, laranja, amarelo) transmitem energia e proximidade. Cores frias (azul, verde, roxo) transmitem calma e profundidade. Cores quentes são ideais para CTAs; frias para fundos e elementos de navegação.
O que é a regra 60-30-10?
É uma proporção de design que distribui cores: 60% para a cor dominante (geralmente fundo neutro), 30% para a cor secundária (elementos de apoio) e 10% para a cor de destaque (ações importantes). Cria hierarquia visual equilibrada.
Posso usar as cores geradas em projetos comerciais?
Sim. Cores não possuem restrições de uso. Os códigos gerados (HEX, RGB, HSL) são livres para uso em qualquer projeto pessoal ou comercial, impresso ou digital.
Como copiar o código da cor?
Clique em qualquer bolinha no histórico para copiar o código HEX automaticamente. Os códigos HEX, RGB e HSL também são exibidos abaixo da pré-visualização circular para referência.
Cores geradas aleatoriamente são para inspiração. Para uso profissional, valide sempre a acessibilidade (contraste WCAG) e a consistência com o design system do projeto.