🧠 Psicologia das Cores
Cores evocam emocoes e associacoes. Nao e magica - e condicionamento cultural e biologico. Entender essas associacoes permite escolher cores que comunicam a mensagem certa.
💭 Associacoes Comuns
🌍 Contexto Importa
Cores tem significados diferentes em culturas diferentes:
- • Branco: Pureza no Ocidente, luto na China
- • Vermelho: Perigo no Ocidente, sorte na China
- • Verde: Ecologia no Ocidente, sagrado no Isla
🎯 Vocabulario para Prompts
Use: azul corporativo que transmite confianca,
verde que sugere sustentabilidade,
paleta que evoca luxo e sofisticacao,
cores energeticas para startup jovem.
🌡️ Temperatura das Cores
Cores sao classificadas como quentes (vermelho, laranja, amarelo) ou frias (azul, verde, roxo). A temperatura afeta a percepcao emocional e espacial.
🔥 Cores Quentes
- • Avancam visualmente (parecem mais proximas)
- • Energeticas, estimulantes
- • Chamam atencao imediata
- • Ideais para CTAs e destaques
❄️ Cores Frias
- • Recuam visualmente (parecem mais distantes)
- • Calmas, profissionais
- • Nao cansam os olhos
- • Ideais para fundos e areas grandes
🎯 Vocabulario para Prompts
Use: paleta fria e profissional (azuis e cinzas),
acento quente em CTA (laranja ou vermelho),
fundo neutro frio com destaques quentes,
temperatura de cor que transmite calma.
🎭 Esquemas de Cores
Esquemas de cores sao combinacoes harmonicas baseadas no circulo cromatico. Usar um esquema garante que as cores funcionem bem juntas.
🔄 Esquemas Principais
Monocromatico
Uma cor em diferentes tonalidades. Elegante e coeso.
Complementar
Cores opostas no circulo. Alto contraste e energia.
Analogo
Cores vizinhas no circulo. Harmonico e natural.
Triadico
3 cores equidistantes. Vibrante mas equilibrado.
🎯 Vocabulario para Prompts
Use: esquema monocromatico em azuis,
paleta complementar (azul + laranja),
cores analogas para transicao suave,
harmonia cromatica baseada no circulo.
📐 Proporcao 60-30-10
A regra de ouro para distribuir cores em um design. 60% cor dominante, 30% cor secundaria, 10% cor de acento.
📊 Visualizacao da Proporcao
🖼️ Exemplo Aplicado (Este Site)
🎯 Vocabulario para Prompts
Use: proporcao 60-30-10 nas cores,
fundo neutro dominante com acento emerald,
cor de acento apenas em CTAs e links,
hierarquia cromatica clara.
⚡ Contraste e Acessibilidade
Contraste adequado nao e opcional - e requisito de acessibilidade. WCAG define ratios minimos para garantir que todos consigam ler seu conteudo.
📏 Ratios WCAG
AA (Minimo)
Texto normal: 4.5:1
Texto grande (18px+): 3:1
AAA (Ideal)
Texto normal: 7:1
Texto grande (18px+): 4.5:1
👁️ Exemplos de Contraste
✓ Contraste Adequado
✗ Contraste Insuficiente
🎯 Vocabulario para Prompts
Use: contraste WCAG AA minimo,
texto com alto contraste para legibilidade,
cores acessiveis para daltônicos,
ratio de contraste 4.5:1 ou maior.
🌓 Dark Mode e Light Mode
Oferecer ambos os modos e quase obrigatorio em 2026. Dark mode reduz fadiga ocular a noite; light mode e melhor sob luz solar.
🌙 Dark Mode
- • Fundo: cinza escuro (#111827), nao preto puro
- • Texto: cinza claro (#E5E7EB), nao branco puro
- • Cores de acento: mais vibrantes
- • Sombras sutis ou ausentes
☀️ Light Mode
- • Fundo: cinza muito claro (#F9FAFB)
- • Texto: cinza escuro (#111827)
- • Cores de acento: podem ser mais escuras
- • Sombras podem ser usadas livremente
💻 Implementacao com Tailwind
🎯 Vocabulario para Prompts
Use: suporte a dark mode e light mode,
dark mode como padrao,
toggle de tema com persistencia,
paleta que funciona em ambos os modos.
📝 Resumo do Modulo
Proximo Modulo:
1.5 - Espaco em Branco: O poder do vazio estrategico