Teoria das Cores para Jogos: Matiz, Saturação e Valor

Teoria das cores, para quem faz jogo, se resume a três controles: matiz (qual cor), saturação (quão intensa) e valor (quão clara ou escura). O matiz cria o clima, a saturação decide onde o olho vai e o valor decide se o jogador consegue ler a cena. Quase todo problema de "a arte está bonita mas o jogo é confuso" vem de usar esses três controles para a coisa errada.

Este guia explica cada um com exemplos de jogo: por que o personagem precisa de valor diferente do fundo, como usar cores complementares para destacar o que é interativo, onde gastar saturação e como aplicar tudo isso no Krita com o seletor de cor e os filtros certos.

Teoria das cores: matiz, saturação e valor

Toda cor que você escolhe no programa tem esses três números, mesmo que o seletor mostre outra coisa.

Matiz (hue). É a família da cor: vermelho, laranja, amarelo, verde, azul, roxo. No seletor, é a posição em volta do círculo, de 0 a 360 graus. O matiz carrega associação: tons quentes (vermelho, laranja, amarelo) costumam ler como próximos e ativos, tons frios (azul, verde-azulado, roxo) como distantes e calmos.

Saturação. É a pureza da cor. Saturação zero é cinza. Saturação máxima é a cor mais pura que a tela consegue mostrar. Cores saturadas puxam o olho. Cores dessaturadas recuam.

Valor (ou brilho, luminosidade). É o quanto a cor é clara ou escura. É o controle mais importante para jogo, e o mais ignorado. O olho humano separa formas principalmente por diferença de claro e escuro, não por diferença de matiz. Uma cena com valores bem separados lê bem até em preto e branco. Uma cena com tudo no mesmo valor vira uma massa, por mais coloridas que as partes sejam.

Um jeito rápido de sentir isso: pegue um vermelho e um verde de mesmo valor e coloque lado a lado. Eles parecem bem diferentes. Agora dessature a imagem. Os dois viram o mesmo cinza. O post sobre valor tonal e o teste em preto e branco aprofunda esse teste aplicado a uma cena de jogo inteira.

Círculo cromático e as harmonias que importam em jogo

O círculo cromático organiza os matizes em volta de um anel. As harmonias são padrões de escolha nesse anel. Para jogo, três bastam:

• Análoga. Cores vizinhas no círculo, como verde, verde-azulado e azul. Dá unidade e clima. Boa para cenário, porque nada briga com nada. Uma floresta inteira pode viver numa faixa análoga.
• Complementar. Duas cores opostas, como azul e laranja. Dá o contraste mais forte de matiz. Boa para separar duas coisas: personagem e cenário, time A e time B, perigo e segurança.
• Complementar dividida. Uma cor e as duas vizinhas da complementar dela, como azul com amarelo-laranja e vermelho-laranja. Mantém contraste com menos agressividade e dá mais variedade ao destaque.

A harmonia triádica (três cores equidistantes) aparece muito em tutorial, mas em jogo costuma resultar em três cores disputando atenção. Use com saturação controlada, com uma das três dominante.

A forma prática de usar: escolha a harmonia para o jogo inteiro ou para cada fase, e anote. O guia sobre paleta de cores para jogos mostra como transformar essa escolha em uma paleta fechada e travar ela no projeto.

Cores complementares para destacar o que é interativo

O jogador precisa saber, sem pensar, o que pode pegar, empurrar, quebrar e o que é só decoração. Cor é uma das ferramentas mais rápidas para isso.

A receita:

1. Defina a família do cenário. Por exemplo, uma caverna em azuis e roxos, dessaturados.
2. Reserve o complementar para o interativo. Moedas, alavancas, baús e portas abertas em laranja e amarelo. Nada no cenário usa essa família.
3. Mantenha a regra o jogo inteiro. Se laranja é "pode usar" na fase 1, laranja não pode virar decoração na fase 4.

Funciona porque o olho percebe o contraste complementar antes de ler a forma. E porque a regra vira aprendizado: depois de 5 minutos, o jogador procura laranja sem você explicar.

Um cuidado importante: o complementar sozinho não basta. Vermelho e verde são complementares e são justamente o par que mais confunde quem tem daltonismo. Por isso o destaque também precisa de diferença de valor e, quando possível, de forma ou ícone. Valor é o que segura a leitura quando o matiz falha.

Valor manda na leitura, matiz manda no clima

Esta é a regra que resolve a maioria das cenas: use o valor para separar planos e o matiz para dar clima.

Na prática, uma cena de plataforma tem três faixas de valor:

• Fundo. Valor médio, pouco contraste interno. Pode ser claro (céu de dia) ou escuro (caverna), mas sem extremos.
• Chão e plataformas jogáveis. Faixa própria, com contraste claro com o fundo.
• Personagem, inimigos e itens. O maior contraste da tela, com os pontos mais claros e mais escuros reservados para eles.

O matiz pode ser o mesmo nas três faixas. Uma fase inteira em azul lê bem se o valor estiver separado. A mesma fase em sete matizes diferentes, todos de valor médio, vira confusão.

Isso explica por que trocar só a cor de um personagem que "some no fundo" quase nunca resolve: o problema não é matiz, é valor parecido.

Entender matiz, saturação e valor numa ilustração é uma coisa. Aplicar isso num jogo inteiro, com dezenas de sprites, várias fases e a mesma regra de cor valendo do menu ao chefe final, é onde muita gente que estuda sozinha perde o controle e cada asset sai de um jeito. Um curso de arte 2D para jogos organiza essas decisões numa ordem que se repete em todo projeto.

Saturação: onde gastar e onde economizar

Saturação é atenção. Pense nela como orçamento: se tudo é saturado, nada se destaca e a tela cansa em poucos minutos.

Onde gastar:

• Personagem do jogador e o que ele pode usar.
• Efeitos de feedback: dano, cura, coleta, explosão.
• Interface que precisa de ação imediata, como a barra de vida baixa.

Onde economizar:

• Fundo e planos distantes. Quanto mais longe, menos saturado.
• Áreas grandes de chão e parede. Uma parede saturada ocupa metade da tela e vira ruído.
• Sombras. Sombra muito saturada parece neon.

Uma regra que ajuda: a cor mais saturada da cena deve ocupar a menor área. Uma moeda pequena pode ser amarelo puro. Um céu inteiro não.

Aplicando no Krita: seletor HSV e filtros

O Krita tem as ferramentas para trabalhar cada controle separado.

Advanced Color Selector. Abra em Settings > Dockers > Advanced Color Selector. Nas configurações do docker, você escolhe o modelo de cor da forma do seletor entre HSV, HSL, HSI e HSY'. Para pensar em valor, o HSY' é o mais útil, porque o Y' acompanha melhor o quanto a cor parece clara para o olho. Em HSV, um amarelo puro e um azul puro têm o mesmo V, mas o amarelo parece muito mais claro.

Desaturate (Ctrl+Shift+U). Fica em Filter > Adjust > Desaturate. Aplicar direto destrói a cor, então use como camada de filtro: no docker de camadas, clique na seta ao lado do botão de nova camada, escolha Filter Layer, selecione Desaturate e deixe essa camada no topo da pilha. Ligue e desligue para conferir o valor da cena sem mexer na pintura.

HSV/HSL Adjustment (Ctrl+U). Em Filter > Adjust. Serve para corrigir em bloco: baixar a saturação de todo o fundo, deslocar o matiz de uma camada inteira para a família certa ou escurecer um plano sem repintar.

Modo de camada Color. Uma camada em modo Color (procure na lista de modos de mistura, entre os modos de matiz e saturação) troca o matiz e a saturação de baixo mantendo o valor. Bom para testar outra cor de clima numa cena pronta sem perder a leitura.

Fluxo sugerido: pinte em escala de cinza ou com a camada de Desaturate ligada até a leitura funcionar, depois coloque cor por cima com modos de camada e ajuste de HSV.

Erros comuns: tudo saturado e preto puro na sombra

Tudo saturado. O personagem não se destaca, os itens não se destacam, a tela cansa. Correção: escolha os 10% da tela que merecem saturação e dessature o resto.

Preto puro na sombra. Sombra em preto (ou cinza neutro) deixa a cor suja e achata o volume. Correção: sombra com matiz, normalmente puxando para frio e um pouco menos saturada que a cor base. A mesma lógica vale para o pixel art, com rampas de cor que mudam o matiz ao escurecer, como mostra o guia de paleta de cores para pixel art.

Separar planos só pelo matiz. Personagem verde num fundo vermelho de mesmo valor parece contrastado e some em tela pequena. Correção: confira com a camada de Desaturate e ajuste o valor.

Branco puro em área grande. Branco puro é o valor mais alto possível. Usado em área grande, ele rouba o foco do personagem. Correção: reserve o branco puro para brilho e destaque pequeno.

Trocar a paleta inteira a cada fase. Variar o clima por fase é ótimo, mas se a cor do interativo muda, o jogador reaprende tudo. Correção: mude o matiz do cenário e mantenha fixa a família do que é jogável.

Próximo passo

Pegue uma captura do seu jogo ou de um jogo que você gosta e faça três testes no Krita: camada de Desaturate para ver o valor, HSV Adjustment baixando a saturação do fundo em 30% e uma camada em modo Color trocando o matiz do cenário para a família complementar do personagem. Compare as versões e anote qual mudança melhorou mais a leitura. Na maioria das cenas, a resposta é o valor.