Color é o meio mais relativo na arte
-Josef Albers
Todos nós percebemos a luz e a cor de forma diferente. O que você vê como vermelho é diferente do que eu vejo como vermelho, embora nós dois o chamemos de vermelho. Como a cor nos afeta e como reagimos a ela também é diferente para cada um de nós. A cor é relativa.
Um bom design deve funcionar na ausência de cor. Deve funcionar quando visto em escala de cinza. No entanto, a cor é uma das primeiras coisas que alguém irá notar no seu design e irá determinar se os seus espectadores acham o seu design esteticamente agradável.
Como tudo o resto a sua escolha em cor deve estar subordinada ao seu conceito e tema. A cor deve ser usada para melhorar seu design, mas não deve ser seu design.
Você pode usar a cor para criar hierarquias visuais e melhorar o equilíbrio geral em seus designs.
Tal pode ser dito sobre a cor. Muito mais do que pode ser dito em um único post. Como eu planejei este post, eu tenho ido e voltado sobre se devo manter um único post ou expandi-lo em vários posts a fim de cobrir mais. No final eu decidi dividir esta conversa sobre cor em dois posts.
Este primeiro vai focar na teoria da cor, sistemas de cor, a roda de cores, e esquemas de cores. Da próxima vez vamos passar para o significado de cor e pensamentos sobre como você pode usar a cor para melhorar seus designs.
Color Theory
Color is light. A luz é radiação eletromagnética e sobre uma gama de comprimentos de onda ela causa uma impressão no olho humano. Este intervalo de comprimentos de onda é o espectro visual.
Quando a luz atinge um objeto alguns comprimentos de onda são absorvidos e outros são refletidos. Nós vemos os comprimentos de onda refletidos da luz como cor. Quando todos os comprimentos de onda no espectro visual são absorvidos, vemos o preto e quando todos são refletidos, vemos o branco. Quando alguns são absorvidos e outros refletidos vemos diferentes cores do espectro.
Cor pode ser descrito de três maneiras. Pelo nome, pela pureza, e pelo valor ou leveza. Temos vários termos para nos ajudar a descrever as cores de três maneiras. Ao ler os termos abaixo, volte à imagem acima.
- Tonalidade: Quando alguém está a falar da tonalidade, está a falar da cor real de um objecto. O verde é uma tonalidade como o vermelho, amarelo, azul, roxo, etc.
- Chroma: Refere-se à pureza de uma tonalidade em relação ao cinzento. Quando não há nenhuma tonalidade de cinza em uma cor essa cor tem um alto croma. Adicionar tons de cinza a uma tonalidade reduz o seu croma.
- Saturação: é o grau de pureza de uma tonalidade. É semelhante ao cromado, embora não seja bem a mesma coisa. As tonalidades puras são altamente saturadas. Quando cinza é adicionado a cor se torna dessaturada.
- Intensidade: O brilho ou o tom baço de uma cor. Adicionar branco ou preto a uma cor diminui a sua intensidade. Uma cor intensa e altamente saturada tem um alto croma.
- Valor/Luminosidade: É uma medida da quantidade de luz reflectida de uma cor e é basicamente o quão clara ou escura é uma tonalidade. Adicionar branco a uma tonalidade torna-a mais clara e aumenta o seu valor ou luminância. Consequentemente, adicionar preto torna-o mais escuro e baixa o valor ou a luminância.
- Sombra: O resultado de adicionar preto a uma tonalidade para produzir uma tonalidade mais escura
- Tonalidade: O resultado de adicionar branco a uma tonalidade para produzir uma tonalidade mais clara
- Tonalidade: Entre o preto e o branco temos o cinzento. Uma tonalidade de cor é o resultado da adição de cinza a uma tonalidade. Tonalidades e tonalidades são tons nos extremos.
Quando eu encontrei a relação de todos os tons o resultado deve ser uma harmonia viva de todos os tons, uma harmonia não muito diferente da de uma composição musical.
-Henri Matisse
Sistemas de cor
Sistemas de cor referem-se a como nós produzimos cores. Ao produzir cores físicas como na tinta é usado um sistema subtractivo e ao produzir cores digitalmente como num computador é usado um sistema aditivo.
As cores que vê na tela do seu computador podem não acabar sendo as mesmas cores que as outras vêem nas telas dos seus computadores. As diferenças podem ser ainda mais pronunciadas se as suas imagens acabarem em impressão. O gerenciamento de cores pode ajudar a tornar as coisas mais consistentes, mas entenda que provavelmente sempre haverá algumas diferenças.
Cores Subtrativas (CMYK) Quando vemos cores em objetos físicos estamos vendo luz reflexiva. Quando vemos vermelho é porque todos os outros comprimentos de onda de luz foram absorvidos e apenas o vermelho é reflectido. Este é um sistema subtractivo, porque para produzir cor estamos a remover todos os comprimentos de onda de luz que não queremos ver.
Como adicionamos mais cores ao sistema mais luz é absorvida e a cor geral fica mais escura. Sistemas subtrativos começam com branco e continuam a adicionar cor até que o resultado seja preto.
CMYK (Cyan, Magenta, Yellow, Black) é um sistema subtrativo usado para criar cores para impressão.
Additive Colors (RGB) Para criar cores em uma tela de computador temos que adicionar luz uma vez que a fonte de luz vem de dentro ao invés de refletir a luz que vem de fora do sistema. Quando não há luz vemos preto e à medida que adicionamos mais cor (mais comprimentos de onda de luz) nos movemos em direção ao branco.
RGB (Red, Green, Blue) é um sistema aditivo usado para criar cores em mídia digital. Porque os sistemas aditivos são diferentes de como percebemos a cor na natureza, nossas cores primárias mudaram. Verde (e não amarelo) é agora primário para o sistema em vez de ser um produto secundário de azul e amarelo.
A roda de cores
A roda de cores é uma representação visual de quase tudo o que falamos acima. A roda de cor original é creditada a Sir Isaac Newton que juntou as extremidades vermelha e violeta do espectro visual num círculo.
Nas imagens seguintes você pode ver como uma roda de cor é criada. Você começa com as cores primárias localizadas nos cantos de um triângulo equilátero e depois define um triângulo similar rodando 180 graus para criar as cores secundárias. Entre estas cores estarão as cores terciárias.
Notem nas imagens abaixo que as três cores primárias aqui são vermelho, amarelo e azul.
Agora olhe para a roda de cores abaixo. Você vai notar que ela parece diferente da acima. As cores primárias aqui são vermelho, verde e azul e você também vai notar que ela mostra várias tonalidades de cores até chegar ao branco no centro. Esta é uma roda de cores RGB de tonalidades.
Você também pode encontrar rodas de cores que mostram tonalidades e tons. Na verdade, há uma variedade de rodas de cor e triângulos de cor. Lembre-se que uma roda de cor é apenas uma representação da cor e existem diferentes maneiras de expressar as relações de cor.
Color Schemes
Color Schemes saem da roda de cor e os diferentes esquemas de cor são diferentes combinações de cores baseadas na sua relação entre si.
Nas imagens abaixo eu baixei a saturação de todas as cores exceto aquelas que podem fazer parte do tipo de esquema de cores sendo descrito.
Esquemas de cores monocromáticos são baseados em diferentes tons da mesma cor. Aqui as tonalidades de vermelho do mostrado.
Esquemas de cores analógicos são baseados em cores adjacentes umas às outras na roda de cores
Esquemas de cores complementares são baseados em cores opostas umas às outras na roda de cores
>
>
Esquemas de cores triádicas usam três cores igualmente espaçadas ao redor da roda de cores
Esquemas de cor tétradic/Quadratic são criados escolhendo cores nos cantos de um retângulo inscrito na roda de cor
Split Os esquemas de cores complementares são criados escolhendo uma cor e depois mais duas cores que são adjacentes ao complemento da cor inicial. Pense nisso como uma combinação de um esquema de cores complementar e análogo.
Adicionalmente existem esquemas de cores não inteiramente descritos pela roda de cores.
Esquemas de cores neutras incluem apenas cores não encontradas na roda de cores (vários tons de marrom e cinza)
Esquemas de cores neutras acedidas incluem cores neutras como acima e um ou mais salpicos de cores encontrados na roda de cores.
Um último tipo de esquema de cores que podemos falar são aquelas encontradas na natureza. Como você pode adivinhar são esquemas de cores baseados no que você vê ocorrendo na natureza. Você pode criar um esquema de cor natural baseado nas cores que você encontra em uma fotografia.
Sumário
Este post tem focado na teoria por trás da cor, mas há muito mais a cobrir, como o significado que percebemos na cor, bem como como usar a cor em seu design para efeito.
Por enquanto tente se familiarizar com os termos usados para descrever cores assim como os vários esquemas de cores que saem da roda de cores.
Vamos pegar na próxima vez com mais detalhes sobre esquemas de cores e quando você pode escolher usar cada um.
Recursos
Atrás deste post eu liguei para alguns artigos que oferecem mais pensamentos e idéias sobre cores. Abaixo estão alguns artigos adicionais e séries de artigos sobre teoria da cor.
Dada a importância da cor e o quanto há para saber sobre cor você pode querer passar algum tempo olhando através de cada um dos links abaixo. Muito do que está contido nos artigos seguintes será semelhante ao que está aqui, mas cada artigo provavelmente incluirá algumas coisas que eu não mencionei e aumentará o seu conhecimento geral sobre o tema da cor.
- Esquemas básicos de cor – Introdução à Teoria da Cor
- Teoria da Cor – Wikipedia
- Teoria da Cor – Dev.Opera
- Teoria da Cor – Wrox
- Teoria da Cor – Liquisoft
- Criar Experiências de Usuário Consistentes e Coloridas: Parte 1,
Esta última semana, Cameron Chapman escreveu uma excelente série de artigos para a Smashing Magazine sobre cor, para a qual eu queria especificamente chamar a vossa atenção.
- Teoria da Cor para Designers, Parte 1: O Significado da Cor
- Teoria da Cor para Designers, Parte 2: Entendendo Conceitos e Terminologia
- Teoria da Cor para Designers, Parte 3: Criando suas próprias paletas de cores
Os 7 Componentes do Design
- Unidade
- Gestalt
- Espaço
- Dominância
- Hierarquia
- Balanço
- Cor Parte I: Teoria da Cor
- Cor Parte II: Como Usar a Cor
Download de uma amostra grátis do meu livro, Fundamentos do Design.