Paleta de cores — guia completo
definir 2 cores principais (primária e secundária) configura toda a interface da sua plataforma — botões, links, hover, destaques — sem precisar mexer em CSS.
# Paleta de cores — guia completo
⏱️ 6 min de leitura · 🏷️ Plataforma · 👤 Admin de Plataforma · 🆓 Todos os planos
Em 1 frase: definir 2 cores principais (primária e secundária) configura toda a interface da sua plataforma — botões, links, hover, destaques — sem precisar mexer em CSS.
As 2 cores que importam
A evob simplifica: você define duas cores. O sistema deriva o resto automaticamente (tons mais claros, mais escuros, hover, focus).
Cor primária
Onde aparece:- Botões CTA (Comprar, Matricular, Continuar)
- Estados ativos (aba selecionada, item de menu atual)
- Barra de progresso (curso, módulo, aula)
- Badges de destaque
- Cor forte da marca (ex: roxo Nubank `#5B17C0`, vermelho Coca `#F40009`, azul AmEx `#016FD0`)
- Contraste suficiente com branco (≥ 4.5:1)
- Não usar tom muito claro (botão fica invisível)
Cor secundária
Onde aparece:- Links em texto
- Hover de itens
- Bordas ativas
- Detalhes secundários
- Pode ser a mesma cor primária (mais simples)
- Ou um tom análogo (ex: primária roxo `#5B17C0`, secundária violeta `#7C3AED`)
💡 Comece com 1 cor só. Se sua marca tem só uma cor forte, use ela em ambas. Adicionar segunda cor é refino, não pré-requisito.
Configurar
- Plataforma > Marca > Cores
- Clique no campo Cor primária → cole o hex (ex: `#5B17C0`)
- Faça o mesmo na Cor secundária
- Clique em Pré-visualizar para ver em todas as telas
- Salve
💡 Dica: o picker da evob aceita HEX (`#5B17C0`), RGB (`91, 23, 192`) ou nome (`purple`). HEX é o mais usado.
Pré-visualização — onde ver o resultado
A tela de preview mostra simultaneamente:
- Vitrine pública
- Página de login
- Header do AVA
- Botão "Comprar" no checkout
- Modal de matrícula
- Email transacional (botão CTA)
Mude a cor e veja todos os contextos atualizando ao vivo.
Acessibilidade — contraste mínimo
A WCAG (padrão internacional de acessibilidade) define:
| Tipo de uso | Contraste mínimo | |---|---| | Texto pequeno (< 18px) | 4.5:1 | | Texto grande (≥ 18px ou bold) | 3:1 | | Componentes UI (botões, ícones) | 3:1 |
Use WebAIM Contrast Checker para conferir antes de subir.
💡 Por que importa? ~5% da população tem alguma dificuldade visual. Contraste baixo significa pessoas literalmente não conseguem usar o seu produto. E o Google rebaixa SEO de sites com baixa acessibilidade.
Cores que funcionam bem
Exemplos testados:
| Marca-conceito | Hex primária | Por que funciona | |---|---|---| | Roxo escuro | `#5B17C0` | Contraste 7.5:1 com branco; sofisticado | | Azul corporativo | `#1E40AF` | Contraste 9.2:1; confiável | | Verde escuro | `#15803D` | Contraste 6.1:1; saúde, sustentabilidade | | Laranja queimado | `#C2410C` | Contraste 5.0:1; energia, ação | | Preto/grafite | `#27272A` | Contraste 14:1; minimalista, premium | | Magenta | `#BE185D` | Contraste 7.7:1; criativo, ousado |
Cores que não funcionam
Evite:
| Hex | Problema | |---|---| | `#FFFF00` (amarelo puro) | Contraste com branco 1.07:1 (ilegível) | | `#00FFFF` (ciano puro) | Contraste 1.25:1 | | `#FFC0CB` (rosa claro) | Contraste 1.6:1 | | `#FAFAFA` (cinza claríssimo) | Praticamente invisível | | `#FF0000` puro | Contraste OK, mas muito agressivo (vermelho associado a erro) |
💡 Regra prática: se você precisa apertar os olhos para ler texto branco em cima da cor, ela não serve para botão CTA.
Cores específicas do checkout
Algumas cores são fixas — você não troca:
- Verde de sucesso (`#10B981`) — confirmação de compra, certificado emitido
- Vermelho de erro (`#EF4444`) — pagamento recusado, validação falhou
- Amarelo de aviso (`#F59E0B`) — pendências, alertas
Isso é proposital: alunos reconhecem essas cores como "padrão" em qualquer site, o que reduz erro.
Multi-loja: cores por loja
Cada loja pode ter cor própria diferente da plataforma:
- Plataforma: roxo `#5B17C0`
- Loja A (escola corporativa): azul `#1E40AF`
- Loja B (escola criativa): magenta `#BE185D`
Configure em Loja > Configurações > Cores.
💡 Vantagem: alunos da Loja A não veem a marca da Loja B. Cada uma tem sua identidade.
Boas práticas
✅ Faça
- Comece com cor primária forte e cor secundária igual ou análoga
- Teste em todos os contextos antes de divulgar
- Confira contraste com white text e black text
- Documente sua paleta (Figma, Notion) para usar no Marketing também
❌ Não faça
- Mudar a cor toda semana (seu aluno se confunde)
- Usar cor diferente em vitrine vs AVA (parece site diferente)
- Cores neon ou gradientes pesados (cansam visualmente)
- Cores que conflitam com cores de erro/sucesso/aviso (ex: usar verde como primária; aluno confunde botão com "sucesso")
Exportando do Figma / Adobe
Se sua marca tem brand guideline:
- Abra o documento (Figma, Adobe XD, InDesign)
- Procure pela cor primária ou brand color
- Copie o HEX (geralmente já está na anotação)
- Cole na evob
Se a marca usa CMYK (impressão), converta para RGB/HEX:
- Use colorsupplyyy.com ou conversor do Figma
- Tom CMYK pode ficar levemente diferente em RGB — escolha a versão RGB que mais se aproxima
Erros comuns
"Botão fica invisível"
Cor primária muito clara. Use cor com contraste ≥ 4.5:1 com branco.
"Texto do botão fica ilegível"
A evob escolhe automaticamente entre texto branco/preto baseado no contraste da cor primária. Se ainda ficar ilegível, sua cor está num "vale" de contraste — ajuste para tom mais escuro ou mais claro.
"Hover não aparece"
A cor de hover é derivada da primária (10-15% mais escura). Se a primária é muito escura, o hover quase não muda. Use cor primária com brilho médio.
"Email transacional não usa minha cor"
Alguns clientes de email (Outlook antigo) ignoram CSS custom. A evob tenta inline, mas em casos extremos pode cair para preto/cinza neutro.
"Cor parece diferente no celular"
Telas têm calibragens diferentes. Sempre teste em iPhone E Android antes de publicar.
Próximos passos
- 📖 Tipografia personalizada (em produção)
- 📖 Acessibilidade: contraste e legibilidade (em produção)
- 📖 Pré-visualizar mudanças (em produção)
Foi útil este artigo? 👍 👎 Falar com CS (em produção) · Pergunte ao Vob 🤖 (em produção) Última atualização: 2026-05-01