A paleta de cores deste site foi inspirada em imagens da revista Akira. Quando procurava um tema urbano, me deparei com imagens de camadas de cores intricadas, que passam a ideia de profundidade e, ao mesmo tempo, destaque no ponto focal. Perceba que as cores frias ficam ao fundo e as vivas no destaque, criando um equilíbrio visual atraente e dinâmico.
No WordPress, podemos adicionar nossas cores em Global Colors, que podem ser acessadas de forma rápida ao definir as cores do Tema.
Costumo adicionar minhas cores no arquivo Global.css do Tema, o que é especialmente útil quando estou editando HTML pelo plugin Elementor, vinculando as cores por meio de variáveis globais.
CSS Global
Declare suas cores globalmente no CSS conforme o exemplo abaixo:
|
1 2 3 4 5 6 7 8 9 10 11 |
:root{ --A1:#ffffff; --A2:#e9d1bf; --A3:#ceb69c; --A4:#8d6969; --I1:#EBD3F8; --I2:#C8A1E0; --I3:#AD49E1; --I4:#7A1CAC; } |
}
Fazendo uso das variáveis globais no CSS de cada Pagina HTML:
|
1 |
.subtitulo{<br /> background-color: var(--I4)}; |
Veja mais no site do Maujor.com
No React e Next.js, também existe um Global.css e podemos acessar as cores da mesma forma ao criar páginas e componentes. Essa prática simplifica a manutenção e a consistência visual no projeto.
Sentimento transmitido
Na imagem acima, as cores nos transmitem frescor.
Tons de vermelho e laranja, por outro lado, transmitem muita energia e força.
Portanto, as cores evocam emoções, e, se pretendemos compreender as sensações transmitidas por nossa paleta, devemos estudar a Psicologia das Cores. Isso tem relação direta com Marketing e como engajamos nosso público.
Agora, conhecendo o seu público-alvo, crie um tema e uma paleta de cores adequados às expectativas e preferências dele, garantindo assim um impacto positivo e maior conexão.
As adições reforçam a relação entre as cores e o impacto emocional, destacando também sua importância em estratégias de design e marketing.