Quando alguém chega pela primeira vez em seu website, a cor desempenha um papel significativo no que pensa. Entre 62-90% da impressão inicial dos consumidores é baseada apenas nas escolhas de cores, dizem as pesquisas.
Escolher cores que combinem com sua marca – e o que você quer que seus consumidores pensem sobre sua empresa e produtos – pode ser uma poderosa ferramenta de branding e marketing.
Neste artigo, cobriremos mais de 25 esquemas fantásticos de cores para Landing Page, comércio eletrônico e sites pessoais, e como você pode escolher seu próprio site sem perder tempo.
Como escolher esquemas de cores para seu site
Os olhos de um adulto não-cor humano podem ver mais de 1.000.000 de cores distintas. Como você escolhe o esquema de cores correto de forma rápida e eficiente com todas essas opções? Esse é o desafio enfrentado por todos os web designers que tentam criar um esquema de cores ou uma paleta para seu design a partir do zero.
Com tantas escolhas, você não pode avaliar todas as tonalidades e tons individualmente e escolher os mais adequados sem um ponto de referência. Você precisa restringir suas opções. A melhor maneira de começar é encontrar uma cor primária como seu ponto de partida.
Talvez a melhor maneira de fazer isso seja olhar para as escolhas mais populares da indústria. Isso pode ajudá-lo a aprender algo sobre a psicologia da cor e quais cores primárias podem funcionar bem para sua empresa ou produto.
Opções de cor por indústria
Diferentes empresas e produtos escolhem cores diferentes para identificar sua marca. Mas por quê? A cor não é apenas uma forma mais eficiente de captar a atenção de seus potenciais clientes e consumidores. É uma forma de se comunicar com eles em um nível emocional, quase subconsciente.
De certa forma, é uma maneira de começar a construir sua marca na mente do consumidor antes de usar uma única palavra ou frase de cópia. Nenhuma cor conta a mesma história para o consumidor, portanto as cores primárias mais populares da marca dependem de indústria para indústria.
Que emoção você quer que clientes potenciais associem com sua marca, produto ou serviço?
Essa é a pergunta orientadora que deve ajudá-lo a identificar sua cor principal para sua paleta.
Azul:
Em indústrias onde a confiança do consumidor é mais importante do que qualquer outro fator, e o profissionalismo e a confiabilidade são pontos-chave de venda, o azul é freqüentemente usado como cor principal da marca.
Não apela à espontaneidade ou à emoção. Ao invés disso, inicia um processo de tomada de decisão calmo e lógico.
Mais comuns nas seguintes indústrias:
- Bancos
- Companhias aéreas
- Comunicações
- Financiamento ao consumidor
- Utilidades elétricas
- Equipamentos pesados
- Melhoria da casa
- Hotéis
- Farmacêuticos
Vermelho:
As indústrias que dependem de emoções e decisões impulsivas (como restaurantes e fast food), muitas vezes usam o vermelho como cor primária. O vermelho é pensado para estimular a fome, por isso é uma escolha favorita entre as marcas internacionais de alimentos.
Mais comuns nas seguintes indústrias:
- Restaurantes
- Bebidas
- Varejo de alimentos
- Imóveis
- Vestuário
Verde:
A maioria das pessoas associa a cor verde à natureza, às plantas e aos ambientes vibrantes e restauradores. As indústrias que dependem de uma promessa de melhor bem-estar ou de produtos com ingredientes totalmente naturais, muitas vezes escolhem o verde.
Mais comuns nas seguintes indústrias:
- Alimentos e bebidas
- Lojas de departamento
- Imóveis
- Produtos químicos
Preto: Confiança, Sofisticação
Embora algumas empresas possam não escolher o preto em vez de fazer uma escolha de cor dedicada, por se sentirem seguras, é também uma escolha líder nas indústrias onde a confiança ou sofisticação do consumidor é um fator chave.
Mais comuns nas seguintes indústrias:
- Vestuário
- Acessórios
- Provedores de serviços móveis e de Internet
- Lojas de departamento
- Hotéis
Não siga cegamente seu gosto e instintos, considere a teoria da cor e a psicologia da cor ao tomar sua decisão.
Quantos esquemas de cores devem ser usados em um único site?
Para um esquema de cores padrão do website, você pode destacar de três a sete cores separadas em um único esquema ou paleta.
Mas quantos esquemas de cores diferentes você deve usar em um único website?
Isso depende das circunstâncias individuais e de seus objetivos com seu website. Se seu website é um website ou blog dedicado a uma única marca, produto ou empresa, você quer se ater a um único esquema de cores.
Por outro lado, se seu website for uma loja de comércio eletrônico, você pode usar esquemas de cores diferentes para esquemas de produtos diferentes para evocar reações emocionais diferentes para categorias de produtos diferentes.
O problema com o uso de múltiplas paletas é que você complicará as coisas para qualquer criador de conteúdo interno ou externo, aumentando a chance de erro e complicações humanas.
Quando você escolhe um esquema de cores para seu website, é essencial evitar exagerar e passar semanas na tarefa. É uma escolha importante, com certeza, mas escolher as cores certas não o ajudará a dirigir o tráfego para seu website ou impulsionar as conversões nas páginas de seus produtos por si só.
Como obter os esquemas de cores exatas em um site
Para identificar cada cor usada em um site, até a tonalidade exata e código hexadecimal, você pode usar uma extensão Google Chrome ou Firefox addon como ColorZilla.
Com o ColorZilla instalado, você pode simplesmente pairar seu ponteiro diretamente sobre qualquer elemento de design em qualquer site, logotipo ou imagem, e ele lhe mostrará os códigos de cores HTML hexadecimais ou RGB exatos para aquele pixel. Se você não quiser identificar as cores usadas uma a uma, você também pode usar um gerador de paleta de cores que usará uma imagem, como a ferramenta de extração de cores de imagem do Colormind.
No entanto, não é uma solução tão perfeita quanto poderia parecer. Você tem que tirar uma foto da tela do site e carregá-la e a paleta gerada não será necessariamente 100% precisa para as tonalidades reais usadas no design. Por exemplo, se o website incluir um gradiente ou uma imagem com cores além do esquema de cores principal, a paleta gerada tende a ser imprecisa.
Portanto, por enquanto, a melhor maneira de identificar as cores exatas usadas no web design ainda é usar um plugin ou extensão de identificação de cores, ou tirar uma foto e fazer as coisas manualmente em uma ferramenta de edição de fotos como PhotoShop.
Que esquema de cores de website estamos usando na Kinsta?
Como a maioria dos websites, nós da Kinsta seguimos um esquema básico tricolor ou triádico para todo o nosso conteúdo. Como somos uma empresa focada em hospedagem de WordPress, não há necessidade de implementarmos múltiplas paletas em todo o nosso website.
Usamos um roxo escuro (#5333ed) como nossa cor primária, turquesa (#2cd4d9) para justapor e criar gradientes de captura, porém equilibrados, e um cinzento submisso para texto (#6E7076).
Mas o que outras empresas estão fazendo?
Vamos descobrir!
26 Melhores exemplos de esquemas de cores de site
Procuramos na web grandes exemplos de esquemas de cores e até mesmo separamos os sites por categoria, assim será fácil para você encontrar inspiração em sites relevantes.
Grandes esquemas de cores do site Ecommerce
Abaixo, vamos cobrir excelentes exemplos de esquemas de comércio eletrônico de cores que combinam com sua marca e indústria.
1. Produto para o cuidado da pele: Brilhante e brincalhão
A escolha de cores da Bliss está no ponto quando se trata de sua marca. As cores são brilhantes e lúdicas, acompanhando perfeitamente a mensagem de positividade corporal e felicidade interior da empresa.
2. Marca de roupa: Clara e concisa
Le Bonnet é uma empresa de vestuário que se concentra na clareza quando se trata da paleta de cores de seu website. Algumas cores intensas, juntamente com uma cor de fundo bege opaca para separar os produtos, ajudam a elevar a simplicidade do design.
3. Loja de Vestuário: Simplicidade
Revise Concept é um site de marca de roupas, e em vez de confiar nas cores da paleta de cores do site, ele usa cores simples e espaço branco para destacar as cores e desenhos das próprias roupas.
Esta abordagem pode ser uma excelente alternativa para os sites de comércio eletrônico que querem deixar o produto falar por si mesmo, em vez de criar um design perfurante para contar a história.
4. Louça de mesa: Confiabilidade e profissionalismo
My Tableware é um site de comércio eletrônico alemão para louça e louça personalizável.
O site usa um esquema de cores simples de azul escuro, marrom claro e cinza para transmitir uma sensação de profissionalismo e confiabilidade, com notas de sofisticação.
Goma: Natural e Impulsivo
Neuro é uma marca de pastilhas de cafeína e menta, projetada para ajudar as pessoas a se concentrarem. Ela usa uma mistura de cores mais suaves como turquesa, azul claro e bege, para instilar uma sensação de ingredientes naturais.
Há também um apelo às decisões emocionais e impulsivas com vermelho e laranja, excelente uso do sotaque colorido.
6. Assistir: Sofisticação e Luxo
Prime Ambassador é uma marca sueca de relógios, com um site de comércio eletrônico de classe, projetado para destacar os produtos. As combinações de cores de um tom marrom claro quase dourado sobre um fundo cinza escuro e os acentos de madeira na foto trazem uma sensação de sofisticação e luxo para o visitante.
As cores são perfeitas para promover um produto de alta qualidade como um relógio sob medida, mas você se sentiria deslocado se estivesse vendendo produtos de consumo regular.
7. Calças: Criativa e Acessível
Alday é uma marca de calças de conforto – primeira calça projetada para se adaptar melhor do que as calças jeans e chinos produzidos em massa e vendidos a preços mais baixos.
O site é criativo e lúdico, com combinações de cores vibrantes que o fazem sentir-se acessível ao visitante e aos clientes potenciais.
8. Lanches de frutas: Cores elegantes e acentuadas
Madies é uma linha de petiscos de frutas liofilizadas, destinada a um consumidor mais consciente da moda do que as frutas secas sem marca vendidas a granel.
O fundo preto e a personificação amarela da manga madura acentuam a simplicidade do design, levando a um produto final elegante.
9. Denim de ajuste personalizado: Está Vivo
Unspun usa vermelho vivo e laranja para dar vida ao site. Perfeito para se comunicar com um público que leva um estilo de vida ativo e vibrante.
Esquemas de cores do site pessoal e de viagem
Abaixo, você pode encontrar nossa seleção dos melhores exemplos de esquemas de cores para websites pessoais e de viagem.
10. Simplicidade criativa
Madeleine Dalla é uma fotógrafa baseada em Nova York com um grande senso para o design de websites (e um portfólio impressionante).
Ao deixar a cor fora da equação para o resto do design, ela realmente destaca as cores vivas de suas fotos destacadas a mão de cada um de seus projetos destacados. Ela usa tanto a ausência de cor quanto as próprias cores.
11. Escala de cinza com um Splash
Ali Rifai é um diretor de arte criativo e mostra no conceito do site. Usando escala de cinza com apenas um traço de cor, sua atenção é atraída para as palavras-chave certas e áreas críticas do design, a palavra “original”, e o sorriso encantador.
12. Um com a Natureza
iFly 50 é uma revista on-line lançada pela KLM para comemorar seu 50º aniversário.
Ao destacar o azul do céu e da água, a grama verde e a floresta, faz com que qualquer visitante se sinta em sintonia com a natureza – uma abordagem perfeita para qualquer website de fotógrafo da natureza ou de fotógrafo cênico.
13. Limpo e Profissional
O site de Benediktas Gylys é uma aula magistral em design limpo. Não há desordem e isso também vale para escolhas de cores.
A cor roxa primária destaca o profissionalismo, e embora existam apenas algumas cores, todas elas servem para destacar os elementos críticos, as ilustrações.
14. Cores Pragmáticas
BucketListly utiliza as cores de forma pragmática, usando o amarelo para destacar palavras-chave, CTAs e países visitados até agora.
Mostra o valor que se pode obter de uma única cor em um design quando se usa em conjunto com o espaço branco e os conceitos corretos.
15. Elegante simplicidade
A imagem em destaque no site de Lars Franzen usa uma cor de fundo escura para realçar a cor e a individualidade das pessoas no retrato.
16. Sobreposição futurista
O site pessoal da Dot Lung faz um ótimo trabalho para maximizar a paleta de cores simples com sobreposições e gráficos de fundo limpos. O roxo no fundo cria uma experiência coesiva de página para página.
17. Luz e escuridão
Love for Iceland é um grande exemplo de como as cores de uma imagem em destaque podem definir o clima. Com o azul brilhante do gelo claro, iluminado pela luz do sol, na parte superior esquerda, para a escuridão tipo caverna na parte inferior, ele estabelece um clima ameaçador e aventureiro para o visitante.
Esquemas de cores da página de pouso
Abaixo destacamos diferentes Landing Pages com esquemas de cores únicas ou eficazes.
18. Contrastes acentuados
Zenly usa cores contrastantes para destacar a funcionalidade real do aplicativo de mapas ao vivo (btw, esta é a forma como você incorpora o Google Maps em sites WordPress). O pano de fundo do espaço faz com que o design do aplicativo globular se destaque e o faça adquirir um sabor futurista.
19. Cor a destacar
Slack usa uma tática de esquema de cores de página de aterrissagem experimentada e verdadeira, onde as cores são usadas principalmente para destacar chamadas importantes à ação e outros elementos essenciais. Para uma Landing Page, você não precisa complicar demais o design, e isso também se aplica às cores.
Certifique-se de verificar nossas Microsoft Teams vs Slack em comparação profunda.
20. Cores vibrantes despertam emoções
Spotify usa cores vibrantes para despertar emoções em um público em sua nova página de aterrissagem extremamente simples. As cores contam mais de uma história do que o subtítulo antes do botão CTA. Confira nosso guia se você estiver pensando em lançar um podcast em breve.
21. Os contrastes de cor criam ordem no caos
Autonomy usa cores e contraste para criar ordem em um design animado e caótico. O amarelo vibrante atravessa e se separa do fundo e de outros objetos.
22. Conjunto de cores futuristas
Bugsnag utiliza uma coleção variada de cores para transmitir uma sensação futurista e de alta tecnologia com seu design plano. A combinação de cores e formas faz com que o visitante sinta que estamos em 2020, e que pode confiar na empresa para estar na vanguarda da tecnologia.
23. Vivo com cor
A página de aterrissagem do Connect Homes ganha vida com cores brilhantes e ao mesmo tempo suaves. A paleta de cores atinge um equilíbrio excitante que transmite uma sensação moderna.
24. Cores conservadoras, design lúdico
A Landing Page do Plink é baseada em um tom relativamente conservador de azul escuro, mas equilibra-o com uma animação e design lúdico e divertido em geral.
25. Vitalidade natural
Travelshift depende muito da cor verde para transmitir uma sensação de natureza e vitalidade. Em vez de destacar CTAs ou conteúdo chave com uma cor que chama a atenção como o vermelho ou o laranja, o verde funciona como uma promessa de rejuvenescimento.
26. Cores brilhantes de esperança
Swab the World usa um esquema de cores brilhantes e contrastantes para transmitir uma sensação de esperança. Esta é uma combinação perfeita para Landing Page de uma organização sem fins lucrativos. O choque de cores funciona com as formas para destacar a abordagem moderna/futurista que eles utilizam para enfrentar o desafio.
Geradores de esquemas de cores do site
Se você não quiser escolher manualmente cores, gradientes ou sombras adjacentes para seu esquema ou paleta, você pode usar ferramentas on-line para ajudar. Há uma série de esquemas de cores ou geradores de paleta gratuitos disponíveis on-line. Analisaremos mais de perto algumas das melhores opções abaixo.
Colormind
Colormind é um gerador de cores alimentado por IA que você pode usar para gerar cores para websites, modelos, e mais instantaneamente. A única questão é que você não pode definir uma cor primária para extrapolar uma paleta, você tem que gerá-la aleatoriamente toda vez. Ele também pode extrair paletas de cores a partir de qualquer imagem que você desejar.
Coolors.co
Coolors.co é uma aplicação web e móvel que ajuda a gerar paletas a partir do zero. Possui alternativas de sombras para cada opção de cor e outras ferramentas avançadas que ajudam você a tomar decisões eficientes sobre seus esquemas de cores.
Paletton
Em vez de gerar esquemas aleatórios, Paletton lhe dá controle total sobre sua paleta e qual cor você quer usar como cor base/primeira. Você pode escolher o tipo de paleta que deseja, sejam cores adjacentes, um esquema de cores triádicas, ou outras. Você pode selecionar qualquer cor a partir da roda de cores.
ColorSpace
A ColorSpace gera paletas de cores com base em uma cor primária que você insere. Ela oferece uma grande variedade de opções de estilo que lhe dão mais flexibilidade.
Color Blindness: Como escolher uma paleta amigável ao daltônico para seu site
A última coisa a considerar ao criar um esquema de cores do site é como pessoas diferentes verão as cores.
Nem todos vêem a gama “padrão” de cores. Existem três tipos principais de daltonismo: deuteranopia, protanopia e tritanopia.
A daltonismo (deuteranopia e protanopia) é a forma mais comum de daltonismo. Ela afeta cerca de 1 em 12 pessoas de descendência do norte da Europa. Com um número tão grande da população afetada por ela, vale a pena considerar ao projetar e/escolher um tema WordPress.
A cegueira de cor azul-amarela é muito mais rara e afeta homens e mulheres igualmente.
Como escolher uma paleta amigável ao daltônico para seu site
Como o número de pessoas daltônicas de cor vermelho-verde é muito maior do que qualquer outra forma de daltonismo, deve ser sua prioridade número um a abordar com seu projeto. Como eles não podem separar vermelho, verde e roxo, mas sim vê-los como tons diferentes de amarelo e azul, você quer evitar usar cores contrastantes que acabarão parecendo muito semelhantes.
- Não contraste o verde com o amarelo ou vice versa.
- Não contraste o amarelo com o vermelho ou o laranja.
- Não contraste o roxo com tons semelhantes de azul.
Ao escolher cores primárias autônomas para seu logotipo ou design, você deve considerar se ele ainda está na marca para os consumidores que são daltônicos. Por exemplo, o roxo da Kinsta ainda é um azul escuro para os consumidores daltônicos, transmitindo uma mensagem de confiabilidade e confiabilidade. Para nós, isso é 100% na marca, portanto, não há conflito potencial na mente de nossas perspectivas.
Resumo
O olho humano pode ser capaz de separar milhões de diferentes tonalidades de cor, mas você não precisa pentear todas as suas opções para encontrar um esquema de cor que funcione para seu site.
Ao se concentrar em sua marca e em seus clientes ideais, você pode restringir suas escolhas de cores primárias. Uma vez que tenha suas escolhas, você pode contar com geradores de paleta on-line para completar sua própria paleta de cores, ou escolher cores correspondentes com base em exemplos e preferências.
Com a abordagem correta, é possível criar um esquema de cores para o website que possa ser usado como ponto de partida de seu processo de design, embora seja muitas vezes necessário contratar o desenvolvedor/designer correto da web se você quiser obter o visual profissional certo e sentir as necessidades de sua marca.
Agora, é hora de escolher as fontes, não é mesmo?
Editor-chefe da Kinsta e consultor de marketing de conteúdo para desenvolvedores de plugins do WordPress. Conecte-se com Matteo no Twitter.
Deixe um comentário