Cor primária — impacto na interface
Cor primária da evob impacta botões, links e destaques em toda a interface — escolha com contraste.
O que a cor primária controla
A cor primária é aplicada automaticamente em:
- Botões de ação principal (ex: "Comprar", "Salvar", "Publicar")
- Links clicáveis e textos de destaque
- Barra de progresso do aluno no AVA
- Indicadores de status e badges
- Bordas e destaques de elementos selecionados
Uma mudança na cor primária afeta toda a interface — vitrine, AVA e painel admin.
Como configurar
Plataforma > Configurações > Identidade visual > Cor primáriaInsira o código hexadecimal da cor (ex: `#2563EB`). A mudança entra em vigor imediatamente — use o preview para avaliar antes de salvar.
Critérios para escolher a cor primária
1. Contraste com o fundo branco
A maioria das interfaces usa fundo branco. A cor primária precisa ter contraste suficiente para ser legível:
| Tipo de elemento | Contraste mínimo (WCAG AA) | |---|---| | Texto pequeno (< 18 px) | 4,5:1 | | Texto grande (≥ 18 px) | 3:1 | | Botões e ícones | 3:1 |
Teste o contraste em contrast-ratio.com ou no plugin Contrast do Figma.
2. Legibilidade do texto branco sobre a cor
Botões usam texto branco sobre a cor primária. Cores muito claras (amarelos, laranjas claros) ficam ilegíveis com texto branco. Para esses casos, use uma versão mais escura da cor ou opte por texto preto via configuração avançada.
3. Consistência com a identidade da marca
A cor primária deve ser a cor de destaque principal da marca — geralmente a mesma usada no logotipo, na paleta do site institucional e nos materiais de marketing.
Cores que costumam funcionar bem
| Cor | Funciona bem? | Observação | |---|---|---| | Azuis escuros (#1A56DB, #1D4ED8) | ✅ Sim | Alto contraste, universalmente legíveis | | Verdes escuros (#16A34A, #15803D) | ✅ Sim | Boa legibilidade | | Vermelhos (#DC2626, #B91C1C) | ✅ Sim | Usar com cuidado — associado a erro | | Roxos (#7C3AED, #6D28D9) | ✅ Sim | Bom contraste, moderno | | Amarelos (#EAB308, #CA8A04) | ⚠️ Parcial | Difícil legibilidade com texto branco | | Laranjas claros (#FB923C) | ⚠️ Parcial | Verificar contraste — pode ser insuficiente | | Cinzas claros (#D1D5DB) | ❌ Não | Contraste insuficiente |
Boas práticas
✅ Faça
- Teste o contraste antes de salvar — use ferramentas online ou o DevTools do Chrome (Accessibility > Contrast ratio)
- Use a mesma cor do logotipo para consistência — a maioria das marcas já tem uma cor principal definida
- Peça feedback visual a alguém do time antes de publicar — cores parecem diferentes em monitores com calibrações distintas
❌ Não faça
- Escolher uma cor muito viva sem testar em um monitor comum — monitores calibrados para design mostram cores mais saturadas do que o monitor médio
- Usar a cor primária para elementos de erro (vermelho intenso) — reserve vermelho para mensagens de erro do sistema, não como identidade principal
- Mudar a cor com frequência — alunos e admins constroem memória visual da interface
Erros comuns
"Mudei a cor primária mas os botões ficaram ilegíveis"
A cor escolhida provavelmente tem baixo contraste com o texto branco dos botões. Escureça a cor em 20–30% e teste novamente. Uma ferramenta como coolors.co permite ajustar o brilho mantendo o tom.
"Quero cores diferentes por loja"
A cor primária da plataforma é o padrão global. Cada loja pode ter sua própria cor configurada em Loja > Aparência > Cor primária — ela sobrescreve a da plataforma para aquela loja específica.
"O preview da cor parece certo mas a loja real ficou diferente"
Diferentes navegadores e sistemas operacionais podem renderizar as cores com pequenas variações. Para a experiência mais próxima do real, use o Google Chrome no modo padrão (sem calibração de cor) para avaliar o resultado final.
"Posso usar gradiente como cor primária?"
Não — a evob aceita apenas cores sólidas (hex). Se sua marca usa gradiente, escolha a cor dominante do gradiente como cor primária.
Próximos passos
- 📖 Paleta de cores — guia completo
- 📖 Acessibilidade e contraste
- 📖 Preview de identidade visual
- 📖 Configurar logos
Foi útil este artigo? 👍 👎 Falar com CS (em produção) · Pergunte ao Vob 🤖 (em produção) Última atualização: 2026-05-06