Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como escolher um esquema de cores perfeito para seu site WordPress

Nota editorial: Ganhamos uma comissão de links de parceiros no WPBeginner. As comissões não afetam as opiniões ou avaliações de nossos editores. Saiba mais sobre Processo editorial.

Está com dificuldades para decidir o esquema de cores do seu site?

A escolha da combinação certa de cores pode aumentar o apelo do seu site, melhorando a experiência do usuário e aumentando suas vendas e conversões.

Neste artigo, mostraremos como escolher facilmente um esquema de cores perfeito para seu site WordPress.

Choosing color scheme for your website

Entendendo a psicologia das cores

É uma teoria bem pesquisada que as cores podem afetar as reações humanas. As cores exercem uma influência emocional sobre as decisões e escolhas que fazemos em nossa vida cotidiana. Isso é chamado de psicologia das cores.

As grandes corporações gastam milhões de dólares para criar uma imagem e uma identidade de marca bem elaboradas para seus produtos. Elas contratam especialistas para escolher a combinação perfeita de cores para suas marcas, produtos e sites.

As cores que você usa no seu blog WordPress são uma parte importante da imagem da sua marca, pois podem criar emoções e sentimentos nos usuários.

Ao usar cores complementares estrategicamente, você pode criar uma identidade memorável para a sua marca que repercuta no seu público-alvo. Isso também pode estabelecer confiança entre você e seus clientes.

Então, como descobrir quais cores usar e quais emoções deseja criar em seus usuários?

Para sua sorte, os profissionais de marketing e psicólogos já fizeram muitas pesquisas.

Por exemplo, muitos blogs de culinária e restaurantes usam as cores vermelho, laranja ou amarelo porque elas estão associadas à fome. O vermelho é uma cor que chama a atenção, enquanto o amarelo e o laranja estimulam o entusiasmo, criando uma atmosfera calorosa e acolhedora.

Da mesma forma, a maioria dos bancos usa a cor azul, pois ela significa confiança, tranquilidade e confiabilidade.

Para entender melhor as cores e seus significados, dê uma olhada neste infográfico:

Psychology of Colors
  • Vermelho: a cor da juventude e da alegria. Reflete ousadia e confiança.
  • Verde: Cria um efeito relaxante e calmante. Evoca uma resposta emocional pacífica, progressiva e calma.
  • Azul: Reflete confiança, força e confiabilidade.
  • Preto: Gera uma resposta emocional sofisticada, sólida e segura.
  • Branco: Clareza e simplicidade são os dois principais efeitos do branco.
  • Amarelo: A cor do otimismo, do calor e da cordialidade.
  • Laranja: Cria um efeito divertido, amigável, confiante e alegre.
  • Rosa: Sensualidade, feminilidade, romance e amor são as emoções associadas ao rosa.

Outros aspectos a serem considerados na escolha de um esquema de cores para o WordPress

As cores precisam de contexto para funcionar da maneira que você quer que elas funcionem. Sua marca ou produto pode já ter certas associações que podem ou não funcionar com as cores que você está escolhendo.

Há alguns aspectos que você deve considerar antes de escolher um esquema de cores para seu site WordPress.

Primeiro, você deve considerar a imagem da marca existente. Se você já tem um logotipo e outros materiais de marketing, talvez queira usar as cores existentes em seu site.

Você também precisa considerar quais cores ficarão bem no design do site.

Por exemplo, uma opção de cor azul brilhante pode parecer ótima pessoalmente, mas pode não ser a melhor cor de fundo na sua tela.

Também é preciso pensar em outras mídias, como controles deslizantes, vídeos, imagens e botões de call-to-action que serão adicionados ao seu site. Certifique-se de escolher um plano de fundo que complemente as cores que você está usando para o botão de CTA, a cor do texto e os controles deslizantes.

Por fim, você também deve ter em mente a acessibilidade. Um bom esquema de cores tem contraste suficiente para facilitar a leitura, mesmo que seus visitantes tenham deficiências visuais, o que acontece com muitas pessoas em todo o mundo.

Para obter mais instruções, consulte nosso guia para iniciantes sobre como melhorar a acessibilidade em seu site WordPress.

Tutorial em vídeo

Subscribe to WPBeginner

Se você preferir instruções por escrito ou precisar de mais detalhes, continue lendo.

Criando um esquema de cores para o WordPress

Depois de escolher as cores apropriadas para seu site WordPress, há várias ferramentas on-line que podem ser usadas para gerar um número ilimitado de paletas de cores.

Recomendamos que você escolha pelo menos duas cores que representem sua marca e a resposta que deseja obter dos usuários.

Dito isso, vamos dar uma olhada nas ferramentas on-line que você pode usar para gerar o esquema de cores certo para o seu site.

1. Adobe Color CC

Adobe Color CC

OAdobe Color CC, anteriormente conhecido como Kuler, é uma ótima ferramenta para gerar paletas de cores.

A ferramenta apresenta um círculo de cores que pode ser usado para escolher cores de um espectro. Você pode até selecionar regras de cores antes de girar o disco para criar esquemas de cores visualmente agradáveis. Essas regras incluem complementares, triádicas, análogas e monocromáticas.

Além disso, você pode ajustar manualmente cada cor na paleta, e o restante das cores será alterado automaticamente para corresponder à regra de cores. Você também pode gerar paletas de cores fazendo upload de fotos e extraindo cores diferentes delas.

Além disso, o Adobe Color CC também oferece uma grande biblioteca que você pode usar para selecionar esquemas de cores predefinidos.

2. PHOTOCOPA por COLOURLovers

PHOTOCOPA

COLOURLovers é um dos destinos mais populares para inspiração e ideias de cores. Eles têm algumas ferramentas excelentes para gerar esquemas de cores. Uma delas é o PHOTOCOPA, que permite que você crie um esquema de cores a partir de fotos.

A ferramenta permite que você carregue uma foto e use um seletor de cores para selecionar cores específicas da imagem para criar uma paleta.

Você também pode usar ferramentas como o COPASO da COLOURlovers para gerar paletas de cores de sites mais avançadas a partir do zero ou usando paletas existentes carregadas por outros usuários.

3. Paleta de materiais

Material Palette

Inspirada no conceito de Material Design do Google, a Material Palette é uma ferramenta on-line que permite gerar esquemas de cores usando regras de design.

Ela inclui cerca de 19 cores primárias e seus tons, juntamente com uma ferramenta de seleção de cores que ajuda os usuários a selecionar qualquer matiz, saturação e brilho para a paleta.

Ele oferece esquemas de cores predefinidos e permite até mesmo criar cores personalizadas inserindo os códigos RGB ou HEX.

Além disso, a paleta de materiais também permite que você visualize os designs da paleta de cores em um site ou na interface de um dispositivo móvel em tempo real.

4. Resfriadores

Coolord

OCoolors é um conhecido gerador de esquemas de cores que cria um esquema de cores com base na escolha do usuário, como monocromático, análogo, triádico, complementar e outros.

A ferramenta permite que você crie um gradiente entre duas cores. Ela ainda vem com um verificador de contraste que fornece sugestões para tornar a paleta mais acessível para usuários com deficiências visuais.

Ele também pode se integrar a ferramentas de design populares, como Sketch, Photoshop e Illustrator, para criar um esquema de cores.

Com o Coolor, você também pode salvar, exportar e compartilhar suas paletas de cores com outros usuários na Internet.

Bônus: Altere o esquema de cores do administrador no WordPress

Além de criar um esquema de cores atraente para o seu site, você também pode alterar o esquema de cores do administrador para criar um painel de controle personalizado do WordPress para você e sua equipe.

Por exemplo, se você tem um restaurante e aceita pedidos on-line, talvez queira usar cores como vermelho, amarelo ou laranja no backend do WordPress para representar seu site.

Change admin area color

Da mesma forma, se você tiver um site de associação em que os usuários possam fazer login no painel do WordPress, poderá usar um esquema de cores atraente para aprimorar a experiência do usuário.

Você pode alterar facilmente o esquema de cores da sua área de administração visitando a página Usuários ” Perfil no painel do WordPress.

Depois disso, role para baixo até a seção “Admin Color Scheme” e escolha qualquer um dos 9 esquemas predefinidos para o seu site.

Select new admin color scheme

Depois de fazer isso, não se esqueça de clicar no botão “Update Profile” (Atualizar perfil) para armazenar suas configurações.

Para obter instruções detalhadas, consulte nosso tutorial sobre como alterar o esquema de cores do administrador no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como escolher o esquema de cores perfeito para seu site WordPress. Talvez você também queira conferir nosso guia para iniciantes sobre como personalizar cores em seu site WordPress e nossas escolhas de especialistas para os melhores temas de blog gratuitos do WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

16 ComentáriosDeixe uma resposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. THANKGOD JONATHAN says

    Color scheme is very important to match with any website design. Please how can I change the text color of my blog posts and pages? The theme I am using doesn’t have it in the “Customize”

  3. Moinuddin Waheed says

    Having a good color combination for any website gives a sense of consistency and branding.
    I have noticed wpbeginner, there is consistent color every where and it gives a sense of branding.
    I have used coolers for my websites to get a color combination.
    Thanks for giving all the lists of possible options to explore color scheme for a websites.

  4. Andy says

    Hey everyone! I really wanted to make my site by myself – taking into account my preferences. But I also wanted the design of my site to appeal to visitors. I have tried many patterns and combinations. Thanks for your advice guys! With this article, I found a solution that I really like!

  5. Rudy SMT says

    Thanks for the article, I took the psychology of colors to heart.

    I just complete the recoloring of my website, I didn’t use professional software like Adobe or PhotoShop but instead an online palette generator and some other trick.

    I wrote down step by step how I picked the color and implemented on my website in less than 20 minutes without any professional design software.

    i love to keep things simple; I hope it will help others.

  6. Donnamarie says

    Thank you for the color theory and tools! I’m about to create my first website and really want to use a black background with pastel colored, not white, fonts. I prefer this schemata because it’s way easier on my eyes with the reduced glare. I’ve been using the net for almost 20 years and see very few sites with dark backgrounds. Some white font on black is fine, but pages of it is too much contrast for me too. I’ve noticed a trend of light grey font on white backgrounds and when I see a site with that scheme, I bounce because it’s too straining to read. I’d love comments on the following 2 questions:
    Does using a dark background really turn off the majority of potential subscribers?
    I’ve heard that most webpages are white because at first they were emulating books…why is the majority of pages white?

  7. Bryce Munger says

    One thing to consider with sites is how they will look to everyone. I am red/green colorblind and what looks sharp and crisp to you may drive my eyes bonkers. The same applies in reverse, a combo I like may not look good to others. I would recommend finding some friends or associates that are colorblind (or vice verse) and have them review your work.

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.