Como aplicar paletas de cores ao seu site Divi (20 exemplos!)
Publicados: 2017-08-10No tutorial Divi de hoje, vamos compartilhar algumas paletas de cores incríveis que você pode usar nos próximos sites que construir com Divi. Usar as cores certas para o seu site é uma das principais coisas que determinam a aparência geral do seu site.
Além de compartilhar algumas paletas de cores incríveis com você, também mostraremos uma maneira sólida de adicionar essas paletas de cores ao seu site. Em caso de dúvida, você sempre pode seguir estes passos básicos que o ajudarão a criar belos resultados.
Dicas Gerais
1. Decidir sobre o site escuro ou claro
Na paleta de cores que usará, sem dúvida, você terá cores claras e escuras. O contraste é obrigatório em uma paleta de cores para que o conteúdo escrito não se perca.
Agora, isso nos leva imediatamente à primeira pergunta que você deve se fazer quando quiser aplicar uma paleta de cores ao seu site; você quer criar um site de cores escuras ou claras? Só porque você escolheu uma, não significa que não possa combiná-las, mas fazer uma escolha ajuda a escolher sua paleta de cores com mais facilidade.
2. Escolha da cor
Em teoria, você mesmo pode determinar quantas cores deseja que sua paleta de cores tenha. Não existe uma maneira padrão de aplicar ou determinar paletas de cores. No entanto, para criar um bom equilíbrio de cores com Divi, recomendamos o uso de cinco cores.
Para ajudá-lo a aplicar as paletas de cores com cinco cores ao seu site, escolhemos um tipo de método que aplicaremos consistentemente ao mesmo layout ao mostrar as diferentes paletas de cores. Mas antes de mergulharmos nisso, vamos dar uma olhada nos diferentes tipos de cores que você precisa ter em sua paleta de cores se quiser seguir nosso método.
2 cores de fundo
Certifique-se de que as cores de fundo que você escolher combinam entre si. Você usará essas cores de fundo próximas umas das outras e para obter belos resultados; eles devem ter uma certa harmonia.
1 cor da fonte
A próxima coisa que você precisa escolher é a cor da fonte. Logicamente, a cor da fonte depende das cores de fundo que você escolher. Se você escolheu cores de fundo claras, certifique-se de que a cor da fonte seja escura e vice-versa.
1 hiperlink e cor CTA
A cor do hiperlink que você escolhe é uma das cores que dão vida ao seu site. Certifique-se de que essa cor se destaque das outras cores em sua paleta, pois você a usará para as frases de chamariz que incluir em seu site.
1 cor para os toques finais
Por último, mas não menos importante, você pode escolher outra cor pronta para o uso que traga cor ao seu site. Embora essa cor não seja tão importante quanto a cor do hiperlink, ela o ajudará a completar o equilíbrio de cores em seu site.
3. Certifique-se de que há contraste suficiente
Como mencionado anteriormente; é essencial fornecer contraste entre algumas das cores em sua paleta de cores. Se você estiver usando uma paleta de cores para um site, esse contraste o ajudará principalmente a tornar legível o conteúdo escrito que você compartilha. Porque; se o seu conteúdo não é fácil de ler; qual é o propósito disso afinal?
4. Encontre o equilíbrio correto do uso da cor
Existem diferentes maneiras de determinar a freqüência com que deseja usar uma determinada cor em sua paleta de cores. É necessário criar um bom equilíbrio de cores se você não quiser que eles se sintam oprimidos pelas cores que você está usando em seu site.
Certifique-se de usar as cores mais neutras em sua paleta de cores na maior parte do tempo e use as outras cores para acentuar o conteúdo que você está fornecendo.
Passo a passo: Adicionando a paleta de cores ao seu site
Na próxima parte deste post, vamos guiá-lo na aplicação de paletas de cores ao seu site. Cuidaremos das diferentes etapas que executamos ao adicionar as cores ao layout de um site. Após este passo a passo, você chegará à parte em que compartilhamos as paletas de cores. Não apenas compartilhamos as cores, mas também as usamos em um layout Divi para colocar o passo a passo em prática.
Sem mais detalhes, vamos dar uma olhada nas diferentes etapas do processo.
1. Decida como você adicionará as cores
Você pode adicionar a paleta de cores de duas maneiras:
- Adicionando todas as cores seção por seção
- Complete o seu site cor por cor
Embora você provavelmente misture esses dois métodos um com o outro, recomendamos começar completando o seu site cor por cor. Dessa forma, você não terá que copiar e colar os diferentes códigos de cores continuamente. Você copia cada cor uma vez e depois passa para a outra.
2. Adicione as cores de fundo
Depois de decidir como vai inserir as cores, você pode começar com as cores de fundo. Uma das razões pelas quais começar com as cores de fundo é uma boa ideia, é porque você verá os resultados imediatamente. Você está definindo a base das cores que usa em seu site.
Se você optou por criar um site de cores claras; comece adicionando a cor mais clara ao fundo da segunda seção e siga com a segunda cor mais clara na terceira seção.
3. Adicione a cor do texto
Depois de adicionar as cores de plano de fundo ao seu site, você pode começar a adicionar a cor do texto ao seu site. Todo o conteúdo escrito em seu site precisa ter essa cor (exceto os hiperlinks e as frases de chamariz).
4. Adicione a cor do hiperlink e CTA ao seu site
Continuando, a próxima coisa que você pode fazer é destacar os hiperlinks e as frases de chamariz no seu site. Eles chamam a atenção das pessoas e as deixam curiosas sobre o que é um link ou call to action.
Certifique-se de que todos os itens clicáveis em seu site contenham essa cor. Mantendo essa consistência, seus visitantes reconhecerão facilmente onde podem clicar para continuar sua permanência em seu site.
5. Adicione a cor do toque final
A última coisa que você precisa fazer é adicionar a cor de toque final ao site. Nos exemplos e paletas de cores que criamos, usamos essa cor de toque final em três lugares: a cor do círculo da sinopse, o texto do cabeçalho do módulo de pessoa e a barra de menu principal.
Embora a cor de toque final não seja a cor principal que você usará em seu site, ela permitirá que você traga aquele toque extra de cor de que seu site precisava. Afinal, você não quer que seu site pareça monótono ou irritantemente sério.
Paletas de cores
Agora que analisamos as etapas necessárias para aplicar a paleta de cores ao seu site, é hora de começar a explorar algumas paletas de cores incríveis. Além de mostrar o resultado do layout de exemplo que fizemos, também compartilharemos os códigos de cores que usamos para chegar a esse resultado.
1. Azulejos por dias
A primeira paleta de cores que selecionamos contém principalmente tipos de cores mais suaves (e levemente pastéis). Como escolhemos um site leve, as cores mais claras na paleta de cores ocupam a maior parte do site. As cores mais escuras em nossa paleta de cores, no entanto, certifique-se de que o site contém o equilíbrio de cores necessário.
As cores que estão sendo usadas neste exemplo são as seguintes (da esquerda para a direita):
- # EBE8E2
- # 768A95
- # B98077
- # 007193
- # E2D7D7
2. Deserto
A próxima paleta de cores da lista é chamada de Deserto. O equilíbrio de cores dessa paleta de cores se inclina ligeiramente para um site de cores mais escuras. A cor que domina neste exemplo é a cor azul. Mas também há uma cor de texto muito clara que garante que o contraste necessário esteja lá.
As cores usadas nesta paleta são as seguintes (da esquerda para a direita):
- # 507782
- # 7C8E93
- # D89C79
- # 443F3C
- # FFE8D8
3. Festival
A próxima paleta de cores não é aquela que você verá com frequência. As cores não costumam aparecer na mesma paleta de cores, mas são bastante intrigantes. Se você deseja que seu site tenha uma aparência única, esta paleta é o caminho a percorrer.
As cores que estão sendo usadas nesta paleta são (da esquerda para a direita):
- # E6EBD1
- # A59E4C
- # 544C4D
- # AF3D4B
- # CED3BC
4. Promessa Pinky
A próxima paleta de cores na linha é uma excelente opção se você deseja fazer um site com cores escuras. Tons de preto e tons de rosa são conhecidos por serem uma boa combinação. Eles dão um toque extra lúdico ao site sem parecer muito feminino. Os tons de preto garantem que a aparência do seu site ainda contenha a profundidade necessária.
As cores usadas nesta paleta são (da esquerda para a direita):
- # 33383A
- # ECC9C8
- # E2566D
- # 4F575A
- # D3D8DA
5. Santorini
Na próxima paleta, você pode notar claramente que o azul domina as outras cores. Com esta paleta de cores, você obtém imediatamente um tipo de sentimento leve e positivo. O azul é conhecido por ser uma daquelas cores que as pessoas preferem ao construir um site. É uma cor padrão que reflete profissionalismo. No entanto, os tons de azul que são usados nesta paleta de cores também apresentam um lado lúdico.
A paleta de cores que usamos neste exemplo é (da esquerda para a direita):
- # 1198EA
- # 0A5785
- # A85A4D
- # F1F5FA
- # C5DFF8
6. Prazer Roxo
A cor dominante nesta paleta de cores é obviamente o roxo. Embora muitas vezes seja percebida como uma cor deprimente, essa paleta de cores e o uso dela em um site da Web são diferentes. Quando combinada com cores mais brilhantes, a cor roxa pode fornecer resultados impressionantes.
As cores usadas nesta paleta de cores são as seguintes:
- # D7D7ED
- # 52517B
- # 737172
- #FCFCFC
- # F0F1A
7. Sutil
A próxima paleta de cores que gostaríamos de compartilhar é bastante neutra e no mesmo estilo da paleta de cores do Festival. Você não vê com tanta frequência por aí, mas parece muito limpo.
As cores usadas neste exemplo são (da esquerda para a direita):
- # DAE2D5
- # 4B7263
- # A8A461
- # 494949
- #CCCCCC
8. Corporativo
A próxima paleta de cores que queremos compartilhar é ideal para todos os tipos de sites de negócios. As cores que estão sendo utilizadas refletem uma certa positividade e jovialidade. As cores claras de fundo permitem que as cores amarelo e turquesa agreguem valor ao site.
As cores usadas nesta paleta são (da esquerda para a direita):
- # 181242
- # 4ABDAC
- #DBDBDB
- # F7B733
- #FCFCFC
9. Rosa
Quem não ama a cor rosa? A próxima paleta de cores traz um fator feminino ao seu site. As cores claras estão dominando o site, mas garantem que as cores mais escuras também sejam fortalecidas.
As cores usadas nesta paleta são (da esquerda para a direita):
- # 152038
- # DDA199
- # FF614C
- # F5F5F5
- # E2E2E2
10. Chocolate
A próxima paleta de cores que queremos colocar em destaque é Chocolate. O bom dessa paleta de cores é que as cores de fundo e de texto encontram-se na mesma categoria de cores. Isso dá espaço para as outras duas cores se distinguirem dessas cores e chamarem a atenção.
As cores usadas nesta paleta são (da esquerda para a direita):
- # FFF4E8
- # FFE2C4
- # 822317
- # 935B3B
- # 346E70
11. Sofisticado
A próxima combinação de cores é algo que você não esperaria à primeira vista. Roxo e verde amarelo não são usados frequentemente juntos, mas como você pode ver no resultado; eles combinam muito bem. Para manter o foco nessas duas cores, as cores do plano de fundo e do texto são bastante neutras.
As cores que estão sendo usadas nesta paleta são (da esquerda para a direita):
- # 88D317
- # 4F2649
- #FCFCFC
- #EFEFEF
- # 080816
12. Olivia
Olivia é uma paleta de cores que não precisa de muitas explicações. Os tipos de cores oliva e amarelo combinam muito bem. Manter as cores mais claras mais neutras permite que essas cores roubem a cena.
As cores usadas nesta paleta são (da esquerda para a direita):
- # 778E3B
- # FFD902
- # 132819
- #EFEFEF
- #FCFCFC
13. Golden Gate
Os tons suaves de bege permitem que o seu site reflita uma espécie de exclusividade. Enquanto a paleta de cores parece bastante sóbria, a cor roxa turquesa nessa paleta de cores consegue trazer o calor que o site precisa.
As cores usadas nesta paleta de cores são (da esquerda para a direita):
- # 373737
- # F3F4E8
- # ADA075
- # EDE4C9
- # A685BC
14. Capitão
Essa paleta é provavelmente a paleta de aparência mais profissional da lista. As duas cores azuis escuras desta paleta são a principal razão para isso. A cor vermelha, no entanto, faz um ótimo trabalho em quebrar o gelo e adicionar alguma diversidade ao site.
As cores usadas nesta postagem são (da esquerda para a direita):
- # 3B578E
- # DB2323
- # D7DEED
- # F7F9FF
- # 201C44
15. Ambiental
A próxima paleta de cores que gostaríamos de compartilhar é Ambiental. O nome dá a entender que o verde domina essa paleta de cores. Estas cores verdes suaves combinam perfeitamente com a cor turquesa suavizada que é fornecida nesta paleta.
As cores nesta paleta são (da esquerda para a direita):
- # C2D3DO
- # 56776A
- # 42B7A7
- # EDEFF4
- # 26423E
16. Soft Rich
Na próxima paleta, podemos ver claramente o que é uma boa combinação de bege e vermelho. Eles dão uma sensação de maturidade a qualquer tipo de site. Ao adicionar outra cor verde perceptível, a aparência do seu site também terá um pouco de juventude.
As cores nesta paleta são (da esquerda para a direita):
- # 984B43
- # 233237
- # B7A97C
- # F9F0D4
- # 527C40
17. Hipnotizante
A próxima paleta na linha é outro site de cor escura. As cores dominantes são o roxo escuro e o cinza. Porém, as cores mais claras conseguem trazer um pouco de calor ao site.
As cores nesta paleta são (da esquerda para a direita):
- # D0B6D6
- # 3CC203D
- # 898989
- # F2F2F2
- # F9AEBD
18. Menta
A paleta de cores Mint traz uma sensação de frescor ao seu site. Muito sóbrios à primeira vista, o laranja e o roxo conseguem dar um ar fresco e renascido ao site.
As cores usadas nesta paleta são (da esquerda para a direita):
- # 31190A
- # B4BCA7
- # F99A53
- # 54468E
- # E3EDE5
19. Amarelo Suave
Esta paleta de cores exclusiva contém principalmente cores quentes. Embora tenhamos uma cor escura e uma cor clara como cores de fundo, o sentimento geral se aproxima de um site de cores claras.
As cores nesta paleta são (da esquerda para a direita):
- # DDCF30
- # 437468
- # F1FFD1
- # 4A4C49
- # FCFAD9
20. Mistério
A última paleta de cores da linha é outra paleta de cor escura que você pode usar em seu site. As cores de fundo utilizadas nesta paleta são sóbrias e permitem o surgimento das outras cores mais brilhantes da paleta.
As cores nesta paleta são:
- # 131517
- # 13828A
- # 35363A
- # EEF5F7
- # AF8300
Pensamentos finais
Nesta postagem, compartilhamos algumas dicas sobre como aplicar a paleta de cores que você escolher ao seu site. Além disso, também mostramos 20 lindas paletas de cores que podem ajudá-lo a trazer elegância ao seu site. Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.
E enquanto você estiver lá, deixe-nos saber; qual dessas paletas de cores é a sua favorita?
Imagem em destaque por EDGOR_21 / shutterstock.com