Paleta de Cores Web

Paleta de cores web é o conjunto definido de cores usadas em um site, escolhido para transmitir personalidade da marca, garantir hierarquia visual e manter consistência entre todas as páginas. Boa paleta tem cores principais, secundárias, neutras e de feedback (sucesso, erro, alerta). Aplicada com regras claras, transforma um site em uma identidade visual coerente que comunica antes mesmo do conteúdo ser lido.

O que é uma paleta de cores web?

Paleta de cores web é a seleção curada de cores que um site usa de forma consistente em todos seus elementos visuais. Em vez de escolher cor caso a caso (azul num botão, verde noutro, vermelho num terceiro), você define previamente uma paleta limitada e usa só as cores dela.

Esse limite é o que cria identidade. Sites que usam aleatoriamente qualquer cor parecem amadores e confusos. Sites com paleta definida parecem profissionais e memoráveis — você reconhece a marca pela combinação de cores antes de ver o logo.

Uma paleta web típica tem entre 5 e 10 cores no total: 1 cor primária da marca, 1-2 secundárias, 3-5 tons neutros (cinzas), 3-4 cores de feedback (verde para sucesso, vermelho para erro, amarelo para alerta, azul para info). Esse conjunto cobre praticamente toda interface.

Em WordPress, paleta é configurada nas Global Colors do Elementor, no Customizer do tema ou no theme.json para temas FSE. Uma vez definida, todos os elementos puxam dessas variáveis.

Anatomia de uma paleta de cores

Uma paleta web bem estruturada tem cinco categorias de cores, cada uma com função clara.

Cor primária

A cor principal da marca. Aparece no logo, em CTAs principais, em destaques. É a cor que o usuário associa imediatamente à marca. Geralmente uma só, com 2-3 variações de tom (claro, médio, escuro). Exemplo: o azul do Facebook, o vermelho da Coca-Cola, o verde do WhatsApp.

Cor secundária

Cor de apoio, complementar à primária. Usada em CTAs secundários, ícones de seções, elementos de navegação. Geralmente uma só, ocasionalmente duas em paletas maiores. Deve harmonizar com a primária — pode ser análoga (próxima na roda de cores) ou complementar (oposta na roda).

Cores neutras

Tons de cinza usados em texto, fundos, divisores. 3-5 tons cobrem necessidades: branco/quase branco para fundos claros, cinza claro para fundos sutis, cinza médio para texto secundário, cinza escuro para corpo, preto/quase preto para texto principal. Define a base estrutural de toda interface.

Cores de ação (CTAs)

Em algumas paletas, a cor de CTA é diferente da primária — uma cor extra de destaque (laranja, amarelo) usada exclusivamente em botões importantes. Funciona porque cria contraste com o resto da interface, fazendo CTAs saltarem visualmente. Cuidado: usar muito faz a cor perder destaque.

Cores de feedback

Verde para sucesso (“salvo”, “enviado”). Vermelho para erro (“obrigatório”, “falhou”). Amarelo/laranja para alerta (“cuidado”, “verificar”). Azul para informação (“sabia que…”). Convencionais e amplamente reconhecidas — não invente esquemas próprios para feedback funcional.

Como escolher paleta de cores

Quatro fatores guiam a escolha. Primeiro: identidade da marca. Logo existente já tem cores — comece por elas. Marca nova precisa definir personalidade primeiro: confiável (azul), criativa (laranja), saudável (verde), premium (preto/dourado), diversa.

Identidade da marca

Cada cor carrega significados culturais. Azul transmite confiança e profissionalismo (bancos, SaaS, saúde). Verde sugere natureza, saúde e dinheiro. Vermelho é energia e urgência (varejo, alimentos). Roxo evoca criatividade e luxo. Amarelo é otimismo e alerta. Preto é sofisticação e poder.

Público-alvo

Diferentes públicos respondem a paletas diferentes. Público corporativo prefere paletas conservadoras (azul, cinza, preto). Público jovem aceita combinações ousadas (rosa neon, verde elétrico). B2B tende ao seguro; B2C permite mais experimentação.

Concorrência

Estude paletas dos concorrentes diretos. Diferenciar-se cromaticamente cria distinção imediata. Mas cuidado com convenções de mercado — se todo banco usa azul, fugir disso pode parecer estranho. Equilíbrio entre diferenciação e familiaridade.

Psicologia das cores

A psicologia das cores é parcialmente cultural. Vermelho significa sorte na China, perigo no Brasil. Branco é luto em algumas culturas asiáticas. Considere o público real do site, não apenas convenções ocidentais. Para sites brasileiros, as convenções locais geralmente bastam.

Esquemas de cores clássicos

Cinco esquemas usados em design web combinam cores com base na roda cromática.

Monocromático

Variações da mesma cor (claro, médio, escuro) com adição de neutros. Visual coeso, harmonioso, sofisticado. Risco: pode ficar monótono. Funciona bem para marcas premium ou minimalistas.

Análogos

Cores próximas na roda cromática (azul + azul-esverdeado + verde, por exemplo). Cria harmonia natural sem contraste forte. Bom para sites editoriais ou que querem sensação de tranquilidade.

Complementares

Cores opostas na roda (azul + laranja, vermelho + verde). Contraste forte, ideal para destacar CTAs. Use uma como dominante e a outra com moderação. Resultado vibrante e energético.

Tríade

Três cores equidistantes na roda. Equilibrado e versátil. Use uma como dominante e as outras duas como acentos. Padrão clássico em sites de mídia e entretenimento.

Tétrade

Quatro cores em retângulo na roda cromática. Mais variedade mas mais difícil de balancear. Use uma dominante e as outras três com moderação. Indicado para sites com múltiplas seções distintas.

Ferramentas para criar paletas

Coolors.co é o gerador de paletas mais popular. Pressionar barra de espaço gera nova paleta aleatória; trava cores que gostou e itera nas outras. Exporta em vários formatos (CSS, SCSS, PNG). Gratuito.

Adobe Color é a ferramenta da Adobe para gerar paletas a partir de regras (análogos, complementares, tríade) ou imagens (extrai cores de uma foto). Integra com Adobe Creative Cloud. Gratuito.

Khroma usa IA treinada nas suas preferências. Você seleciona 50 cores que gosta inicialmente e ele gera infinitas combinações no seu estilo pessoal. Útil para descobrir paletas que não pensou.

Paletton é gerador clássico baseado em roda cromática. Visualiza no contexto de site fictício. Bom para entender harmonia entre cores em contexto real.

Como aplicar paleta de cores no WordPress

Em Elementor, vá em Site Settings > Global Colors. Defina as cores do design system: Primary, Secondary, Text, Accent. Todos os widgets e templates puxam dessas variáveis. Mudar a cor primária aqui propaga para todos os botões, links, headings que usam Global Color Primary.

Em temas FSE (Twenty Twenty-Five, Blocksy), configure cores no theme.json. Define paleta como variáveis CSS que aparecem no editor. Bloco Gutenberg usa essas cores via dropdown — usuário escolhe da paleta, não inventa cor nova.

Para temas tradicionais sem FSE, use o Customizer (Aparência > Personalizar > Cores) ou plugins de design system. Astra, Kadence e GeneratePress têm sistemas de cores robustos via Customizer. Resultado: site coerente sem precisar editar CSS manualmente.

Para sites com tema custom, defina variáveis CSS na raiz: –color-primary: #1234ab; –color-secondary: #cd5678; –color-neutral-100: #f5f5f5;. Use no resto do CSS via var(–color-primary). Mudanças globais ficam fáceis. Combine com design system completo.

Paleta de cores e acessibilidade

Acessibilidade impõe limites técnicos sobre paletas. O padrão WCAG 2.1 nível AA exige contraste mínimo de 4.5:1 entre texto e fundo (3:1 para texto grande). Paletas que parecem bonitas no Pantone mas têm contraste insuficiente excluem usuários com baixa visão.

Use o WebAIM Contrast Checker para validar combinações. Cores principais com texto branco e preto: ambos passam? Cinzas em escala: cada tom tem contraste suficiente com texto que vai sobre ele? Botões de CTA: cor de fundo + cor do texto passam no AA?

Daltonismo afeta 8% dos homens e 0.5% das mulheres. Não use só cor para comunicar informação. Erro vermelho + ícone de alerta. Sucesso verde + checkmark. Combinação cor + ícone + texto garante que daltônicos não percam informação. Veja mais em contraste de cor.

Modos escuros (dark mode) são padrão moderno. Sua paleta precisa funcionar em ambos. Defina variáveis para light mode e dark mode separadamente. Cores neutras invertidas (claro vira escuro), cores primárias podem ajustar ligeiramente para manter contraste em fundo escuro.

Perguntas frequentes

Quantas cores deve ter uma paleta? Entre 5 e 10 no total: 1-2 primárias, 1-2 secundárias, 3-5 neutros, 3-4 de feedback. Mais que isso vira bagunça. Menos que isso limita expressão. Para sites simples, 5-7 cores cobrem tudo.

Como gerar paleta a partir do logo? Use Adobe Color (modo “Extract from Image”) ou Coolors.co (Image Picker). Sobe imagem do logo e ferramenta sugere cores principais detectadas. Refine manualmente: ajuste tons, adicione neutros, defina ações.

Paleta de cores afeta SEO? Indiretamente. Cores afetam UX, tempo na página, taxa de rejeição — sinais que o Google usa em ranking. Paleta com contraste insuficiente afeta acessibilidade, sinal SEO direto. Mas a paleta em si não é fator de ranking.

Sites WordPress com identidade visual profissional: conheça a FULL Services. Os planos PRO entregam WordPress com tema configurado, design tokens definidos e page builder profissional pronto para aplicar sua paleta de cores.