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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela) — 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(abre em uma nova aba ou janela) é 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(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela). 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(abre em uma nova aba ou janela) e Vincent Fréman(abre em uma nova aba ou janela), 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.(abre em uma nova aba ou janela)

15. Explosão de cores

Magnium Themes.

Este exemplo da Magnium Themes(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela). 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(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela), é 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela), 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.(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela) é 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela). 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(abre em uma nova aba ou janela). 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela). 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela). 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(abre em uma nova aba ou janela), criado por Leibowitz Branding & Design(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela), 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(abre em uma nova aba ou janela). 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(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela) 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(abre em uma nova aba ou janela). 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(abre em uma nova aba ou janela) 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.

Artigos relacionados

Ver tudo

Dê vida às suas ideias em questão de minutos.

Expresse-se melhor com o programa de design mais fácil do mundo.