A teoria das cores no web design: Como encontrares a paleta de cores certa para o teu site

7 min.
An introduction to color theory for web designers

Provavelmente todos nos lembramos vagamente da teoria das cores das aulas de Educação Visual: a importância das cores primárias, secundárias e terciárias. Como web designer, tu trabalhas com a teoria das cores todos os dias - seja inconscientemente ou conscientemente. Neste artigo, vou mostrar-te como usares os princípios e ferramentas corretos para criares boas combinações de cores para o teu próximo projecto web.

Teoria das cores: Porque é que às vezes é necessário uma reciclagem

Os primeiros registos da teoria da cor e do círculo monocromático datam pelo menos do início do século XVII. A origem das cores, o reflexo da luz, o processo no olho humano - tudo isto ocupa a humanidade há muito tempo.

Nós, designers, somos muitas vezes principalmente tipos visuais. A criação de combinações de cores vem muitas vezes da intuição. Vemos e analisamos constantemente as cores que nos rodeiam. Isto resulta numa forma intuitiva de lidar com as cores. 

No entanto, o conhecimento factual das cores e dos seus efeitos não é apenas indispensável para explicar a escolha e a disposição das cores. Também é importante para a tomada de decisões que se desviam da norma.

A fim de encontrares as melhores combinações de cores para os teus e tuas clientes e sites, é inevitável um conhecimento sólido da teoria da cor.

Em comparação com imprensa escrita, nós, enquanto designers de superfícies digitais, temos uma vantagem decisiva: quantas cores acabas por usar e quais os tons que tu decides não terem efeito sobre o custo do produto. No entanto, isto só se aplica enquanto o teu projeto permanecer digital.

Também não estás sujeito às limitações técnicas que temos com a imprensa escrita. Isto dá-te como designer a fantástica liberdade para te desenvolveres plenamente.

O círculo cromático, a temperatura e o cromatismo

O nossos ecrãs baseiam-se normalmente em RGB (Red, Green, Blue) - também conhecido como Additive Color System. Regra geral, qualquer coisa que reflita a luz é baseada neste Sistema de Cores Aditivas. Nesta estrutura, usamos as cores primárias como um ponto de partida. O branco é criado pela combinação de todas as cores, enquanto o preto aqui representa a ausência das cores.

Cores primárias, secundárias e terciárias

Vou explicar usando o exemplo de um simples círculo cromático: as cores primárias são amarelo, vermelho e azul. As cores secundárias são criadas quando se misturam cores primárias. As cores terciárias são criadas a partir de misturas que contêm cores primárias e secundárias.

Color theory in web design
O círculo cromático descreve e agrupa cores.

Matizes, tonalidades, sombras e cromatismo

Matiz, ou tom de cor, descreve as seis cores primárias e secundárias não misturadas:

  • A tonalidade descreve a coloração que ocorre quando se adiciona branco a uma cor.
  • A sombra usa o mesmo princípio que a tonalidade - mas aqui adicionamos preto.
  • O cromatismo, também chamado de saturação ou tom, é o que chamamos de mistura de tons de cinza ou cores neutras como branco e preto. Se seguirmos esta definição, então as sombras e tonalidades também pertencem ao cromatismo.

Temperatura e contraste

Color theory in web design
Temperatura e contraste de cores

Também podes classificar as cores em temperaturas. Aqui aplicam-se algumas regras de ouro:

As cores quentes parecem mais dominantes quando as emparelhas com cores frias. Desta forma, podes também transmitir a sensação de profundidade. As cores frias, como tal, parecem mais distantes do que as cores quentes. As cores de calor intenso também podem fazer as cores frias parecerem ainda mais frias.

Tanto o cinzento como os tons de cinza, branco e preto pertencem ao grupo das cores neutras. O bege e o castanho também são frequentemente atribuídos às cores neutras. Eu pessoalmente concordo apenas parcialmente com isto, porque um tom de cinza pode definitivamente parecer quente ou frio. Também tenho tendência a contar o bege e o castanho como tons quentes. As cores neutras são definidas para mim como branco e preto e todas as tonalidades de cinza no meio, às quais nenhuma outra cor foi adicionada.

As cores neutras parecem um pouco desinteressantes por si só, e é por isso que elas precisam de pelo menos uma cor para se destacarem. As exceções comprovam a regra aqui, pois existem alguns layouts minimalistas a preto e branco que passam bem sem qualquer outra cor. O castanho e o bege também se podem tornar muito apelativas enquanto cor dominante num desenho monocromático, por exemplo.

As cores primárias contrastam umas com as outras. Há ainda outra forma de criar contraste olhando para as cores que distam cerca de 3 campos de distância umas das outras no círculo cromático. Estes emparelhamentos podem facilmente criar desarmonia, porque se "mordem" uns aos outros. No entanto, usados corretamente, por exemplo, como uma "call-to-action", eles podem dar ao teu projeto um contraste interessante.

Oito princípios para a criação de paletas de cores harmoniosas

Cores complementares

Cores complementares são duas cores que são diretamente opostas, e são combinadas neste conceito, como no exemplo do Youtube Culture & Trends Report.

Color theory in web design
Cores complementares no círculo cromático

Duas cores complementares destacam-se uma da outra ao máximo. Isto cria um esquema de cores contrastantes, mas harmoniosas. Estes designs adequam-se a desenhos dinâmicos, que chamam a atenção. Por isso, deves ter certeza de que isto também reflete o produto que queres comunicar.

Combinação triangular

A combinação triangular descreve três cores que estão equidistantes umas das outras no círculo cromático.

Tal como as combinações anteriores, esta também é bastante simples e fácil de usar. Oferece mais diversidade, mas com ela estás do lado seguro. Dificilmente há uma composição harmoniosa a partir do princípio básico. Estas paletas de cores são particularmente adequadas a sites que visam atrair a uma vasta gama de utilizadores/as.

Deves ainda escolher uma cor que domine o design de forma a garantir um design claro e mais harmonia. O exemplo de Slaveryfootprint.org mostra isto.

Color theory in web design
A combinação triangular usando o exemplo de um site
Color theory in web design
A combinação triangular no círculo cromático

Cores complementares divididas

As cores complementares divididas descrevem um conceito semelhante às cores complementares. Aqui, apenas um lado se divide. Em vez da cor primária complementar, usas agora as cores terciárias circundantes. Esta paleta oferece mais possibilidades de combinação.

A adição de uma terceira cor ao esquema complementar dá um pouco mais de equilíbrio ao layout. Esta combinação é usada com bastante frequência na web. O esquema de cores não tem de ser tão alto como neste exemplo

A terceira cor é frequentemente usada por designers como cor de ênfase e usada muito moderadamente. Com este princípio podes dar aos teus sites um suave contraste.

Color theory in web design
Cores complementares divididas no círculo cromático
Color theory in web design
Cores complementares divididas num site

Combinação quadrada de cores

Semelhante ao conceito de três lados, a combinação quadrada de cores combina quatro cores. De todas as combinações apresentadas até agora, esta é a que é a mais difícil de dominar. 

Aqui, também, combinamos dois pares de cores complementares. No entanto, a sensibilidade é necessária aqui na distribuição da hierarquia. Neste site, o tom vermelho é usado com moderação para evitar que o vermelho domine as outras cores. Em vez disso, um azul frio e um bege neutro foram usados como cores dominantes.

Ao usar este princípio, certifica-te que usas cores quentes e frias de forma harmoniosa.

Color theory in web design
A combinação quadrada de cores no círculo cromático
Color theory in web design
Combinação quadrada de cores num site

Cores complementares divididas em quadrado

Consiste em duas cores adjacentes e suas cores complementares.

Com estas cores, podes criar uma paleta de cores que te dá o contraste apelativo de cores complementares ao mesmo tempo que é mais diversificada, como neste exemplo.

Analógico

As paletas de cores analógicas são duas ou mais cores que se encontram uma ao lado da outra no círculo cromático. As paletas de cores analógicas parecem menos contrastantes do que as composições anteriormente descritas, mas ainda assim não perdem o seu efeito. 

Para o teu site, é uma boa ideia elaborares uma hierarquia e usares as cores em conformidade. No exemplo abaixo, a Crips Studios foi escolhido o roxo como a cor mais dominante. Esta cor é então também a que define o ambiente do teu site.

Color theory in web design
Paletas de cores analógicas no círculo cromático
Color theory in web design
Paletas de cores analógicas num site

Monocromático

Monocromático descreve diferentes tons e/ou cromatismo da mesma cor. Esta é a forma mais simples de conseguir um esquema de cores harmonioso. Bem usado, pode ainda fazer a tua página destacar-se de outras páginas.

O uso de cores monocromáticas aumenta adicionalmente o impacto emocional da cor original e também cria elegância. Designs mínimos beneficiam de paletas de cores monocromáticas. Também deves saber que os sites monocromáticos são de baixo contraste.

Color theory in web design
Cores monocromáticas num site

Cor e tonalidade

A utilização de cores com valores de cromatismo ou tonalidade semelhantes. No exemplo de Bliss, a harmonia foi criada pelo uso constante de tons pastéis.

Color theory in web design
Cor e tonalidade são importantes no web design.

Inspiração e ferramentas online

Mais um clássico e ainda uma das minhas ferramentas favoritas para criar paletas de cores: Adobe Color Wheel.

Como nova funcionalidade, também podes verificar a tua seleção para ver se ela ainda será exibida com contraste suficiente para os/as utilizadores/as que sofrem de daltonismo.

  • Eggradients fornece uma gama de inspiração para os gradientes e os estilos CSS correspondentes.
  • Khroma é uma aplicação de navegação baseada em IA que aprende quais as cores que te dizem algo e cria combinações correspondentes. Definitivamente recomendado como rápida inspiração para cores e combinações.
  • Coolors é uma plataforma onde te podes inspirar e criar as tuas próprias paletas de cores. Também oferece extensões para o Chrome e Adobe.

Colourco funciona de forma semelhante ao Adobe Color Wheel. Podes definir o princípio segundo o qual a tua paleta de cores deve ser criada. Simplesmente passando o rato por cima podes então testar e criar combinações de cores. Podes fazer o download da tua seleção como Sass Stylesheet ou .png.

Color theory in web design

Além disso, https://emotivefeels.com/ oferece um site atraente para explorar diferentes cores e seus efeitos.

As tuas perguntas sobre a teoria das cores no web design

Quais são as tuas experiências com cores no web design? Tens perguntas para a Sonja? Escreve-nos um comentário! Queres ser informado/a sobre novos artigos da RAIDBOXES? Então segue-nos no Twitter, Facebook ou através da nossa newsletter.

Depois de estudar design de jogos e escrita criativa na verde Auckland, na Nova Zelândia, a Sonja especializou-se em design de web e aplicações e seu desenvolvimento. O seu foco é a gamificação e a exploração da motivação e experiência do utilizador, aliado à paixão e curiosidade pelas tendências tecnológicas.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.