Cores para Sites: Inspire-se nas Paletas Utilizadas em 50 Páginas Impactantes

cores para sites

Você sabia que o Facebook é azul porque Mark Zuckerberg é daltônico?

“Azul é a cor mais rica para mim; posso ver tudo o que é azul”, disse Zuckerberg. Embora a escolha dessa cor não seja muito científica, ainda assim prova a importância da seleção das cores.

De acordo com o Buffer, mais de 90% da avaliação que fazemos de um produto é baseada em sua cor, então faz sentido que a coloração seja levada a sério na hora de tomar decisões sobre design, principalmente no caso dos sites. Basicamente, se não gostarmos das cores escolhidas para um site, não vamos permanecer na página por muito tempo.

Para você começar a pensar sobre a paleta de cores do seu site, reunimos 50 sites lindos e de cores versáteis para inspirar você.

Então, sem mais delongas, vamos mergulhar neste mar de cores!

01. Divertido e profissional

Mark Dearman.

Criada por Mark Dearman, esta paleta simples e vibrante combina, com maestria, toques de cores quentes com um fundo azul puro, criando um efeito límpido, profissional e convidativo. Procure usar cores contrastantes para obter um alto grau de nitidez.

02. Inspirado na história da arte

Fabrique.

Quando estiver em dúvida, inspire-se em seu conteúdo. Este website do Museu Van Gogh, criado por Fabrique, utiliza as cores vibrantes e cheias de textura das obras do famoso pintor. Combinando amarelos quentes, tons de azul ricos e verdes puros, você pode obter uma paleta simples, porém flexível e significativa.

03. Tons suaves

The Martin Agency.

Este design impressionante, criado por The Martin Agency, usa tons suaves de dourado e outros tons desbotados em contraste com tons pretos e brancos incisivos, criando um incrível efeito contrastante. Simples, minimalista e elegante, esta paleta é perfeita para qualquer tipo de design sofisticado.

04. Moderno e puro

Benedict Leicht.

Este exemplo moderno e ousado de Benedict Leicht usa diferentes tons de laranja e azul para criar uma paleta de cores descolada e forte. Ao usar tons vívidos, procure equilibrá-los com cores mais neutras, como tons de branco e cinza-claro.  Assim, você mantém o design divertido, mas sem extravagância.

05. Tons de neon contrastantes

Play Agency.

Este site, criado por Play.agency, apresenta uma paleta de cores altamente contrastante, combinando um fundo preto com cores neon. Ao contrastar a cor preta com tons de roxo, azul e rosa, você pode obter um efeito impressionante.

06. Desbotado e minimalista

Inga Gudoniene / MIOS.

Por Inga Gudoniene / MIOS, este exemplo usa cores desbotadas e suaves para criar um visual elegante. Você pode conquistar um visual atemporal e sofisticado combinando tons desbotados com tons claros de cinza.

07. Quente e ousado

Lush Digital.

Uma mistura de cores quentes e frias para criar uma vibe única! Dê uma olhada no catálogo da Lush Digital — vermelhos e azuis vibrantes são combinados com tons fortes de anil e púrpura para proporcionar um ar idílico e ousado.

08. Puro e destacado

Departika.

Graças aos tons suaves de azul, cinza e branco, esta paleta de Departika é pura e profissional. Ela também chama a atenção para certos elementos através do uso de cores vibrantes. Para obter um contraste interessante, combinete tons fortes com cores suaves.

09. Tons Quentes

Studio Recode.

Esse exemplo do Studio Recode também mantém o visual puro e minimalistas, mas com um belo toque de cores quentes. Ao contrabalançar os tons quentes e claros de marrom do background com imagens e fontes de tons fortes, a paleta mantém o visual do site convidativo e simples.

10. Atrevido e moderno

Frost Festival.

Uma ótima maneira de estabelecer a identidade visual do seu site é dando enfoque a uma cor, como neste exemplo do Frost Festival. Ao usar um tom forte de turquesa como cor principal, complementando o visual com toques suaves de laranja, cinza e menta, essa paleta mantém um ar refrescante, moderno e simples.

11. Quente vs. frio

Akaru.

Ao combinar matizes quentes com frias, você vai obter uma paleta incrível. Neste exemplo criado por Akaru, tons quentes de laranja e amarelo foram contrastados com cores frias e metálicas para criar um efeito dinâmico incisivo.

12. Belos tons de pastel

B/C Designers.

Tons de pastel não são usados só em paredes de pediatras: este site da B/C Designers usa rosas, azuis e laranjas em tons de pastel para criar um aspecto divertido, claro e convidativo. Quando for usar tons de pastel, tente equilibrá-los com espaços em branco para, assim, manter o design agradável.

13. Ousado e arrebatador

Se tons de pastel não fazem muito o seu tipo, você pode usar cores brilhantes, arrebatadoras e vintage, como neste exemplo do Magoz. Mesmo usando uma variedade enorme de cores de uma só vez, o esquema quente e consistente mantém o design coeso e lógico.

14. Matizes e tons

Romain Bouchereau e Vincent Fréman.

Uma ótima forma de expandir a sua paleta e, ao mesmo tempo, manter a pegada minimalista, é usar vários tons de uma mesma cor.

Este site simples e elegante, criado por Romain Bouchereau e Vincent Fréman, segue essa proposta ao usar diferentes tons de uma cor neutra. Já o cabeçalho do site é um carrossel de imagens, cada uma usando uma cor diferente, como você pode observar aqui.

15. Explosão de cores

Magnium Themes.

Este exemplo da Magnium Themes injeta cores intensas no design para criar um efeito divertido, porém sofisticado. O contraste dos azuis, laranjas e amarelos com o fundo cinza-claro proporciona um efeito profissional e vibrante.

16. Elegante e sofisticado

Julian Damy.

Costumamos considerar preto e branco como as cores mais sofisticadas; mas dê uma olhadinha nessa arte de Julian Damy, que consegue o mesmo efeito elegante usando simplesmente tons profundos de azul com destaques sutis de dourado. Esta também é uma paleta inspirada na história da arte, e sua combinação de cores é atemporal e maravilhosa.

17. Inspirado no verão

StrADegy Advertising.

Quando pensamos em designs de verão, logo nos vem à mente os tons clássicos de vermelho e laranja; mas olhe só este site criado por StrADegy Advertising. Veja como ele consegue capturar o calor da estação usando matizes de coral, azul e bronze. É um jeito simples e minimalista de utilizar uma paleta inspirada no verão.

18. Profissional e moderno

Avondale Type Co.

Procura uma combinação que transpareça profissionalismo, mas sem parecer sem graça e ultrapassada? Veja só esta aqui usada por Avondale Type Co. A mistura de tons de cinza, azul-marinho e amarelo intenso com o layout moderno e ousado resulta em um design que impõe respeito.

19. Preto ousado e destaques vibrantes

Cantina dei Colli Ripani.

Se você está à procura de um design surpreendente e contemporâneo, tente misturar toques de preto e branco com algumas cores vibrantes, assim como Cantina dei Colli Ripani fez neste exemplo. O contraste entre as cores proporciona um efeito poderoso, ousado e divertido.

20. Degradê e cores desbotadas

SHIBUI.

Já percebeu como alguns sites simplesmente parecem “limpos”? Uma ótima maneira de obter esse efeito, assim como fez SHIBUI, é usando degradê. A paleta escolhida por esse site é composta por azuis e tons de turquesa, que foram desbotados para criar um efeito degradê calmo e limpo.

21. Alegre e lustroso

Huemor

Este website, criado por Huemor, apresenta uma paleta leve, moderna, alegre e convidativa. Ao usar cores vibrantes, espaço em branco e um azul como contraponto às cores quentes, este esquema é um exemplo perfeito da influência das cores no sucesso do design de um site.

22. Sexy e moderno

Zach Klein.

Esta paleta de cores usada por Zach Klein traz um mundo de luxúria, sofisticação e personalidade para o design do site. Ao combinar azul-marinho, bronze e um pouco de vermelho vibrante, o resultado é um site moderno, minimalista e muito elegante.

23. Único e impactante

Great Works Copenhagen.

Criado por Great Works Copenhagen, este site superprofissional deixa de lado as cores neutras e aposta em uma paleta vibrante. Ao escolher um tom impactante de vermelho e misturá-lo com vários tons de azul, o site equilibra seu ar profissional com um toque descolado e único.

24. Combinações de cores surpreendentes

Intesys S.r.l.

Roxo e verde são duas cores que não se misturam com frequência, mas este site criado por Intesys S.r.l. prova que talvez isso devesse acontecer mais vezes. O tom rico de roxo contrasta incrivelmente com o verde-limão vibrante e o branco, criando um design único e memorável.

25. Inspiração retrô

Lowdi.

As cores ricas e quentes desta paleta de Lowdi proporcionam um ar vintage ao site. Essa paleta retrô tem muita personalidade, energia e um toque bem moderno. Considere usar um amarelo pálido em vez do branco para obter o mesmo efeito.

26. Antigo e simples

Pier-Luc.

Esta paleta simples e elegante usada por Pier-Luc, composta por vermelho-terra, verde e tons de cinza, proporciona um toque de charme ao design. Ao combinar essa paleta desbotada com uma imagem levemente colorida, o site ganha uma aparência sofisticada e clássica.

27. Impactante e intenso

Hyperakt.

Criado por Hyperakt, este site mistura cores ousadas e saturadas, criando um efeito surpreendente. Repare também como essas cores vibrantes são equilibradas com toques de branco. Sempre busque obter esse tipo de equilíbrio!

28. Forte e vibrante

Baesman.

Criado por Baesman, este site é outro grande exemplo de como cores vívidas podem ser usadas para criar um design profissional. Ao harmonizar cores claras e puras com um fundo branco e design minimalista, o site consegue manter um visual vibrante e divertido sem deixar de lado seu ar profissional.

29. Leve e puro

BrightMedia.

Este exemplo do BrightMedia é um modelo de paleta simples, pura e flexível.  Ao combinar diferentes tons de azul com alguns tons de cinza, esse esquema mostra-se minimalista e simples, mas sem ser sem graça.

30. Colorido, mas sem conflito

Yoke.

Às vezes, muitas cores podem deixar o design sobrecarregado. Mas no caso deste site criado por Yoke, as cores se encaixam com perfeição. Ao desbotar ligeiramente cada cor e inserir bastante espaço em branco no design, você pode criar um efeito vibrante e colorido sem pecar pelo excesso.

31. Leve e calmo

Roll Studio.

Embora o jeito mais comum de representar o verão e as praias seja através dos tons de vermelho, amarelo e laranja, confira o design do Roll Studio e expanda seus horizontes. Crie uma atmosfera relaxante e praieira com tons de turquesa e roxo, e utilize toques de laranja para deixar a paleta calma, convidativa e diferenciada.

32. Moderno e desbotado

Relax, we are the good guys.

Criada por Relax, we are the good guys, esta paleta oferece personalidade e vida ao design através de cores suaves. Como as cores seguem um padrão em termos de tonalidade, a paleta se torna naturalmente homogênea, calma e moderna.

33. Orgânico e fresco

AQuest.

Esta paleta da AQuest se inspira nos tons orgânicos dos vegetais, misturando esses tons com o espaço em branco para criar um visual leve e surpreendente. Você só precisa usar espaço em branco e tons de verde-oliva, vermelho intenso e roxo vivo para replicar esse efeito.

34. Alta saturação e muita energia

El Burro.

Esta paleta do El Burro transpira energia, diversão e entusiasmo. Ao usar cores altamente saturadas, como rosa-choque, verde-limão, ciano e amarelo, você pode produzir o mesmo efeito e criar um design impactante e jovial.

35. Quente e maravilhoso

Fieldword.

Está procurando uma paleta que atenda designs complexos? Dê uma olhada nesta aqui, usada por Fieldwork. Ela apenas usa cinco cores, mas consegue manter o design colorido e complexo. Ao misturar ciano intenso com tons de amarelo, vermelho e azul-marinho, você pode conquistar uma paleta flexível, divertida e atraente.

36. Charme vintage

Cafe Frida.

Quer criar um efeito vintage sem parecer velho e desatualizado? Veja esta paleta usada pelo Cafe Frida. Ela usa tons de dourado, verde, marrom e branco para criar um efeito charmoso e cheio de classe.

37. Tons frios de joia

GrowCreate.

Criado por GrowCreate, este exemplo usa lindos tons de roxo e azul, inspirados nas cores das pedras preciosas, e degradês sutis para criar uma paleta simples, porém elegante e atraente.  Além disso, os leves toques de rosa-choque mantêm o design do site envolvente e bonito.

38. Matizes tempestuosas

Cinco Design.

Está em busca de um visual sombrio, mas não curte muito os tons de preto? Veja só este design tempestuoso criado por Cinco Design. Ele usa tons profundos de roxo, azul e rosa para proporcionar um efeito sofisticado e especial ao site.

39. Leve e colegial

details.ch.

Quer criar uma paleta customizada e profissional com poucas cores? Dê uma olhada nesta paleta simples criada por details.ch, que usa cores leves e sofisticadas. Não tenha medo de incluir um pouco de rosa no meio dos tons de azul para deixar o design ainda mais diferenciado.

40. Simples e revigorante

MadeByShape.

Esta paleta de MadeByShape usa uma combinação incomum de cores, mas que funciona de maneira muito natural. O cinza-carvão, o salmão, o tom mentolado e o bege proporcionam uma combinação única e bela ao design.

41. Tons tropicais

Os 10 Melhores Álbuns de 2014 por Thomas Schrijer.

Este lindo site criado por Thomas Schrijer usa tons tropicais vibrantes para criar um efeito bonito. A utilização de tons quentes de amarelo, vermelho, verde e azul torna a paleta divertida, simples e bela. É uma paleta muito apropriada para designs que demandam energia.

42. Cores ousadas

Joy Intermedia.

Uma ótima maneira de criar uma paleta interessante é destacando uma cor forte em meio a tons neutros. Confira esta paleta do Joy Intermedia. Ela usa tons de cinza, carvão e azul-marinho combinados com toques de cereja.

43. Tons de aspecto antigo

Leibowitz Branding & Design.

O site Athena Art Finance, criado por Leibowitz Branding & Design, usa lindos tons de aspecto antigo para criar um design elegante e sofisticado com muito charme. Inspirando-se em história da arte e usando tons intensos de roxo, azul, verde e dourado, você pode transformar qualquer página em um ambiente cheio de classe.

44. Neon e ousado

Calvi on the Rocks.

O site do evento Calvi on the Rocks mostra, exatamente, como usar os vibrantes tons de neon: através do equilíbrio. Esta paleta é composta por tons vibrantes de verde, roxo e azul; mas para não sobrecarregar o design, tons de branco foram usados de maneira acentuada.

45. Simples, mas estiloso

Mambo Mambo.

Quer a simplicidade de uma paleta enxuta, mas a energia de uma paleta complexa? Então experimente esta paleta usada no design do site Mambo Mambo, que usa amarelo e alguns tons de verde e azul para criar algo simples, porém superestiloso. Essa paleta é tropical, divertida, leve e, o melhor de tudo, simples.

46. Elegante e corporativo

Ryan Borker, Jermaine Craig, Mike Parsons e Kyle Miller.

Precisa de algo mais profissional? Inspire-se nesta linda combinação de cores de Ryan Borker, Jermaine Craig, Mike Parsons e Kyle Miller. Os tons ousados de azul-marinho são combinados com tons de branco para criar um design que expressa elegância e seriedade.

47. Moderno e minimalista

Huemor.

Este site da Huemor mantém a simplicidade e o minimalismo através do uso de uma paleta predominantemente monocromática, equilibrada com toques de amarelo para chamar a atenção — este detalhe destaca partes importantes do design e, ao mesmo tempo, dá vida ao site. Na dúvida, mantenha a paleta simples.

48. Divertido e alegre

Marie Catribs.

Cores dão personalidade ao design, então tente casar sua paleta com a identidade do site, assim como Marie Catribs fez aqui. Ao usar tons divertidos e vibrantes de azul, roxo e amarelo, o lado descolado do site foi destacado.

49. Ensolarado e calmo

TRAFFIC.

Deseja criar um site de visual quente e convidativo? Então confira a combinação de cores deste exemplo da TRAFFIC. A harmonização de tons quentes de amarelo e dourado com tons de azul-marinho torna esta paleta tranquila e convidativa.

50. Arte pop

Visualsoft.

Seu site é jovial? Cheio de energia? Demonstre isso através de cores vibrantes, assim como a Visualsoft fez neste exemplo. Os tons de rosa-choque, amarelo e azul inseridos neste design minimalista proporcionam muita vida e personalidade à página.

Agora é com você

Cores podem consagrar ou destruir um design, então é muito importante escolhê-las com sabedoria, principalmente quando se trata de cores para sites. Identifique as emoções e ideias que você pretende transmitir com seu site e tente transformá-las em uma paleta interessante.

Quer mais dicas de cores? Então confira o post 10 Segredos de Colorização que os Designers Seguem à Risca.