Com que cor? parte 2

Quero focar este post na parte prática da coisa. E já que estou querendo ser objetivo, vou explicar uma de várias técnicas possíveis para a montagem de uma paleta de cores para uso em telas de computador (crt ou lcd, tanto faz), utilizando um software específico - o adobe photoshop. Digo para telas de computador porque esse procedimento não se aplica em trabalhos impressos ou para a TV (mas o conhecimento vale).

No post anterior, tentei mostrar como a cor é, na verdade, percepção de luz. Entendido isso,vou desmembrá-la em 3 partes:

1. matiz

2. saturação

3. luminosidade ou valor

Este modelo é conhecido como HSV - hue (matiz), saturation (saturação) e value (valor) - http://pt.wikipedia.org/wiki/HSV.

Com a manipulação destes valores, podemos montar paletas mais harmônicas sem pensar muito, quase como um software. Com isso, podemos atingir uma maior assertividade nas nossas escolhas para transmitir a mensagem ao receptor. Afinal, é isso que importa. E só para ajudar a esclarecer, isso é importante se o seu trabalho é desenhar interfaces que devem transmitir mensagens claras, como faz um designer que trabalha com comunicação. Experimentações artísticas ficam a cargo de artistas. Se você é designer e está sendo pago para criar peças de comunicação, não se iluda, a mensagem é o centro das atenções, não o autor e sua obra.

Mas voltando aos componentes da cor, vamos entender o que cada um faz:

1. MATIZ

Se colocarmos o espectro de luz percebível pelo olho humano em um disco, podemos classificar a matiz como o ângulo onde a cor se encronta nesse disco.

Cada ângulo do disco equivale a uma cor. Começa com o vermelho - ângulo 0 e assim vai até o 359º. Photoshop, Illustrator e a maioria dos softwares de ilustração possuem o recurso para trabalhar dessa forma (HSV).

2. SATURAÇÃO

Toscamente, vou chamar a saturação de quantidade de matiz da cor. Se pegarmos como exemplo o ângulo 0 do nosso disco, ou seja, o vermelho, podemos perceber que quanto menos saturação a cor possuir, menos vermelho ela tem, mas não deixa de ser vermelho, pois o ângulo não foi alterado.

Para exemplificar, vou montar um gradiente alterando apenas a saturação (do 0% ao 100%) e deixando a luminosidade em 100%.

0% de saturação > 100% de saturação (ângulo 0 e luminosidade 100%)

Agora vou pegar exatamente a mesma cor e o mesmo efeito de saturação, porém vou alterar a luminosidade:

0% de saturação > 100% de saturação (ângulo 0 e luminosidade 50%)

Nas duas imagens, percebemos nitidamente como o vermelho está completamente ausente no início do gradiente e como sua presença aumenta a medida que a saturação aumenta.

Nota: você percebeu que a cor rosa ou vinho não estavam presentes no nosso espectro de cores, mas que, com a manipulação de saturação e luminosidade a partir do vermelho (ângulo 0) mostradas nas imagens acima, conseguimos perceber estas duas cores.

3. LUMINOSIDADE (ou valor)

Essa é mais simples: é quantidade de luz/brilho. E o que acontece quando não temos luz? Temos o preto. E aqui é a mesma coisa. A manipulação desta propriedade é muito útil quando queremos trabalhar gradientes afim de representar volume nos objetos. Mantenha a matiz e a saturação sem alteração e o efeito de volume é construído apenas com a alteração de luz na cor.

H - 0º, S - 100%, V - 80%

H - 0º, S - 100%, V - 40%

E falando da parte prática mesmo, um resumo bem tranquilo para montar uma paleta seria o seguinte:

Através do levantamento das características do trabalho, primeiramente decidimos coisas como: como a cor predominante (caso precise ter uma) precisa ser: fria/quente, lúdico/adulto, luxo/simples, acolhedor/imparcial, vibrante/calmo, e por ai vai. Quanto mais informações conseguirmos definir a respeito do que precisamos comunicar, mais assertivos seremos (já falei disso antes). Por exemplo:

Uma peça para a web que vai vender um note sofisticado a preço baixo.

Eu defino que as principais características são:

- tecnologia

- futuro

- metal

- frio

- adulto

- sério

- luxo/caro

Cor predominante = azul

Consultando meu disco lá em cima, podemos ver que o azul pode estar inclinado para o verde ou para o anil/violeta. No caso dessa peça, não vou pender para nenhuma das duas cores, mas é importante mostrar podemos tornar a cor mais verde, diminuindo seu ângulo, ou mais anil, aumentando seu ângulo. Podemos fazer isso sutilmente ou não. É um baita controle.

Ok, escolhi a cor predominante, mas ainda não escolhi seu tom.

Chegou a hora de escolher a saturação e a luminosidade do meu azul. Vou diminuir um pouco a saturação para tornar a cor menos lúdica e mais séria. Também vou experimentar diminuir um pouco o brilho/luminosidade para buscar algo mais aveludado, mais luxuoso, mais caro.

H - 240º, S - 80%, V - 80%

Hummm, na real não gostei. Acho que este tom está pendendo demais para o anil/violeta. Vou experimentar diminuir o ângulo em 20 graus então:

H - 220º, S - 80%, V - 80%

Bom, gostei mais dessa. Agora vou criar algumas variações apenas de luminosidade nela para trabalhar os gradientes que usarei na peça.

Na parte mais escura, foi simples, apenas fui diminuindo do valor da luminosidade de 20 em 20 porcento. Para a parte mais clara, fiz a mesma coisa, porém acrescentando 20%. Mas se tu notares, na cor original, a luminosidade já tem 80%, e se colocar mais 20%, fica com 100%. Então como eu faço para continuar aumentanto a luminosidade. Tranquilo vivente, sempre que a luminosidade atingir 100%, comece a diminuir a saturação. Com a luminosidade em 100%, a luz já atingiu o máximo de brilho, então se diminuirmos a saturação, estamos diminuindo a quantidade de cor, e como cor é luz, então...

Buenas, mas lembra que essa peça tem uma informação muito importante e que precisa de um puta destaque? É a informação referente ao preço baixo. Então vamos fazer essa informação ganhar o maior destaque possível e a cor dessa informação deve nos ajudar nisso. Nesse caso, vou escolher o contraste com a cor completar, assim como poderia ser com quente/frio, com variações de saturação, de luminosidade, entre outras (vai outro post mais adiante apenas sobre contraste).

E qual a complementar desse meu azul? Só por curiosidade, vamos descobrir a complementar apenas subtraindo 180º do ângulo do meu azul o que seria feito assim: meu azul tem 220, menos 180, igual a 40. Eita, 40º é laranja. E não é que funciona. É a cor exatamente oposta no disco.

E aplicando as mesmas variações de luz, temos:

A última coisa para aplicar o contraste da melhor forma e que a informação em laranja tenha o maior destaque possível, vamos lembrar de colocar sempre forma contrária a luminosidade das cores: claro sobre escuro ou escuro sobre claro.

Uma forma de guiar a construção da peça pode ser feita assim:

É isso. Agora, para apresentar esse amontoado de cor de forma atraente e bonita é outra estória, e a sensibilidade estética do profissional conta muito nessas horas. Quebrar a lógica e ainda assim conseguir atingir os objetivos propostos pelo trabalho é possível, mas precisamos conhecer essas lógicas e quebrá-las quando vale a pena.

Para quem quer um excelente livro sobre cor: