7 dicas de como escolher as cores do seu site para conquistar o seu público

Como escolher as cores para o seu site

Se você não sabe como escolher as cores do seu site, eu preciso te dizer que existem grandes chances de você estar perdendo vendas agora mesmo…

Isso porque, até 90% dos julgamentos rápidos feitos sobre os produtos podem ser baseados apenas em cores.

Frequentemente eu falo aqui nos artigos do blog do Klickpages a respeito da estrutura ideal da sua página na internet.

Eu sempre chamo a sua atenção para a importância de uma headline irresistível, uma copy que envolve as suas leads e uma CTA que seja impossível de ignorar.

Mas nada disso vai adiantar se você não tiver escolhido as cores certas na hora de criar a sua página e colocá-la no ar.

Pensa comigo…

Do que adianta se o título e a copy da sua página estão impecáveis se o botão de CTA da sua página está em uma cor que dificulta a leitura, por exemplo? 

O visitante não vai entender a ação que ele deve tomar e, provavelmente, vai abandonar o seu site.

Agora imagina isso na sua página de vendas… 

Pode parecer um mero detalhe, mas sem as cores certas você pode afundar o faturamento do seu negócio.

Mas pode ficar tranquilo que eu sei exatamente como te ajudar a resolver esse problema.

Nas próximas linhas eu vou te mostrar:

  • por que você deve se importar com as cores do seu site;
  • 7 dicas práticas que vão te ajudar a hora da escolha
  • 5 exemplos que vão te inspirar. 

Tudo o que você precisa fazer é continuar lendo esse artigo aqui até o final. 

Vamos? 

Por que você deve se preocupar com as cores do seu site?

Você pode até não saber disso ainda, mas mesmo que de forma inconsciente, as cores influenciam diretamente nos hábitos de consumo. 

Em linhas gerais, as pessoas compram ou deixam de comprar um produto ou serviço justamente pela cor. 

Para ser mais exato, de acordo com um estudo divulgado pela Quicksprout, a cor representa 85% da razão pela qual você compra um produto específico.

Isso porque as cores têm o poder de despertar sensações na mente das pessoas. Quer um exemplo? 

Mesmo que você não seja um grande fã de animações, acredito que você conheça o filme Divertida Mente da Disney. 

Na trama, cada uma das emoções da personagem Riley são representadas por cores que definem a sua essência

Dá só uma olhada: 

Esse é um ótimo exemplo de como as cores funcionam porque, além de deixar claro alguns de seus significados, a trama dá personalidade para cada uma delas.

Pensando nisso… Você não pode escolher as cores do seu site apenas porque acha ela bonita, você deve levar em consideração as emoções elas podem despertar no seu público. 

Para te ajudar nessa escolha, eu separei aqui uma lista com… 

7 dicas de como escolher as cores do seu site

Como eu te falei agora pouco, as cores têm um papel fundamental e não podem ser escolhidas por acaso, afinal de contas estamos falando do seu site. 

Nas próximas linhas, você vai encontrar uma lista com 7 dicas que vão te ajudar na hora de realizar essa escolha. 

Para começar… 

1. Estabeleça a identidade da sua marca

Antes mesmo de pensar nas cores do seu site, o primeiro passo é estabelecer a identidade da sua marca. 

E quando eu digo identidade, eu me refiro a isso aqui:

O Nubank é um grande exemplo de como trabalhar a identidade da sua marca utilizando as cores.

O banco se apropriou da cor de uma forma que é praticamente impossível olhar para o roxo e não pensar imediatamente na marca. 

E você pode fazer exatamente a mesma coisa, desde que escolha as cores certas para representar o seu negócio. 

Então, antes mesmo de se sentar na frente do seu computador para criar a sua página, o primeiro passo é tirar um tempo para pensar e entender a essência do seu negócio.  

Depois de escolher quais cores vão compor a sua marca, você só precisa replicá-las na sua página de uma forma estratégica. 

O que nos leva ao próximo tópico: 

2. Explore os significados das cores

Como eu te disse antes, as cores têm significados e antes de definir quais usar no seu site, você deve explorar o que cada uma delas quer dizer e quais emoções elas podem despertar no seu público.

É aqui que a psicologia das cores entra em ação! 

Essa é uma área da psicologia que analisa e define os efeitos que cada cor gera nas pessoas como mudanças de humor, o despertar de sentimentos e desejos, entre outras possibilidades. 

Para entender melhor sobre esse tema, eu separei aqui um artigo do Blog do KP que vai te explicar mais a fundo como a psicologia das cores funciona, o significado e algumas delas e alguns exemplos práticos.

Agora, se você é do time das pessoas que adora um conteúdo em áudio consumir enquanto está no carro, na academia ou realizando as atividades de casa…

Vai gostar de saber que já abordamos esse tema lá no podcast do Klickpages. Para conferir é só clicar no player abaixo 👇: 

3. Escolha quantas cores você vai usar 

Depois de entender o significado das cores e quais emoções elas podem despertar no seu público, chegou a hora de escolher a quantidade de cores que vai compor a paleta do seu site. 

E para isso, existe uma fórmula que pode te ajudar: a regra 60-30-10.

Essa regrinha é utilizada para criar uma harmonia entre as cores que você vai utilizar na sua página.

Funciona assim: 

  • 60% de uma cor dominante;
  • 30% de uma cor secundária;
  • 10% de uma cor de destaque.

De forma prática, isso quer dizer que a cor primária corresponde a aproximadamente 60% do seu site, a cor secundária a 30% e os 10% restantes correspondem ao acabamento. 

Quer um exemplo?

Dá só uma olhada no site do banco Neon:

Você pode notar que a cor azul é predominante na página, seguida pelo branco e a cor amarela foi utilizada apenas no acabamento e nos botões de call to action.

4. Escolha sua cor primária

A cor primária é aquela que está diretamente associada a sua marca. Pense no exemplo utilizado no tópico anterior… O Neon é um banco digital e a cor escolhida para a marca foi o azul.

Por se tratar de uma cor que é frequentemente associada à tecnologia, o azul funciona bem na marca e o banco consegue se comunicar diretamente com o público desejado.

No site deles, você consegue notar que além da predominância dessa cor, existem algumas variações dela na imagem da tela do celular e na thumbnail do vídeo da página, por exemplo. 

5. Escolha suas cores secundárias

Depois de escolher a sua cor primária, você deve escolher entre duas e quatro cores que vão complementar a cor principal e que podem aparecer nos detalhes do seu site, no acabamento e nos botões de CTA.

As cores secundárias do seu site devem ser pensadas para manter uma harmonia nas informações da sua página. 

Para te ajudar nessa escolha, uma ótima prática é tirar alguns minutinhos para checar o círculo cromático para entender quais variações podem funcionar melhor. 

A escolha das cores secundárias pode seguir três direções diferentes:

  • cores análogas: são variações aproximadas de sua cor primária;
  • cores monocromáticas: são tons e nuances que podem fortalecer e realçar a sua cor principal;
  • cores contrastantes: são cores complementares (colocadas uma em frente à outra no círculo cromático) ou uma seleção de tons variantes da cor primária.

6. Realize testes

Depois de escolher as cores da sua marca e aplicá-las na construção do seu site, o próximo passo é realizar testes para ter certeza de que cada uma delas está atingindo o objetivo que você deseja. 

Para isso, você pode criar páginas diferentes com variações de cores e realizar um teste A/B e acompanhar os resultados e entender qual das versões converte melhor, por exemplo. 

7. Utilize ferramentas

Uma outra forma de deixar esse processo um pouco mais prático é utilizando ferramentas que te ajude na hora de escolher as cores do seu site, por exemplo:

5 exemplos que vão te inspirar

Agora que você já conferiu uma lista de dicas que vão te ajudar na hora de escolher as cores do seu site, eu separei aqui 5 exemplos de marcas que fazem um bom uso da psicologia das cores em suas páginas e que vão te inspirar.  

1. Dell 

A Dell utiliza uma logo onde o nome da marca aparece em letras azuis aplicado em um fundo branco. 

No site da marca o branco é usado como cor predominante, e o azul é utilizado em alguns dos CTAs presentes na página, além do preto que é aplicado em alguns pontos para dar contraste com o fundo. 

2. Nubank

Quando eu penso no Nubank, a primeira coisa que vem na minha mente é a cor roxa. 

Além do uso da cor no site, nas redes sociais e claro, no cartão do banco, o Nubank trabalha todo o seu branding em torno do roxo, como eu te falei antes. 

Na imagem, você pode ver que além da presença dessa cor, o preto e o branco também são utilizados em alguns campos do site para dar contraste e facilitar a leitura.  

3. Uber

Assim como a Nubank, a identidade visual da Uber pode ser percebida desde o ícone do aplicativo até o site da marca.

O uso das cores preta e branca além de harmonizarem entre si, criam uma sensação de exclusividade, algo que ficou marcado principalmente nos primeiros anos de atuação da Uber no Brasil. 

4. Netflix

No site da Netflix, o vermelho, que já é a cor característica da marca, vem sempre aplicada em um fundo preto e o branco é utilizado em alguns campos específicos.

5. Ifood

No site do iFood, o vermelho presente na marca também é utilizado nos botões de CTA, nas imagens e nas ilustrações. 

O fundo é predominantemente branco e os textos do site variam entre preto e cinza. 

Até aqui eu te contei o que você precisava saber na hora de escolher as cores para o seu site. Agora, eu quero te explicar como colocar esse site no ar de uma forma prática e rápida.

Como o Klickpages pode te ajudar?

Depois de escolher as cores do seu site, chegou a hora de colocar a mão na massa, tirar a sua ideia do papel e publicar a sua página na internet.

Muita gente ainda acredita que para ter um site publicado, é necessário virar noites digitando código por código… Mas essa ideia está muito distante da realidade.

Hoje em dia é possível criar um site e publicá-lo em menos de uma hora. 

Isso, desde de que você confie na ferramenta certa para esse serviço.

E é aí que o Klickpages entra em cena. 

Basta escolher um de nossos modelos prontos e já testados no mercado, editar as cores, textos e adicionar imagens para deixar a página com a cara do seu negócio e clicar em publicar.

Para saber mais sobre o Klickpages e como ele pode ajudar o seu negócio, é só clicar no botão abaixo 👇:

Mão na massa

Nesse artigo eu te contei o porquê você deve se preocupar na hora de escolher as cores do seu site, te dei 7 dicas de como fazer isso e ainda te dei 5 exemplos que vão te inspirar. 

Agora é a sua vez de colocar essas dicas em prática criando o seu próprio site de uma forma rápida e prática. Para isso, não deixe de contar com a ajuda do Klickpages. 😉

Gostou desse artigo? Me conta aqui nos comentários. 👇

Ah, e não se esqueça de assinar a newsletter do KP para receber mais conteúdos como esse semanalmente na sua caixa de entrada. É só clicar aqui. 

COMPARTILHE NAS REDES SOCIAIS!

Sobre o Autor

Olá! Me chamo João Pedro, mas todo mundo me chama de João. Faço parte do time de conteúdo aqui do Klickpages e estou sempre buscando novos aprendizados na área de comunicação e marketing. Como todo mineiro, não dispenso um bom café e uma ótima conversa. No meu tempo livre estou sempre antenado nas novidades da cultura pop, atualizando a minha lista de séries, vendo um bom filme, ouvindo o mais novo hit do momento, rindo muito enquanto ouço os meus Podcasts favoritos ou criando alguma teoria sobre o multiverso da Marvel.