4 - Paleta de Cores

Um outro item muito importante na pré-produção de muitas obras artísticas, incluindo games, é a boa definição de uma paleta de cores. O termo refere-se a um conjunto primário das cores escolhidas para a imagem final. A grade de cores deve transmitir, em sua composição, o efeito adequado às intenções da obra. Para nos aprofundarmos nesses efeitos, devemos falar um pouco sobre a Teoria das Cores.

4.1 - Atributos das cores

Vamos começar com uma pergunta difícil! Olhe a seguinte figura e responda: quais são as cores das bolas?

E aí? Eu respondi amarelo para as duas! De acordo com minha esposa, a da esquerda é Amarelo Verão Quente, e a da direita é Amarelo Bebê Vagalume ou Areia. E agora, José?

O problema talvez seja na forma como a gente define o que é uma cor, então vamos quebrar os elementos que compõem uma cor! O primeiro e principal é a matiz (hue). Uma cor pode ter uma matiz amarela, vermelha, verde, etc…. Pro povo que tá rindo, hue é matiz em inglês viu, não é risadinha da zoeira coisa nenhuma!

Só que uma cor não tem apenas a matiz como propriedade: ela também possui outros elementos que a definem. Por exemplo, em cima nós temos duas cores com matiz amarela. Só que a da direita tá meio “apagada”, como se já tivesse sido lavada umas 15 vezes na máquina. Essa noção de que a cor está forte (viva, vibrante) ou fraca (apagada) está ligada ao conceito de saturação da cor. Uma cor saturada é mais forte, enquanto uma cor menos saturada é mais fraca. Pense assim: quanto mais saturada a cor, mais pura ela é. Na medida que ela vai perdendo saturação, ela vai perdendo tons da própria cor e ficando com uma matiz mais pálida. Ou seja: um vermelho mais saturado possui mais pigmentos vermelhos e menos pigmentos cinzas do que um vermelho menos saturado.

Mas nem sempre a mudança de uma cor se dá devido a saturação. Veja o exemplo abaixo:

Ah, aqui é moleza professor... o da direita está mais saturado do que o da esquerda…

Seria bastante lógico, não? Mas o pessoal de artes não faz parte do povo da lógica. E a cor da direita não está mais saturada do que a da esquerda. Dizemos na verdade que a cor da direita está com um brilho, ou valor, menor do que a da esquerda. O valor de uma cor se refere ao quão claro ou escuro a matiz de uma cor fica. Ele não é relacionado à saturação, mas sim ao quanto o olho consegue perceber de luz sobre uma determinada cor. O valor normalmente se altera quando ocorre adição de componentes brancos ou pretos à cor, mudando sua tonalidade.

A figura abaixo apresenta uma ilustração de como esses elementos se relacionam em termos de cores.

4.2 - Teoria das Cores

Como vocês podem ver, a cor é bem mais do que a tonalidade. Eu sei, eu sei, vocês vão continuar chamando tudo de amarelo. Mas agora vocês sabem que uma cor é composta por mais de um atributo, e a variação (e combinação) deles permite-nos obter um esquema de cores de grande variedade!

Normalmente, quando trabalhamos com cores, utilizamos um sistema de cores específico, do qual nós derivamos as combinações possíveis. Existe toda uma parte de física de cores que nós poderíamos aprofundar para deixar a prova difícil, mas não vamos fazer isso. Vamos só especificar alguns pontos básicos: a luz é uma onda, que refletida em um objeto, pode ou não ter suas propriedades alteradas (comprimento de onda, frequência). Uma cor nada mais é do que como nossos olhos e cérebro interpretam a luz refletida em diferentes comprimentos de onda e frequência. A cor branca é uma luz refletida completamente, a cor preta é uma luz que foi totalmente absorvida (logo, não refletiu!). Todas as outras cores representam um grau de o quanto a luz foi absorvida ou não.

Nossa, que física mal explicada! Mas acho que já dá pro gasto para o que vamos ver em seguida.

Existem vários padrões de representação de cores, baseados em teorias distintas e que são utilizados de acordo com a aplicação em questão. Quando pintamos ou imprimimos documentos, usamos sistemas de cores subtrativos, ou seja, combinamos duas ou mais cores, e a cor resultante será determinada pelo comprimento e frequência da onda que será refletida por essa nova cor. Na nova cor, normalmente são retirados espectros de cor do feixe de luz, por isso dizemos que ele é subtrativo.

Esse é o processo mais natural de mistura de cores, e os sistemas mais emblemáticos são as paletas de cores do pessoal da pintura e o sistema RYB (Red, Yellow e Blue), ou o da impressora com o CYMK (Cyan, Yellow, Magenta e Key – Ciano, Amarelo, Magenta e Preto). Quando dizemos que o sistema é RYB, dizemos que vermelho, amarelo e azul são suas cores primárias. Cores primárias são as cores base a partir das quais serão formadas todas as outras cores. Então quando quisermos formar a cor verde, misturamos azul e amarelo, por exemplo. As cores secundárias são formadas pela combinação de duas cores primárias, e as cores terciárias são formadas pela combinação de uma cor secundária com uma cor primária.

Já os nossos monitores, por exemplo, operam com o sistema de cores RGB (Red, Green and Blue), em que as cores vermelho, azul e verde são as cores primárias. O sistema RGB é conhecido como um sistema de cor aditivo, ou seja, as cores são formadas pela soma ou adição de comprimentos de onda diferentes. Basicamente, você vai somar as duas luzes e ver que feixes vão dar. Isso é o inverso do processo natural, em que a combinação de cores vem da absorção de luz, e esse sistema normalmente é utilizado quando a fonte da cor emite a luz (o caso dos nossos monitores ou TVs). Como ele trabalha emitindo a luz, e não refletindo o que recebe do ambiente, a composição das cores é formada pelos feixes que o próprio dispositivo emite.

Caraca, que coisa doida! Eu tenho de virar mestre desses sistemas de cores? Não, entendendo apenas que existe diferença entre eles e que cada um tem seu caso de uso, estamos tranquilos! Agora vamos falar de uma ferramenta importante quando estamos falando de definir cores para a nossa vida: o círculo de fogo cores!

Que lindo, merece um meme!

Esse círculo colorido aí de cima que parece a roleta dos programas do Sílvio Santos é, na verdade, uma poderosa ferramenta utilizada por equipes de arte visual mundo afora! Ele basicamente nos auxilia a escolher cores que combinam ou tem um bom contraste, e dão uma vida diferente para a identidade visual do nosso projeto!

Normalmente recorremos ao círculo de cores quando vamos definir a paleta ou esquema de cores que serão utilizados para uma determinada interface ou projeto. Os esquemas tradicionais são:

• Monocromático: escolhe-se apenas uma tonalidade de cor, e utiliza-se variações dela com relação aos outros atributos, como saturação e valor. Abaixo um exemplo de paleta monocromática no tom vermelho.

  Figura 25 - Uma paleta de cores monocromática é focada na variação de cores dentro de uma mesma matiz. Em a) vemos uma paleta de cores baseada na matiz vermelha. Em b), Limbo, um jogo com padrão de cor monocromático

  Fonte: a) WIKIMEDIA. Disponível em: <https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/CPT-Websites-monochrome.svg/1200px-CPT-Websites-monochrome.svg.png>. Acesso em: 07 abr. 2018. b) Disponível em: <https://lh3.ggpht.com/KHesJQ7KbKBN12F6EeYMeErrL-Ob9phQGfrLuxQBtxC5qJ1Di-N-hGOPLpsLYXpPhJw=h310>. Acesso em: 07 abr. 2018.
• Análogo: um sistema em que você escolhe três cores vizinhas no círculo de cores, e utiliza variações delas para criar sua paleta de cores.

  

• Complementar: utilizam-se duas cores que estão em posições opostas do círculo para criar imagens com contraste interessante. Muito utilizado na indústria!

  Figura 27 - Exemplo de esquema de cores complementar. Em a), a seleção das cores a partir do círculo, e, em b), sua aplicação no jogo Mass Effect

  Fonte: a) KATE CASE. Disponível em: <https://katenyhomestager.files.wordpress.com/2013/04/complementarycolorwheel.jpg>. Acesso em: 03 abr. 2018. b) CBS INTERACTIVE. Disponível em: <https://static.gamespot.com/uploads/scale_medium/1197/11970954/2448234-2217301-mass_effect.jpg>. Acesso em: 02 abr. 2018.
• Complementar decomposta: escolhe-se uma cor de base, e utiliza-se cores vizinhas à cor complementar.

  

• Tríade: assim como a divisão complementar utiliza três cores, porém sua seleção será feita com relação a distância entre elas dentro do círculo. A ideia é escolher três pontos equidistantes, ou seja, com a mesma distância entre eles.

  

• Tetrádico ou Duplo Complementar: Utiliza dois conjuntos de cores complementares para compor o esquema de cores.

  

Esses são alguns dos esquemas clássicos que existem. Você precisa obrigatoriamente seguir um deles? Não! Você pode sim escolher seu próprio conjunto de cores. Você também pode combinar vários esquemas diferentes para partes distintas do seu projeto. Vale-tudo!

A figura abaixo apresenta um resumão de várias coisas que a gente falou aqui! Dê uma olhada nela com carinho. :)