Psicologia das Cores para Landing Pages de Alta Conversão

A cor é a primeira coisa que um visitante processa — antes mesmo de ler uma palavra. Ela comunica o setor, a credibilidade e o tom em milissegundos. Também afeta diretamente se o texto é legível, o que afeta se as pessoas permanecem na página.

Este post explica como o sistema de paletas da PAGEnza funciona e por que as restrições que impomos à seleção de cores produzem, na verdade, melhores resultados do que dar à IA liberdade ilimitada.

O problema de pedir a uma IA para "escolher cores bonitas"

Se você pedir a um LLM para escolher cores para um site, você receberá códigos hexadecimais. Às vezes, eles ficam bem juntos. Às vezes, não. O modelo não tem uma maneira confiável de avaliar se as cores realmente funcionam — se o texto é legível, se a paleta parece apropriada para o setor, se a combinação é visualmente coerente em vez de acidentalmente combinada.

Vimos esse problema claramente nos testes iniciais. A geração de cores sem restrições produziu paletas que variavam de excelentes a completamente inutilizáveis. Não havia consistência.

A solução foi tirar a seleção de cores das mãos do LLM e construir um sistema algorítmico que garante propriedades específicas.

O sistema de 4 cores

Cada site PAGEnza usa exatamente quatro cores nomeadas:

ink — a cor primária do texto. Sempre escura (alto contraste de luminância contra fundos). Usada para títulos, texto do corpo e elementos de UI que precisam ser lidos.

bg1 — o fundo primário. Geralmente a cor mais clara da paleta. Usada para o fundo principal da página e seções claras.

bg2 — o fundo secundário. Cria variedade visual entre as seções. Deve ter uma temperatura de cor diferente de bg1 — se bg1 for um creme quente, bg2 será um cinza frio ou branco com tom azulado.

accent — a cor da marca. Usada para botões, links, destaques e elementos decorativos. Geralmente a cor mais saturada da paleta.

Essa restrição — quatro funções nomeadas, não códigos hexadecimais arbitrários — é o que faz o sistema de paletas funcionar. A IA nunca decide qual cor vai para onde; ela apenas seleciona qual paleta usar de um conjunto pré-auditorado.

Como as paletas são organizadas

Mantemos mais de 20 grupos de paletas, cada um construído em torno de um arquétipo:

• Ousado: alto contraste, acentos saturados — tecnologia, SaaS, fintech
• Suave: tons suaves, dessaturados — bem-estar, coaching, serviços criativos
• Luxo: fundos quase pretos com acentos metálicos ou de joias — serviços premium, varejo de luxo
• Terroso: neutros quentes com acentos de terracota ou sálvia — alimentos, sustentabilidade, artesanato
• Escuro: paletas primárias em modo escuro — desenvolvedores, agências, jogos
• Neutro: seguro, profissional — jurídico, finanças, saúde

Dentro de cada grupo, existem várias paletas com diferentes temperaturas de cor, níveis de saturação e tons de acento. O sistema seleciona um grupo com base no setor e arquétipo, e então escolhe uma paleta específica dentro do grupo.

Contraste WCAG: a restrição que melhora o design

O WCAG AA exige que o texto normal tenha uma taxa de contraste de pelo menos 4,5:1 contra seu fundo. Texto grande precisa de 3:1. Elementos interativos precisam de 3:1 contra cores adjacentes.

Cada paleta em nosso sistema é validada contra essas proporções antes de ser incluída. Especificamente:

• ink deve atingir contraste ≥4,5:1 contra bg1, bg2 e qualquer cor de superfície onde o texto apareça
• accent deve atingir contraste ≥3,0:1 contra bg1 e bg2 (para uso como fundos de botões)
• A validação usa matemática de luminância real — L = 0,2126R + 0,7152G + 0,0722B após correção gama — não aproximações

O efeito é que cada site gerado é legível por padrão. Mas há um benefício secundário: designs de alto contraste convertem melhor. Um botão claramente visível recebe mais cliques do que um que se mistura ao fundo. O requisito de acessibilidade acaba sendo um requisito de conversão.

Contraste de temperatura de cor entre seções

Um detalhe que é fácil de ignorar: bg1 e bg2 devem ter temperaturas de cor contrastantes. Se ambos os fundos forem quentes, seções alternadas parecerão monótonas — a página parecerá um bloco contínuo em vez de áreas de conteúdo distintas.

A regra em nosso sistema: se bg1 tiver um tom quente (direção laranja/amarelo, ou um neutro quente como creme), bg2 deve ser frio (direção azul/cinza). Se bg1 for um branco frio, bg2 pode ser um off-white quente.

É por isso que nossas seções parecem distintas mesmo sem divisores pesados ou sombras — a mudança na temperatura do fundo por si só cria uma clara divisão visual.

Lógica de cores específica do setor

Algumas escolhas de cores são fortemente codificadas por setor. Os visitantes têm expectativas construídas a partir de anos de exposição a sites em uma determinada categoria.

Saúde e bem-estar: azuis e verdes sinalizam confiança e calma. Vermelhos e laranjas saturados parecem alarmantes nesse contexto.

Jurídico e financeiro: azuis escuros, carvão, cinzas conservadores. Acentos brilhantes são aceitáveis, mas precisam ser contidos. Paletas divertidas minam a credibilidade.

Alimentos e hospitalidade: tons quentes — terracota, âmbar, creme — ativam associações de apetite. Paletas clínicas frias parecem erradas.

Tecnologia e SaaS: azuis permanecem dominantes, mas há mais variedade. Azuis elétricos, índigos e até violetas parecem avançados em tecnologia. Fundos pretos puros funcionam para ferramentas de desenvolvedor.

Luxo e premium: a chave é a moderação. Gama de cores limitada, quase pretos ou azuis profundos como cores primárias, acentos dourados ou platina. Alto contraste, nunca saturado.

A seleção de arquétipos no Design Mandate mapeia o setor + tipo de negócio para o grupo de paletas apropriado, para que um coach de bem-estar não acabe com a mesma paleta que um escritório de advocacia, mesmo que ambos sejam descritos como "profissionais".

O que os clientes podem mudar

Após a geração, os clientes podem editar seu site no Gutenberg. O seletor de cores no editor mostra apenas as quatro cores da marca — nada mais. Isso significa:

• Eles podem alternar os fundos das seções entre bg1, bg2 e superfícies
• Eles podem alterar as cores dos botões e links entre accent e ink
• Eles não podem introduzir uma quinta cor arbitrária que quebre a paleta

A restrição é intencional. A maneira mais comum de os clientes estragarem um site projetado profissionalmente é escolher cores da roda de cores completa. Limitar a paleta a quatro cores nomeadas torna isso impossível sem mexer no código.