Cor é provavelmente a decisão de design que mais trava quem não estudou design — parece a mais "artística" de todas, a que exige "bom gosto". Na prática, montar uma paleta que funciona é mais método do que talento: um punhado de regras simples resolve a maioria dos casos.
E já que o post passado mostrou como formatar um post só com HTML e CSS no editor de texto, esse aqui usa exatamente essas técnicas pra mostrar a paleta na prática — com os retângulos de cor renderizados de verdade, não só o código hexadecimal escrito.
A paleta mínima que todo material precisa
Antes de pensar em "quantas cores lindas eu consigo usar", pensa no mínimo funcional: 1 cor de base, 1 cor de destaque, e 2 a 3 neutras pra texto e fundo. Vou usar a própria paleta deste site como exemplo — são só 5 cores, e é o que sustenta cada botão, título e fundo que você vê por aqui:
#111110#ff6b1b#f3f0e9#67635dRepara que isso já é o suficiente pra montar qualquer peça: fundo claro, texto escuro pra ler, uma cor de destaque só pra onde você quer que o olho vá primeiro. Antes de adicionar uma sexta cor, pergunte se ela está resolvendo um problema ou só "parecendo bonita".
De onde tirar a sua cor de base
Se você já tem um logo, a cor de base normalmente já está nele — não precisa inventar uma nova. Se ainda não tem, ferramentas gratuitas como Coolors e Adobe Color geram paletas inteiras a partir de uma única cor que você escolher, e já entregam o código hexadecimal de cada uma pronto pra copiar.
As 3 formas mais seguras de expandir a paleta
| Tipo | Como funciona | Quando usar |
|---|---|---|
| Monocromática | Tons mais claros e mais escuros da mesma cor de base. | Quando quer um visual clean e é difícil errar. |
| Complementar | Uma cor do lado oposto da base no círculo cromático. | Só como destaque pontual (botão, ícone) — em excesso, cansa. |
| Análoga | Cores vizinhas da base no círculo cromático. | Pra dar variedade sem perder harmonia — o meio-termo mais seguro. |
A regra 60-30-10 pra não exagerar
Um jeito simples de decidir a proporção: 60% da peça na cor neutra dominante (geralmente o fundo), 30% numa cor secundária, e só 10% na cor de destaque — reservada pra onde você realmente quer chamar atenção, tipo um botão. Quando a cor de destaque passa de 10%, ela para de "destacar" e vira só mais uma cor no meio das outras.
Testando se sua paleta tem contraste suficiente
Isso conecta direto com o ponto de contraste do post 5 erros de design que fazem seu material parecer amador: depois de escolher as cores, teste texto escuro sobre a mais clara e texto claro sobre a mais escura, e veja qual combinação lê melhor. Ferramentas gratuitas como o WebAIM Contrast Checker dão um número exato — não precisa confiar só no olho.
Bônus técnico: usando isso como variáveis de CSS
Se você for montar um site do zero (não aqui no editor do blog, mas num projeto seu com acesso ao código), vale transformar a paleta em variáveis — assim você troca a cor em um lugar só e ela atualiza em tudo:
:root {
--cor-base: #111110;
--cor-destaque: #ff6b1b;
--cor-fundo: #f3f0e9;
--cor-texto-secundario: #67635d;
}
.botao {
background: var(--cor-destaque);
color: var(--cor-base);
}Só um detalhe: isso funciona porque está dentro de uma tag <style>, num arquivo de CSS de verdade. Aqui no editor de texto do blog, como vimos no post anterior, uma tag <style> sozinha não sobrevive ao filtro de segurança — por isso os exemplos de cor deste post usam style="" em cada elemento, não variáveis centralizadas.
No fim, uma paleta boa não é a mais criativa — é a mais fácil de aplicar sem pensar toda vez. Escolhe sua base, sua cor de destaque, duas neutras, testa o contraste, e passa a reusar sempre as mesmas — em post, em proposta, em portfólio.
0 Comentários