Como criar uma linda paleta de cores

Apesar de a seleção de boas cores ser uma arte, existem vários truques para simplificar a escolha de uma cor bonita. Este artigo consiste em duas partes: na primeira, vou lhe dizer o que torna a paleta boa, e na segunda, derivarei uma fórmula que pode ser usada para selecionar uma paleta bonita.

Nota: esta é longe de ser a única maneira de escolher boas cores, mas um conjunto de heurísticas que eu dominei por conta própria. Espero que isso ajude a encontrar as cores certas para o seu site / aplicativo / jogo.

Paletas de cores e contraste

Primeiro, precisamos dizer que as cores não existem isoladamente. Quando falamos de uma cor bonita, isso não significa que ela seja clara ou escura, saturada ou desbotada. Quando falamos em correspondência de cores, devemos pensar não tanto em cores individuais, mas em conjuntos de cores ou paletas de cores.


Da esquerda para a direita: Super Mario Run, Monument Valley, Alto's Odyssey, Lara Croft Go

Quando pensamos em conjuntos de cores, devemos pensar em sua interação: alguns deles devem se destacar ou se misturar? Isso é chamado de contraste.

O processo de escolha de cores bonitas geralmente se resume à escolha dos contrastes certos para o seu design.

A beleza das flores depende de como elas funcionam umas com as outras no seu design. Mas quando se trata do contraste de cores, mas pode ser formado de várias maneiras:

Brilho (claro / escuro)

O brilho é um tipo de contraste fácil de visualizar. No seletor de cores HSB, isso corresponde ao movimento ao longo do eixo vertical:


Brilho

No caso geral, podemos simplesmente aumentar o contraste entre as duas cores, simplesmente aumentando a diferença de brilho.


Contraste de brilho

Embora seja fácil de fazer, não é suficiente criar paletas de qualidade. As cores variam apenas em magnitude de preto e branco e simplesmente não são tão interessantes quanto as cores que interagem em mais dimensões. O que nos leva a ...

Contraste tonal

Percebemos o contraste tonal em termos de tons de cores e níveis de saturação. Quase como no caso do brilho, um aumento na diferença de matiz ou saturação geralmente aumenta a quantidade de contraste entre as cores.


Contraste da sombra


Saturação (eixo horizontal do HSB) e contraste de saturação

Mas, mesmo assim, esses valores por si só não podem pintar o quadro todo. Ainda podemos escolher cores que, apesar das diferenças de matiz ou saturação, ainda têm pouco contraste.


Tons diferentes e pouco contraste


Saturação diferente e baixo contraste

O que está acontecendo aqui? A resposta é que tons diferentes têm valores tonais internos diferentes. É difícil para muitas pessoas (inclusive eu) imaginar que valores tonais podem assumir diferentes tonalidades. E isso nos leva ao meu truque favorito ...

Corte em escala de cinza

Se você exibir as cores em tons de cinza, o brilho do cinza resultante poderá servir como um bom indicador do valor de tons de cores diferentes. Mas é útil não apenas para isso: é importante se você criar um design levando em consideração as necessidades das pessoas com deficiência. Essa é uma maneira simples de visualizar a quantidade de contraste existente em um design, independentemente do tom.


Valores tonais internos para diferentes tons

Vamos ver como esses valores tonais se parecem no seletor de cores HSB. Observe também como as alterações nos valores tonais mudam no espectro para cada matiz (mostrado na coluna mais à direita):


Se olharmos para os exemplos anteriores, mas agora em tons de cinza, será muito mais fácil dizer quais cores têm alto e baixo contraste.


Contraste de saturação: alto contraste acima, baixo contraste abaixo.


Contraste da sombra: alto contraste acima, baixo contraste abaixo.

Vamos dar uma olhada nos jogos mostrados acima, mas agora em escala de cinza.


Você pode notar facilmente que o primeiro plano se destaca claramente no plano de fundo, os elementos interativos contrastam fortemente com os não interativos e que, se o jogo estivesse em escala de cinza, continuaria reproduzível. A conclusão mais importante disso:

Use o hack em escala de cinza com frequência e intencionalmente para visualizar os contrastes que existem no seu design.

Belos contrastes levam à criação de lindas paletas de cores, então apresento a vocês ...

Fórmula para escolher belas paletas de cores

Vamos aplicar a análise acima, mas na ordem inversa: comece com o desenho em escala de cinza e depois prossiga para a seleção das cores apropriadas.

1: Determine onde precisamos de contraste

Crie o quadro do seu design e decida em quais áreas do quadro você precisa de mais contraste e em quais menos.

2: Colorir o design em tons de cinza

Tente colorir o quadro de desenho apenas em tons de cinza. Faça com que as áreas que exigem mais contraste tenham a maior diferença de brilho. Esta etapa deve ser realizada na resolução final do design. Pequenos elementos de design (por exemplo, logotipos e ícones de aplicativos) requerem um contraste particularmente alto para destacar pequenos elementos.

3: Escolha cores básicas

Escolha os tons básicos de cores com os quais deseja trabalhar. Esta é uma etapa subjetiva e você pode usar ferramentas como o Pigmento da ShapeFactory ou o Adobe Color CC para selecioná-lo. Curiosidade: algumas combinações de cores são tão populares que obtiveram o status de uma trilha .

4: ajuste as cores para que tenham valores tonais apropriados

Depois de selecionar os matizes, encontre o intervalo dos valores tonais nos quais o matiz corresponde aproximadamente ao valor do tom cinza do esboço desenhado anteriormente. Ao experimentar o brilho e a saturação, alterne entre os modos de cor real e escala de cinza. Sua tarefa é obter uma paleta de cores que, quando exibida em tons, corresponda ao design da etapa 2.

Exemplo 1


(1) Quadro e (2) contraste preferido em escala de cinza


(3) Cores base selecionadas

Se quiséssemos chegar à paleta de cores mostrada acima, teríamos que descobrir quais áreas de cada cor correspondem aproximadamente ao design em escala de cinza.


Intervalos de tons correspondentes para cores de base

Agora podemos selecionar combinações de cores de qualquer parte dessas áreas:


(4) Várias opções de paleta de cores

Exemplo 2

Aqui está a aparência desse processo ao desenvolver meu aplicativo Overlink:


Processo da esquerda para a direita, de cima para baixo: estrutura de arame, escala de cinza, cores básicas, design final

Parabéns! Espero que isso ajude você a escolher conjuntos de cores que contrastem onde você precisa, misturam onde você não precisa e, em geral, ficam lindos.

O contraste por si só não é o aspecto mais crucial para criar um ótimo design, mas desempenha um papel importante na escolha de paletas bonitas.