Teoria das Cores no Design

Humberto Fortuna
Sep 5, 2018 · 5 min read

A teoria das cores é um conceito importantíssimo. É ele que estuda a influência de cada cor no comportamento do usuário por meio das sensações que desperta.

Conhecer esses significados é essencial para nós, designers.

Ao criar uma interface, é preciso estudar a paleta de cores com cuidado. Afinal, essas escolhas influenciarão diretamente no sucesso do projeto.

Por isso, preparamos este post com dicas e inspirações para que você entenda melhor como aplicar a teoria das cores. Vamos conferir?

https://www.pexels.com/photo/colors-palette-5933/

O circulo cromático

O Círculo Cromático é uma representação das 12 cores que o nosso olho pode perceber e reconhecer. Ele é representado, na forma de um círculo, com as cores distribuídas perfeitamente de tal maneira que geram diversas combinações, sejam ligando cores de lados opostos, cores lado a lado, etc.

Ilustração por Humberto Fortuna

Entenda a combinação das cores

O primeiro passo é entender que as combinações de cores não são meras coincidências. Outro ponto importante é o estudo dessas combinações entre cada matiz (cor), já que, em conjunto, elas podem trazer sensações diferentes.

Matiz é a característica que diferencia as cores, como vermelho, verde, amarelo…

A teoria das cores explica como é possível combinar matizes gerando contraste, similaridade e harmonia, analisando o círculo cromático. Para compreender melhor essas possibilidades, é preciso ter em mente alguns conceitos:

Cores Complementares

As cores complementares são aquelas que se encontram em lados opostos do círculo cromático. Sendo assim, alaranjado e azul são cores opostas, consequentemente são cores complementares. Assim como amarelo e roxo, verde e vermelho etc…

Interessante é escolher uma das cores como dominante, e a outra somente utilizada para alguns toques mais sutis, mas que se destacam também.

Cores complementares são indicadas para criar a sensação de força e equilíbrio, pois geram contraste.

Ilustração por Humberto Fortuna

Cores Análogas

São cores que se encontram lado a lado no círculo cromático. No caso abaixo, amarelo, alaranjado e alaranjado escuro são um exemplo de cores análogas. Um aspecto desta combinação é que as matizes são variações de uma cor básica em comum.

Essa combinação é usada para trazer a sensação de uniformidade, calma, tranquilidade e harmonia.

Ilustração por Humberto Fortuna

Cores Complementares Divididas

A combinação de cor complementar dividida é um pouco menos vibrante e “viva” que a combinação de cor análoga, ou complementar visto anteriormente. Ao invés de se escolher a cor complementar direta, escolhe-se as duas cores adjacentes. Ou seja, se escolhermos o alaranjado, as duas outras cores serão o azul claro à esquerda e o azul mais escuro à direita.

Ilustração por Humberto Fortuna

Quadrado Harmônico

A combinação de cor baseada no quadrado harmônico utiliza quatro cores que formam um quadrado dentro do círculo cromático. Trabalhar com 4 cores é um desafio, mas o resultado pode ser fenomenal!

É uma combinação de cor vibrante, pois se utiliza a união de dois pares de cores complementares.

Ilustração por Humberto Fortuna

Cores em Base ao Retângulo

A combinação de cor em base ao retângulo utiliza quatro cores, semelhante à descrita acima (Quadrado harmônico) . Porém forma-se um retângulo ao interno do círculo cromático.

Esta também é uma combinação de cor vibrante.

Ilustração por Humberto Fortuna

Tríade

Para um resultado mais arrojado, podemos utilizar a combinação de cores triádicas. Essa é formada por 3 cores equidistantes no círculo cromático formando um triângulo. No nosso exemplo verde, roxo e alaranjado.

Para definir o tipo de combinação que seu projeto receberá, é importante analisar as características da empresa, do mercado de atuação, e dos seus clientes.

Ilustração por Humberto Fortuna

Monocromática

Uma cor e seus diferentes tons, ou seja, uma cor com mais luminosidade ou mais “escurinha” (tom sobre tom). Não traz muito contraste, mas fica simples e elegante.

Ilustração por Humberto Fortuna

Inspire-se em apps conhecidos.

As cores influenciam diretamente a identidade do projeto, da marca e da interface. Ao analisá-los, é possível identificar o padrão cromático, utilizado durante a criação.



Faça parte do nosso Grupo do Facebook sobre UX Motion Design: https://www.facebook.com/groups/uxmotiondesign/


UX Motion Design

Conectando Interfaces e Movimento

Thanks to Felippe Silveira

Humberto Fortuna

Written by

Freelancer Motion Designer/3D based in Milan - Italy

UX Motion Design

Conectando Interfaces e Movimento

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade