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.

Cores da marca por indústria

Cores da marca por indústria (Fonte de imagem: towergateinsurance.co.uk)

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:

Azul é a cor de confiança

Azul é a cor de confiança

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:

Vermelho:

Red comunica atenção e paixão

Red comunica atenção e paixão

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:

Verde:

O verde transmite uma sensação de vitalidade

O verde transmite uma sensação de vitalidade

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:

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:

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ó.

62-90% da impressão inicial dos consumidores é baseada apenas nas escolhas de cores... o que significa que encontrar o esquema de cores correto para seu site não é apenas uma decisão estética - é uma decisão comercial. 🎨✨Click to Tweet

Como obter os esquemas de cores exatas em um site

colorzilla

Colorzilla

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 de hospedagem focada em WordPress, não há necessidade de implementarmos múltiplas paletas em todo o nosso website.

Kit de mídia Kinsta

Kit de mídia Kinsta

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

Bliss

Bliss

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 

Le Bonnet

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

Revise

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

My Tableware

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

Neuro

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

Prime Ambassador

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

Alday

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

Madies

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

Unspun

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

madeleina dalla

Madeleine Dalla

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

Ali Rifai

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

iFly 50

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

benediktas

Benediktas Gylys

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

BucketListly

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

lars franzen

Lars Franzen

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

Dot Lung

Dot Lung

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.

Cansado de um host lento? Kinsta é construído com velocidade e desempenho em mente. Confira nossos planos

17. Luz e escuridão

Love for Iceland

Love for Iceland

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

Zenly

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

Slack

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

Spotify

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

Autonomy

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

Bugsnag

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

connect homes

Connect Homes

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

plink

Plink

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

Travelshift

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

Swab the World

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 pallete generator

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

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

paletton generator

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

color space generator

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.

Diferentes tipos de daltonismo

Diferentes tipos de daltonismo

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.

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.

Faça seu site se destacar da multidão (e ganhar mais vendas) com o esquema de cores correto 🎨🌈Click to Tweet

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.


Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 da nossa veterana equipe WordPress. Nossa infraestrutura alimentada pelo Google Cloud se concentra na escalabilidade, desempenho e segurança. Deixe-nos mostrar-lhe a diferença da Kinsta! Confira nossos planos