Como Escolher as Cores de um Site Empresarial

Se você toca uma equipe de telhados, uma empresa de ar-condicionado, um estúdio de massagem ou qualquer negócio local, provavelmente já ficou olhando para um seletor de cores e travou. São milhões de tons, cada guia diz uma coisa diferente, e você só quer um site que pareça profissional e faça o telefone tocar. Este guia mostra como escolher as cores de um site empresarial usando um conjunto pequeno de regras que você aplica em uma tarde, mesmo que nunca tenha aberto uma ferramenta de design na vida.

O objetivo aqui não é uma captura de tela bonita. O objetivo é um site em que um estranho confia nos primeiros segundos, que ele consegue ler sem apertar os olhos e sobre o qual ele consegue agir. A cor faz boa parte desse trabalho silencioso. Estudos citados em vários blogs de design sugerem que as pessoas formam a primeira impressão de um site em menos de um segundo, e grande parte dessa impressão é cor e contraste antes de qualquer um ler uma palavra.

Comece com três cores, não com trinta

O erro mais comum dos donos de pequenos negócios é escolher cores demais. Uma paleta carregada parece amadora e puxa o olhar para tudo ao mesmo tempo. A solução é uma estrutura simples que designers profissionais usam, muitas vezes chamada de regra 60-30-10.

Uma cor dominante para cerca de 60 por cento da página. Costuma ser um fundo claro e calmo, como branco, quase branco ou um cinza bem suave. Ela ocupa a maior parte da área.
Uma cor secundária para cerca de 30 por cento. É a sua cor de marca principal, usada em cabeçalhos, fundos de seção e blocos maiores.
Uma cor de destaque para cerca de 10 por cento. É a barulhenta, reservada para botões e links em que você quer que as pessoas cliquem.

Pense como se estivesse se vestindo. Os 60 por cento são a sua camisa e a sua calça, os 30 por cento são o seu paletó, e os 10 por cento são o cinto ou o relógio que fecham o visual. Se tudo é barulhento, nada se destaca. A cor de destaque tem uma função em um site empresarial: tornar o botão de "Ligar Agora" ou "Pedir Orçamento" impossível de perder.

Se você não lembrar de mais nada deste artigo, lembre disto. Escolha um neutro dominante, uma cor de marca e uma cor de destaque. Você pode adicionar um quarto tom de apoio depois, mas três já é uma paleta completa e funcional.

Deixe a psicologia das cores guiar o clima, não conduzir o show

As cores carregam associações emocionais aproximadas. Não são ciência exata, e mudam conforme a cultura, mas são um ponto de partida útil quando você está escolhendo uma direção para o seu negócio.

Azul passa a ideia de confiável, calmo e profissional. É por isso que bancos, encanadores e consultórios médicos se apoiam nele. Para serviços residenciais, o azul sinaliza "essa gente vai aparecer e fazer o trabalho direito".
Verde sugere saúde, crescimento, segurança e dinheiro. Combina com paisagistas, estúdios de bem-estar, serviços de limpeza e qualquer coisa com pegada ecológica.
Laranja e amarelo transmitem energia, simpatia e urgência. São ótimas cores de destaque para botões porque chamam a atenção, mas podem parecer baratas se usadas na página inteira.
Vermelho é ousado e urgente. Funciona para restauração, serviços de emergência e qualquer coisa em que a velocidade importa, mas também pode assustar, então use em pequenas doses.
Preto, grafite e azul-marinho profundo passam a ideia de premium e sério. Servem para empreiteiros de alto padrão, escritórios de advocacia e marcas de bem-estar de luxo.
Roxo tende ao criativo e ao calmo, o que combina com salões, spas e serviços de beleza.

Aqui vai a parte que a maioria dos guias pula. Não escolha uma cor só porque um gráfico diz que ela significa "confiança". Escolha uma cor que combine com o que os seus clientes já esperam do seu ofício, e depois use com consistência. Um telhadista pintado da cabeça aos pés de lavanda suave vai confundir as pessoas, não importa o que o gráfico de psicologia diga. Combine o clima com o dinheiro. Se os seus melhores clientes são donos de casa te contratando para um trabalho sério e caro, um azul-marinho firme ou um verde-floresta quase sempre vão superar um tom pastel da moda.

Contraste é a regra que você não pode pular

É aqui que a maioria dos sites de pequenos negócios falha em silêncio, e onde você pode vencer concorrentes quase sem esforço. Contraste é a diferença de claridade entre o seu texto e o fundo atrás dele. Baixo contraste, como texto cinza sobre fundo branco ou texto branco sobre um botão azul-claro, é difícil de ler para todo mundo e impossível para muitos visitantes mais velhos ou com baixa visão. Os seus clientes de serviços residenciais tendem a ser mais velhos e muitas vezes navegam pelo celular sob sol forte. Se eles não conseguem ler o seu telefone, você perde o trabalho.

Existe um padrão de verdade para isso. As Diretrizes de Acessibilidade para Conteúdo Web recomendam uma taxa de contraste de pelo menos 4,5 para 1 entre o texto normal e o seu fundo. Você não precisa fazer a conta na mão. Cole as suas duas cores em uma ferramenta gratuita como o WebAIM Contrast Checker e ele diz passou ou reprovou na hora.

Algumas regras simples que te mantêm seguro:

O texto do corpo deve ser bem escuro sobre um fundo bem claro, ou bem claro sobre um fundo bem escuro. Cinza escuro sobre branco está ótimo. Cinza médio sobre branco não está.
Nunca coloque texto sobre uma foto carregada sem uma camada sólida ou semissólida por trás.
A cor do seu botão de destaque precisa de contraste suficiente para o rótulo do botão ser fácil de ler. Um botão brilhante com texto claro reprova com frequência.

Se um visitante tem que apertar os olhos, se inclinar ou virar a tela para ler a sua oferta, a escolha de cor já te custou a ligação.

Passar no contraste não é sobre agradar uma regra. É sobre o cliente de 68 anos do telhadista conseguir ler o botão de orçamento na primeira tentativa.

Como escolher as cores de um site empresarial em cinco passos

Aqui está todo o fluxo, do começo ao fim, sem jargão de design.

Escolha o seu neutro dominante. Prefira branco ou um quase branco suave para a maior parte da página. É o padrão seguro e limpo, e faz todo o resto saltar.
Escolha a sua cor de marca. Escolha uma cor que combine com o seu ofício e, se você já tem um logo ou adesivagem no carro, que combine com eles. Consistência entre o seu carro, os seus cartões de visita e o seu site constrói reconhecimento.
Escolha a sua cor de destaque. Escolha uma cor de alta energia que contraste bem com a sua cor de marca, e use só em botões e links importantes. Laranja, verde vivo e amarelo quente funcionam bem como destaque sobre azul ou azul-marinho.
Confira o contraste de cada par de texto e fundo. Passe todos por um verificador de contraste gratuito e conserte o que reprovar.
Teste no mundo real. Olhe o site no seu próprio celular, ao ar livre, e pergunte a duas pessoas que não são da sua família se o botão principal é óbvio e se o texto é fácil de ler.

É isso. Você não precisa de um diploma em cores. Você precisa de disciplina para manter a paleta pequena e o contraste alto.

Combine a sua paleta com o seu ofício

Guias genéricos de cor falam de marcas de forma abstrata. Você toca um tipo específico de negócio, então aqui vão pontos de partida concretos que você pode adaptar.

Telhados e construção em geral: azul-marinho profundo ou grafite como cor de marca, fundo branco, um laranja quente ou amarelo-segurança de destaque para os botões de orçamento. Passa a ideia de robusto e honesto.
Ar-condicionado e encanamento: uma cor de marca em azul limpo combinada com um destaque vermelho ou laranja. O par azul-vermelho também remete a quente e frio, o que os clientes leem na hora.
Restauração e serviços de emergência: uma base forte e séria como grafite ou azul profundo, com um destaque vermelho que sinaliza urgência e resposta rápida.
Paisagismo e cuidado de jardim: verde-floresta ou verde-oliva como cor de marca, fundo creme ou branco, e um destaque amarelo ensolarado.
Bem-estar, massagem e spa: verde-sálvia suave, verde-azulado apagado ou roxo empoeirado com bastante espaço em branco e um destaque delicado. A calma é o produto, então a paleta deve parecer uma respiração profunda.
Serviços de limpeza: azuis e verdes claros e frescos que sugerem brilho e higiene, mantidos leves e arejados.

Adapte, não copie. A ideia é partir de uma direção que combine com a expectativa do seu cliente, em vez de uma amostra em branco.

Erros comuns de cor que custam ligações aos negócios locais

Mesmo com uma boa paleta, pequenos erros se acumulam. Fique atento a estes.

Usar a sua cor de marca no texto do corpo. Texto de parágrafo colorido quase sempre reprova no contraste e cansa a vista. Mantenha textos longos em quase preto.
Deixar cada botão de uma cor. Se três botões competem, nenhum vence. Uma cor de destaque para a ação principal, em todo lugar.
Copiar as cores exatas de uma grande marca nacional. A paleta deles foi feita para o mercado deles, não para o seu, e pode fazer você parecer uma imitação.
Correr atrás de tendências. Uma cor que parece legal este ano pode datar o seu site rápido. Cores firmes e adequadas ao ofício envelhecem melhor e custam menos para manter.
Esquecer da tela do celular. A maioria das buscas locais acontece no celular. Cores podem parecer diferentes em uma tela pequena e brilhante, então confira sempre lá.
Ignorar os estados de hover e de link visitado. Links e botões devem reagir visivelmente ao serem tocados ou passados por cima para as pessoas saberem que o site está funcionando.

Onde conseguir cores e testá-las de graça

Você não precisa de software pago. Algumas ferramentas gratuitas cobrem tudo neste guia.

Coolors e Adobe Color ajudam você a montar e visualizar uma paleta e a encontrar cores que combinam.
O WebAIM Contrast Checker confirma que o seu texto é legível e atende ao padrão de acessibilidade.
O seu próprio celular, na mão ao ar livre à luz do dia, é o teste mais honesto que você tem. Se lê com clareza ali, lê com clareza em qualquer lugar.

Salve as suas cores finais como uma lista curta de códigos exatos, os valores hexadecimais de seis caracteres, para usar sempre os mesmos no seu site, nas suas notas e nos seus perfis sociais. É essa repetição que transforma uma cor em uma marca.

Quando você prefere não escolher nada disso

Alguns donos curtem isso. Muitos só querem um site pronto que já pareça certo. É aqui que uma ferramenta como a Saynovo ajuda. Ela lê o que o seu negócio já é e aplica uma paleta de cores combinada com o seu ofício, então você começa de um ponto de partida profissional em vez de uma roda de cores vazia. Se um tom parecer errado, é só pedir em palavras simples e o site se ajusta, o que mantém a disciplina da paleta pequena e do contraste forte sem você gerenciar códigos hexadecimais na mão. É um caminho entre vários, e os princípios deste artigo valem não importa com o que você construa.

A versão curta

Aprender a escolher as cores de um site empresarial se resume a um punhado de hábitos duradouros. Mantenha a paleta em três ou quatro cores. Use um neutro claro na maior parte da página, uma cor de marca que combine com o seu ofício e um destaque barulhento reservado para os botões que te dão dinheiro. Confira se cada pedaço de texto passa o padrão de contraste de 4,5 para 1, depois teste tudo em um celular de verdade sob a luz do dia de verdade. Faça isso e o seu site vai parecer mais profissional do que o da maioria dos seus concorrentes locais, e vai cumprir o trabalho silencioso de transformar um estranho em uma ligação.