Fale com a gente no WhatsApp Fale com a gente no WhatsApp
Fale com a gente no WhatsApp

Design

Você sabe como combinar cores?

Uma dúvida comum entre desenvolvedores, até mesmo dos que trabalham com front-end é: como combinar cores? Nesse artigo algumas técnicas que facilitam esse trabalho.

há 7 anos 7 meses

Formação UX/UI designer
Conheça a formação em detalhes

Olá, Web Developers!

Vamos falar de um assunto que assusta muitos programadores: combinação de cores. Alguns até “fogem” quando o assunto é criatividade, quando falamos da criação de um layout ou simplesmente quando se tem a necessidade de pensar em combinar cores.

Eu já vi casos em que o próprio programador teve que planejar o esquema de cores. Naturalmente o pessoal de front-end costuma ter uma noção melhor em relação aos de back-end nessa matéria, por terem mais contato com designers e arquitetos de informação.

Muitos acham que isso vem de um dom, uma habilidade especial quase que mutante nas pessoas que trabalham com isso. Mas acredite: qualquer coisa pode ser aprendida, e listarei aqui as técnicas utilizadas para se combinar cores. Depois disso você verá que é muito fácil.

C# (C Sharp) - ASP.NET MVC
Curso C# (C Sharp) - ASP.NET MVC
Conhecer o curso

Roda de cores

Roda de cores

Esta é a roda de cores ou círculo cromático, e vocês agora serão amigos! Ela é quem vai te ajudar a saber se uma cor combina com outra ou não.

Agora, tudo o que precisamos para selecionar cores é de certas formas geométricas. Sim, nós veremos como a matemática está relacionada com a harmonia na combinação das cores.

Há várias formas de se combinar cores, e tudo vai depender do que você precisa. Então vamos lá!

Monocromáticas

Roda de Cores

Essa é a mais fácil, pois a gente apenas seleciona uma única cor e alteramos seus tons. Mesmo sendo a regra mais fácil, é uma das mais difíceis de se trabalhar. Como é uma única cor, se não utilizada corretamente pode acabar cansando facilmente.

Por isso é mais recomendada para telas passageiras.

Roda de Cores

Análogas

Roda de Cores

São selecionadas três cores, uma ao lado da outra. Possui pouco contraste, já que são cores muito próximas. Podemos selecionar quatro cores, e então chamaremos de análogas compostas.

As cores análogas são frequentemente encontradas na natureza, o que nos passa uma sensação de harmonia quando encontramos sites com cores baseadas nessa regra.

Roda de Cores

Complementares

Roda de Cores

Cores complementares são aquelas que estão de lados opostos. Por causa disso, causam um grande contraste, já que teremos uma cor quente e uma fria.

Roda de Cores

Tríades ou trio harmônico

Roda de Cores

São cores que formam um triângulo equilátero. Você também pode utilizar outros tipos de triângulos e até mesmo retângulos, mas aí já deixa de se chamar tríade.

As cores dessa regra possuem uma harmonia bem contrastante e é sempre recomendado dar destaque a apenas uma das cores selecionadas, mantendo as demais apenas como cores secundárias.

Roda de Cores

Concluindo

Vimos então que há técnicas para se combinar cores. Não pense que é um dom que apenas algumas pessoas possuem.

Os exemplos mostrados apenas ilustram a combinação das cores. Na maioria das vezes as cores selecionadas serão usadas apenas como referência, como você pode notar nas fotos de exemplos. Apenas selecionamos as cores, mas as utilizadas possuem variações na saturação, matiz e sombra.

Há muitas outras formas de se combinar cores. As listadas acima são as mais comuns. E, claro, é importante também saber a teoria das cores para não sair criando paletas de cores que não fazem sentido para determinado cenário, por exemplo: uma festa infantil só com tons de cinza ou uma casa de repouso com vermelhos bem vivos.

Caso queira criar combinações, recomendo o Adobe Color.

Ele roda no navegador e não precisa de login. Lá você poderá escolher a regra de cores entre Análogo, Monocromático, Tríade, Complementar, Composto, Sombras e Personalizado.

Também há a possibilidade de você salvar a sua paleta de cores e navegar pelas criadas pelos outros usuários. Outra funcionalidade legal é a criação de uma paleta a partir de uma imagem.

E aí, o que achou? Já sabia combinar cores? Se não sabia, achou fácil? Compartilhe com a gente aí nos comentários!

Npm - Gerenciador de pacotes para JavaScript
Curso Npm - Gerenciador de pacotes para JavaScript
Conhecer o curso

Autor(a) do artigo

Akira Hanashiro
Akira Hanashiro

Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos.

Todos os artigos

Artigos relacionados Ver todos