If you can remember as far as January, one of my goals for 2013 was to learn more about color and share some of what I learn with you. Eu já falei antes sobre como eu sinto que minhas habilidades no trabalho com cores estão faltando e eu disse que em algum momento deste ano eu pegaria alguns livros sobre cores com a esperança de mudar isso.
Um aniversário, um irmão um pouco generoso, e um serviço de qualidade da Amazon mais tarde, e um sortimento de livros (incluindo alguns especificamente sobre cores) estão aqui esperando para serem lidos. Obrigado David.
Acabei de ler um dos livros a cores, Elementos de Design: Fundamentos de Cor, e achei que devia começar a partilhar. Quero começar com como descrevemos as cores em parte porque é o começo e em parte porque levou a alguma clareza em como eu entendo as cores.
Como Descrevemos as Cores
Existem 3 formas primárias de descrever uma cor e como o livro a adicionou, vou adicionar uma 4ª forma de descrever as cores também.
- Tonalidade – outra palavra para cor
- Saturação (croma) – a intensidade ou pureza de uma tonalidade
- Leveza (valor) – o grau relativo de preto ou branco misturado com uma determinada tonalidade
- Temperatura – o calor ou frieza percebido de uma cor
Vamos cavar um pouco mais fundo em cada uma.
Tons são cores e a tonalidade que vemos depende do comprimento de onda da luz que está a ser reflectida ou produzida. Duvido que eu precise lhe dizer o que é uma cor e como cor e tonalidade são sinônimos, você deve saber o que é uma tonalidade também. Uma coisa que vos vou lembrar é que todos nós percebemos a cor de forma diferente. A tonalidade que você vê pode não ser a mesma tonalidade que eu vejo.
Saturação refere-se a quão pura ou intensa é uma determinada tonalidade. 100% de saturação significa que não há adição de cinza à tonalidade. A cor é completamente pura. No outro extremo, uma tonalidade com 0% de saturação aparece como um cinza médio. Quanto mais saturada (mais próxima de 100%) uma cor é, mais vívida ou mais brilhante ela aparece. Cores dessaturadas, por outro lado, aparecem mais embotadas.
Como uma tonalidade saturada aparece também depende, em um grau, de quais cores ela está ao lado. Uma tonalidade 50% saturada colocada ao lado de uma tonalidade saturada de 25% aparecerá mais vívida do que a mesma tonalidade colocada ao lado de uma tonalidade saturada de 75%.
A luminosidade mede o grau relativo de preto ou branco que foi misturado com uma determinada tonalidade. Adicionar branco torna a cor mais clara (cria matizes) e adicionar preto torna-a mais escura (cria tonalidades). O efeito da leveza ou valor é relativo a outros valores na composição. Você pode fazer uma cor parecer mais clara ao colocá-la ao lado de uma cor mais escura.
Quanto maior a diferença de valor entre os elementos, maior o contraste entre eles. Por causa disso, a leveza é uma boa maneira de mostrar contraste e indicar hierarquia entre os elementos. Cerca de 7 passos de leveza é a variação máxima que o olho humano pode discernir. Além disso, torna-se difícil distinguir as diferenças.
Temperatura é o calor ou frieza percebidos de uma cor. As cores quentes são vermelho, laranja e amarelo, enquanto as cores frias são verde, azul e violeta. Em algum lugar nos espectros verde e violeta a temperatura muda entre quente e frio.
Como o olho reconhece que a temperatura da cor pode mudar com base na fonte de luz. Por exemplo, a temperatura real de um monitor de computador pode afetar a temperatura da cor percebida.
Cores mais quentes tendem a avançar para o primeiro plano de uma composição enquanto cores mais frias recuam para o fundo. Também como a saturação e a leveza, a temperatura pode ser relativa. Coloque uma cor quente contra uma mais quente e a cor inicial aparecerá mais fria do que se fosse colocada contra uma cor fria.
Color Harmony
No trabalho com cores o nosso objectivo é escolher uma paleta de combinações de cores agradáveis (excepto para aqueles momentos em que uma combinação desagradável complementa melhor a mensagem). Estamos tentando alcançar algum tipo de harmonia de cores.
A harmonia de cores pode ser subjetiva. O que funciona para o seu olho pode não funcionar para o meu. Os princípios da teoria da cor visam reduzir a subjetividade oferecendo diretrizes que nos ajudam a encontrar emparelhamentos e agrupamentos de cores com maior probabilidade de funcionar bem.
Por exemplo, um dos princípios principais sustenta que o olho está sempre buscando equilíbrio e equilíbrio na cor que o levam a chegar a combinações neutras como quando uma tonalidade é combinada com o seu oposto ou complemento. É uma razão pela qual muitas vezes vemos imagens posteriores de uma cor diferente (mas com a mesma saturação e leveza) quando olhamos para qualquer cor por muito tempo.
A teoria da cor nem sempre leva a resultados previsíveis. Às vezes a teoria e a prática não são bem enredadas, o que significa que precisamos desenvolver nossos olhos para a cor e experimentar diferentes combinações de tonalidade, saturação e leveza.
The Disconnect in Color Theory and Color Practice
Tal como eu disse acima, algo clicou para mim na leitura dos Fundamentos da Cor. Nós descrevemos cores em termos de tonalidade, saturação e leveza (HSL), mas tipicamente definimos valores de cores na web usando valores hexadecimais e, em menor escala, valores RGB. Não faria mais sentido trabalhar com o sistema que melhor descreve a cor?
Nota: HSL não é o mesmo que HSB (tonalidade, saturação, brilho) ou HSV (tonalidade, saturação, valor) encontrado na maioria das ferramentas de cor.
Hex e RGB são realmente duas versões da mesma coisa. Cada uma fornece 256 valores possíveis para quanto vermelho, verde, ou azul está em uma determinada cor. HSL funciona de forma diferente. Não há uma maneira fácil de olhar para algo como rgb(63, 69, 146) ou é equivalente hexadecimal #3f4592 e facilmente saber que está 40% saturado ou hsl(236, 40, 41).
Se você gostaria de ver a matemática envolvida em fazer a conversão, dê uma olhada em algum ou todos os links abaixo
- Algoritmos de cor
- RGB para conversão de cor HSL
- HSL para conversão de cor RGB
Por que isso? Por que existe uma desconexão na forma como tentamos entender a cor e como tentamos usá-la? Se alguma coisa HSL é o sistema mais intuitivo, como ele realmente descreve as cores que vemos e se encaixa na teoria da cor.
Eu percebo que as habilidades em cores vêm do desenvolvimento de um olho crítico para as cores e fazer perguntas sobre o porquê de algo funcionar ou não funcionar. E é sobre responder a essas perguntas enquanto você observa as cores ao seu redor.
Parece que seria mais fácil se tanto a teoria quanto a prática falassem a mesma linguagem. Agora que cheguei a essa conclusão, decidi assumir o compromisso de usar os valores da HSL o máximo possível no meu código. O obstáculo é o IE8 e abaixo, que não aceitam hsl() ou rgb(). Eles precisam de valores hexadecimais. Mas tudo bem, já que SASS pode fazer a conversão. Você pode usar hsl() no SASS e ter a saída html como um valor hexadecimal.
Para ir junto com meu compromisso eu comecei a construir uma ferramenta simples de cores para me ajudar a aprender e estudar. Não é algo que você gostaria de usar no seu estado atual para escolher uma paleta de cores, mas permite que você brinque com a tonalidade, saturação e valores de leveza para ver como cada um afeta uma cor em particular e as cores ao seu redor. Eu vou compartilhar a ferramenta no final da semana.
Por algum tempo eu suspeitei que as relações matemáticas entre cores poderiam oferecer um guia para trabalhar com elas e eu tenho frequentemente procurado por essas relações nos valores hexadecimais das cores. Minha esperança para usar mais hsl() e brincar com minha simples ferramenta de cores é que eles me ajudarão a conectar a teoria às cores que uso no design um pouco melhor do que elas estão conectadas para mim agora.
Conte esta desconexão em como aprendemos e descrevemos as cores e como as usamos em mente. A realização me deu uma maior compreensão de como estudar melhor as cores e é por isso que eu queria começar esta conversa com o básico de como nós descrevemos as cores. Terei mais posts sobre cor em breve, começando no final da semana quando eu falar sobre a ferramenta simples que criei para me ajudar.
Download de uma amostra grátis do meu livro, Design Fundamentals.