Site

Como escolher as cores certas para seu site?

Você sabia que uma das características que são consideradas pelos consumidores na avaliação que fazem dos produtos, tem a ver com a cor e que ela pode determinar a sua compra ou não?

Estudos sobre a influência das cores na percepção, no comportamento e nas reações que as cores têm junto aos consumidores, já é algo conhecido pelo Marketing há bastante tempo.

A persuasão associada às cores, influencia o aumento ou diminuição do apetite, diferentes estados de humor, relaxamento ou excitação, entre outros estados mentais.

Por essas e outras razões a escolha das cores do seu site, é um fator tão relevante quanto o layout, a navegabilidade e o conteúdo nele contido. Saber escolher a paleta mais adequada aos seus propósitos, pode impactar de modo importante nos resultados que você tem – ou não – com seu site ou blog.

As cores na comunicação

Adotar determinadas cores como fator de comunicação, é algo que já se constata nas mais diversas situações do nosso quotidiano. Sem fazer uso dos tradicionais elementos comunicativos verbais – como a palavra escrita ou falada – as cores contribuem para o processo de formação de uma imagem ou conceito mental sobre o conteúdo relacionado.

Elas estão presentes nas placas e nos semáforos dos sinais de trânsito. Na sinalização dentro das indústrias. Nos painéis dos carros. Nas lojas, nas vitrines, nas embalagens, nos logos e nas marcas. Nos panfletos, folders e todo tipo de material publicitário.

O uso das cores nessas situações, não está relacionado apenas ao quão agradável é esteticamente sua utilização e combinação.

Assim, o uso do vermelho geralmente está associado a uma situação de perigo ou emergência, indicativo para parar ou interromper algo, emoção e paixão, ação e dinamismo, entre outras possibilidades.

Pense em quantas vezes você comprou algo em função de ter gostado da cor.

A cor desse produto – ou mesmo de sua embalagem – despertou algum tipo de sensação, como paz, alegria, euforia, conforto ou alguma memória afetiva e nesse caso, uma cor que em termos gerais pode ter uma significação para a maioria, para alguém em especial pode trazer uma boa ou uma má recordação.

Ou seja, o assunto é complexo e às vezes controvertido.

Por essa razão, não temos a pretensão de ser um guia definitivo sobre o tema, mas de iniciar uma reflexão sobre a importância da escolha correta das cores do seu site institucional ou outros tipos de site, para além da simples preferência que eventualmente você tem ou da combinação / harmonização com o logotipo da sua marca.

Inclusive essa questão – as cores da sua marca – é outro ponto que precede a determinação das cores do site e que pelas mesmas razões, não é nosso propósito considerar, afinal essas cores estarão intrinsecamente associadas com a identidade da marca.

Há pesquisas que indicam que o reconhecimento de uma marca – especialmente as mais populares – está intimamente associado ao reconhecimento da cor predominante.

Pense em marcas conhecidas, nos seus logos e nas cores predominantes que você distingue.

A cor é um dos primeiros elementos nesse processo, antes mesmo que qualquer texto ou imagem.

Com um site, não é diferente. Assim que os primeiros elementos começam a surgir no navegador, antes mesmo de se ler algo, as cores é que serão responsáveis pelo foco do visitante, chamando atenção para algum ponto ou reconhecimento de algo.

O significado das cores

Como mencionamos, as experiências pessoais e mesmo a personalidade das pessoas, podem influenciar na significação que as cores têm para cada indivíduo.

Porém de modo geral, devido a estudos diversos, pesquisas, testes, acredita-se que cada cor transmita em algum nível uma sensação primária e uma oposta ou complementar.

Um dos modelos mais populares a respeito, é a chamada Roda das Emoções de Plutchik, criada pelo psicólogo Robert Plutchik.

Roda das Emoções de Plutchik Segundo esse modelo, existem oito emoções básicas ou primárias, decorrentes da exposição às respectivas cores, situadas na segunda circunferência do círculo: alegria (joy / amarelo), confiança (trust / verde claro), medo (fear / verde escuro), surpresa (surprise / ciano), tristeza (sadness / azul escuro), repulsa (disgust / violeta), raiva (anger / vermelho), e expectativa (anticipation / laranja).

Há ainda a oposição ou antagonismo das emoções. Assim, a alegria aparece na posição oposta à tristeza, considerando-se o centro do círculo.

As intensidades das cores, relacionam na mesma proporção à intensidade dos sentimentos e também com a disposição no modelo. Mais próximas do centro e com cores mais intensas, estão as emoções mais intensas. Os tons mais suaves, correspondem aos sentimentos também mais suaves.

Emoções ou sentimentos que não são as primárias, são chamadas de compostas ou secundárias.

O modelo evoluiu de modo que as 8 emoções básicas relacionam-se com reações fisiológicas correspondentes, de forma que expectativa (anticipation / laranja) e surpresa (surprise / ciano), respectivamente acarretam avaliação minuciosa e desistência ou renúncia, fisiologicamente falando.

Por fim, as emoções compostas ou secundárias e que localizam-se na parte mais externa, entre as “pétalas da flor” formada, são resultantes da combinação das emoções primárias. Por exemplo, alegria e confiança, gera amor.

De modo prático, as cores costumam ser usadas conforme segue:

Vermelho

Usado em negócios relacionados com alimentação, pois tem relação com estímulo do apetite;
Relacionado com senso de urgência e perigo;
Por ser uma cor vibrante e chamar atenção, é usada para destacar promoções, liquidações, ofertas;
Tem influência sobre compulsão por compras;
Costuma ser usado para dar conotação de situações que envolvam paixão, raiva, amor, excitação, energia, poder, força, calor, velocidade, perigo, fogo, sangue, guerra, violência.

Amarelo

Geralmente associado a alertas, também é usado para indicar cautela, cuidado e atenção;
Associado à clareza e transparência da informação;
Usada para detalhar e elementos que induzem à ação (Call To Action);
Em vitrines, mostradores ou área de observação, é usada para prender a atenção;
Costuma ser associada com mensagens envolvendo conhecimento, relaxamento, otimismo, criatividade, esperança, alegria, felicidade, claridade, verão, covardia, traição, inveja, cobiça, doença, perigo.

Azul

Frequentemente usada na área de negócios / empresas, porque associa-se a produtividade e não é uma cor invasiva ou demasiadamente intensa;
Cria senso de segurança e confiança na marca;
Diminui o apetite e estimula produtividade;
Frequentemente associado a água e paz;
É associada a conceitos como ordem, fé, espiritualidade, tranquilidade, verdade , harmonia, confiança, segurança, limpeza, paz, estabilidade, tradição, limpeza, céu, água, frio, tecnologia.

Laranja

Bastante usado em situações em que é preciso chamar atenção;
Também usado para CTAs (Call To Action) do tipo “acesso imediato”;
Tal como o vermelho, influencia compradores compulsivos;
Marca amigável, alegre e confiante;
Geralmente é empregada quando se quer transmitir humor, fartura, equilíbrio, calor, energia, entusiasmo, vibração, crescimento, raridade, ampliação.

Verde

Associa-se com saúde, natureza, tranquilidade e riqueza, sendo essa última a razão de escolha de algumas marcas;
Em ambiente comercial, tem efeito relaxante / tranquilizante;
Frequentemente usado para promoção de questões ambientais, mas também de responsabilidade social;
Outras situações que envolvem o seu uso, são primavera, boa saúde, calma, esperança, natureza, meio ambiente, boa sorte, renovação, fertilidade, inexperiência, inveja, imaturidade.

Roxo / Violeta

Vinculado aos conceitos de nobreza, respeito e sabedoria;
Bastante usado na área cosmética, beleza e antienvelhecimento;
Marcas ou produtos criativos, inteligentes e originais;
Também relaciona-se com situações envolvendo erotismo, espiritualidade, pompa / luxo, realeza, poder, conhecimento, mistério, intimidade, crueldade, arrogância, luto, sensibilidade.

Rosa

É uma cor feminina, ligada à beleza, ao charme, mas também à inocência, razão pela qual é usada por meninas;
Usada para transmitir inocência, romance, jovialidade;
É destinada a públicos bem definidos e marcas sofisticadas e elegantes;
Costuma designar pureza, juventude, amor, romantismo, beleza, charme, leveza, delicadeza, feminilidade.

Marrom

Marrom é uma cor quente e forte;
Associa-se com o natural, com a terra, robustez, confiabilidade, estabilidade, amizade e natureza;
É usado na área de alimentação, associado a produtos como café e chocolate, combinado com vermelho e amarelo, mas também em negócios agrícolas, imobiliários, veterinários e finanças;
Também é adotado quando se quer transmitir materialismo, conservadorismo, simplicidade, confiabilidade, estabilidade, simplicidade, solidez, conforto, terra, casa.

Preto

Costumeiramente empregado em bens de luxo, moda, marketing e cosméticos;
Marcas modernas, mas ao mesmo tempo tradicionais e elegantes, usam o preto;
É versátil ao compor e contrastar com muitas cores;
Muitas vezes associada a estilo, elegância, autoridade, poder, formalidade, força, sofisticação, sexualidade, sobriedade, mistério, medo, infelicidade, profundidade, mal, tristeza.

Branco

Amplamente usado no simbolismo da saúde e área médica;
Também é opção popular para designar tecnologia e ciência;
Combinado com algumas cores, como preto ou dourado, traz associação com riqueza e luxo;
Branco está associado com proteção, paz, humildade, pureza, juventude, nascimento, inverno, neve, limpeza, virtude, felicidade, sinceridade, segurança, frio.

Escolha das cores para o site

Sabendo das características das cores, seus usos mais frequentes, a influência psicológica que elas têm sobre as pessoas, agora é preciso definir três aspectos – a persona a qual o site se destina, o propósito do site e a imagem de empresa / marca / produto que se quer construir.

Há naturalmente paradigmas e preconceitos que às vezes influenciam certas escolhas.

Por exemplo, um site destinado majoritariamente ao público-alvo masculino, não deve privilegiar a cor rosa. No entanto, o web designer suficientemente habilidoso e com bom senso, pode ocasionalmente e de acordo com a dose, fazer algum uso da cor.

É importante destacar, que a escolha da paleta ou conjunto de cores, deve atender a um propósito que vai além da questão meramente estética, por tudo o que já abordamos até aqui.

Estipular a paleta de cores usada no site, deve levar em consideração os seguintes aspectos:

Contraste – o contraste facilita a identificação dos elementos como ícones, fontes e outros itens em relação ao fundo em que eles aparecem;
Legibilidade – a legibilidade, está relacionada com a facilidade de leitura da fonte utilizada;
Público – diferentes cores podem ter diferentes significações para diferentes públicos. Um exemplo clássico, são os sites dos times de futebol. A cor do seu principal rival, não deve aparecer no seu site;
Quantidade de cores – cuidado com excessos e com ausência. Sites monocromáticos ou que usam apenas duas cores, tendem a ser monótonos e têm dificuldade em dar destaque ao que é necessário, da mesma forma que sites multicoloridos, em que tudo é motivo para fazer perder o foco;
Simulações – faça simulações e testes com diferentes paletas. Há ferramentas que facilitam essa escolha.

Ferramentas para trabalhar com as cores

A maior parte das pessoas, consegue distinguir cerca de 10 mil cores distintas.

Com tantas possibilidades, escolher cores pode ser um trabalho longo e permeado de dúvidas.

Recomenda-se restringir sua gama de opções usando as informações que fornecemos até aqui, usando uma cor primária como ponto de partida e os sentimentos associados que você quer para seu público e sua marca.

E há uma série de ferramentas online que podem ajudar a determinar com exatidão uma cor, qual o melhor contraste, quais as cores complementares e até mesmo paletas populares e que podem servir de base para desenvolvimento de um site que melhore a taxa de conversão e/ou reduza a de rejeição, porque você soube usar as cores adequadas:

Adobe Color – nessa ferramenta da Adobe é possível obter cores predominantes de uma imagem (logo, foto, etc), definir uma paleta a partir de uma cor, avaliar o contraste obtido entre duas cores e um gradiente com base em uma imagem fornecida;
Colour Lovers – o Colour Lovers, é uma comunidade em que os membros submetem, discutem, avaliam paletas, padrões e cores. Útil como inspiração para definição do seu próprio conjunto de cores;
Color Hunter – no Color Hunter, é possível obter uma paleta de cores a partir do fornecimento de uma URL de uma imagem ou pelo upload de uma que esteja no seu computador;
Color Combos – quer testar combinações de cores e ter sugestões a partir de uma cor principal? Essa é a principal funcionalidade do Color Combos.
0 to 255 – tem dificuldade de encontrar o tom exato e o correspondente hexadecimal? O 0to255, é simples, rápido e intuitivo.

Conclusão

Definir as cores de um site, vai muito além do gosto pessoal do seu dono. A influência que as cores têm nas pessoas, são decisivas em alguns casos e podem fazer a diferença nos resultados obtidos junto aos seus visitantes.