Any colour you like

The Dark Side Of The Moon — Pink Floyd (1973) e Isaac Newton — a luz branca sendo dividida em faixas de cores, que conhecemos como espectro eletromagnético.

Pensar na influência e nas emoções refletidas através das cores é uma das bases essenciais para a criatividade e a evolução da arte. Na história da comunicação humana, podemos observar o quanto as referências visuais — iniciando com os elementos naturais — foram importantes para descrever as formas primitivas de expressão, com desenhos em pedras, pinturas e inscrições com pigmentos, nas representações pré-históricas.

Baixe o aplicativo do Google Arts and Culture e visualize a Chauvet Cave de forma imersiva, em realidade aumentada e em alta definição.

Desenhar é uma das primeiras expressões humanas antes da comunicação moderna e traduzir o que imaginamos é algo que faz parte do nosso desenvolvimento. Percebemos nessa linha do tempo, o quanto a tecnologia mudou completamente a forma que interagimos com elementos visuais, gráficos e imagens, e a forma de visualizar o que estamos fazendo através de dispositivos em nosso dia-a-dia.

A conexão que temos hoje, sem limites geográficos e com o uso diário de produtos digitais desenvolvidos na era da informação interligados com a imensa capacidade de escala tecnológica, tiveram alcance através de imagens, interações, vídeos, conteúdos, gráficos, 3d, realidade aumentada, entre tantos outros formatos.

Para entender a evolução desse cenário é preciso analisar o contexto onde esses os elementos estão disponíveis, com múltiplos signos e significados. Temos uma diversidade de dispositivos e suportes, onde podemos assistir produtos sendo criados para televisão, tablet, celular ou smartwatch para interagir com marcas e pessoas.

Câmeras cada vez com mais fidelidade e qualidade, a fotografia e a edição de vídeos tem revolucionado os formatos de imagens com muita agilidade. A ilustração, os jogos digitais e a realidade aumentada criam cada vez mais ferramentas para facilitar a vida de pessoas criativas que produzem conteúdos diretamente no celular (a Geração Z usando o tiktok e editando vídeos enquanto gravam, eu fico chocada hahaha). Como podemos acompanhar essa evolução, entendendo teorias básicas e essenciais sobre os modelos padrões das cores, que podem ser combinadas em uma infinidade de padrões de uso, dispositivos e equipamentos?

Cores escondidas na luz

Série Cosmos — Ep. 05: Escondido na Luz (Hiding in the Light)

A luz, em si, tem muitas das chaves para se entender a teoria da cor para tudo o que é digital, mas para isso, precisamos entender algumas regras básicas da ciência (esse episódio da série Cosmos, explica de forma muito didática).

Existem alguns modos usados para descrever como visualizamos as cores digitais e também quando são impressas (sem considerar a protanotipia — condição genética associado ao daltonismo ou discromatopsia — aqueles que sofrem normalmente para visualizar a cor vermelha em faixas bege e a cor verde em tons avermelhados). A explicação de uma forma científica seria: um espaço de cor nada mais é do que um modelo matemático usado para descrever cada cor a partir de fórmulas.

Exemplo de visualizações no seletor de cores da Adobe.

Modos e Modelos de cor

Um dos modelos básicos apresentados abaixo, é baseado na forma como o olho humano percebe as cores — Matiz, Saturação e Brilho ou em inglês HSB: Hue, Saturation and Brightness(1), enquanto o outro modelo é baseado na forma como os monitores e dispositivos exibem as cores — em quantidades de vermelho, verde e azul ou em inglês RGB: Red, Green and Blue(2).

Modelos de cores usados nas ferramentas do Adobe Creative Cloud:

1) HSB — Hue, Saturation and Brightness: Matiz, Saturação e Brilho
2) RGB — Red, Green and Blue: Vermelho, Verde e Azul
3. Círculo Cromático (explore mais aqui no site de cores da Adobe)

O Círculo Cromático ou Disco de Cores (3) é composto por doze cores sendo três primárias, três secundárias e seis terciárias. É o modelo básico e mais comum usado em todas as áreas e ajuda a entender as relações entre as cores e todas as suas variações e combinações harmônicas.

HSB

Com base na percepção humana da cor, o modelo HSB descreve três características fundamentais da cor:

  1. SATURAÇÃO: É a força ou pureza da cor. A saturação, às vezes chamada de croma, representa a quantidade de cinza em proporção ao matiz, medida como uma porcentagem de 0 (dessaturado) a 100 (totalmente saturado). No disco de cores padrão, a saturação aumenta do centro para a borda.
  2. MATIZ: É a cor refletida ou transmitida por um objeto. É medido como uma localização no disco de cores padrão, expressa como um grau entre 0 e 360. No uso comum, o matiz é identificado pelo nome da cor, como vermelho, laranja ou verde.
  3. BRILHO: É a claridade ou escuridão relativa da cor, geralmente medida como uma porcentagem de 0 (preto) a 100 (branco).
(S) Saturação | (M) Matiz | (B) Brilho

HSB é uma representação alternativa do modelo RGB. Isso se baseia em como o olho humano percebe as cores, em comparação com a forma que uma tela ou dispositivo apresenta. Todos os modelos de cores tem um canal Alpha (ou valor), que representa a opacidade da cor, com valor entre 0 e 100%.

Embora o modelo HSB possa ser usado para definir cores em softwares digitais, não é recomendado usar o modelo HSB para criar ou editar imagens.

RGB

Red, Green and Blue (Vermelho, Verde e Azul) é o modelo de cor mais comumente usado. Uma grande porcentagem do espectro visível pode ser representada pela mistura de luz vermelha, verde e azul, em várias proporções e intensidades. Essas três são chamadas de cores primárias aditivas. Quando somadas, as luzes vermelha, verde e azul formam a luz branca. Onde duas cores se sobrepõem, elas criam ciano, magenta ou amarelo. As cores primárias aditivas são usadas para iluminação, vídeo e monitores.

Red, Green and Blue (Vermelho, Verde e Azul)

Cada cor que é processada em um monitor ou tela será composta por quantidades variáveis de RGB. Você também pode ter visto RGBa referenciado em outros recursos. O a em RGBa significa alfa , que representa a opacidade da cor. Isso representa a opacidade como um valor entre 0 e 100%.

Essa combinação de cores, sempre será muito brilhante e terá cores mais vívidas do que o sistema CMYK (Ciano, Magenta, Yellow, Key ou a cor chave que é preto), geralmente usada para impressão.

Circulo Cromático

É a ferramenta indispensável para compreender a relação entre as cores (e também recomendo um estudo mais aprofundado para entender as cores quentes, frias, primárias, secundárias, terciárias, complementares, análogas, tríades, monocromáticas e a psicologia e significado de cada cor).

Nos dispositivos digitais o vermelho, verde e azul são as cores primárias aditivas. Ciano, magenta e amarelo são as primárias subtrativas. Diretamente em frente a cada do círculo primário aditivo está seu complemento: vermelho-ciano, verde-magenta e azul-amarelo.

Cada primário subtrativo é composto de dois primários aditivos, mas não seu complemento. Portanto, se você aumentar a quantidade de uma cor primária em sua imagem, reduzirá a quantidade de seu complemento. Por exemplo, o amarelo é composto de luz verde e vermelha, mas não há luz azul no amarelo. Ao ajustar o amarelo no Photoshop, você altera os valores de cor no canal de cor azul. Ao adicionar azul à sua imagem, você subtrai o amarelo dela.

Entender esses modelos essenciais ajudam a entender como configurar os perfis de cores antes de iniciar um projeto, abrir e editar imagens, aprender como cada tipo de dispositivo e software renderiza as cores escolhidas em um projeto ou produto (e entender porque acontecem diferenças entre as imagens digitais e impressas).

HEX

O sistema Hexadecimal para cores consiste em seis letras ou números precedidos do símbolo de “#” ou hashtag. Os dois primeiros elementos representam a intensidade de vermelho, o terceiro e quarto elementos representam a intensidade de verde e os dois últimos a intensidade de azul. É o modelo de cores padrão HTML e é uma abreviatura alfanumérica representativa dos valores RGB. Os criadores na web ou design digital referem-se a esse código para a maioria dos sites e aplicativos desenvolvidos.

HSL

Hue, Saturation, Luminance (Matiz, Saturação, Luminosidade) é outro modelo de cor baseado em como o olho humano percebe as cores. Como o HSB, é uma representação alternativa do modelo RGB. A principal diferença entre os dois é que o brilho de qualquer tonalidade pura é igual ao brilho do branco puro (HSB), enquanto a luminosidade de qualquer cor pura equivale à luminosidade de um cinza médio (HSL). Este segundo espaço de cor é mais utilizado por fotógrafos usando equipamento digital.

CSS

O modelo de cores CSS permite que você visualize ou insira valores RGBa usando a sintaxe CSS. Isso inclui o formato, seguido pelos valores para cada cor, por exemplo:RGBa(64, 128, 256, 32).

CMYK

É o principal modo de cor usado para impressão. São usadas cores de quatro pigmentos Ciano, Magenta, Yellow, Key (ou Azul, Magenta, Amarelo e a cor chave, que é preto). As impressoras de jato de tinta e as grandes impressoras gráficas, criam suas cores a partir da subtração desses matizes. O branco nesse modelo é obtido pela não aplicação de pigmentos.

yeah, science bitch!

Colocando a leitura em prática

Minha ferramenta preferida para entender cada vez mais sobre cores, paletas, harmonias, gradientes, testar e criar meus próprios temas: https://color.adobe.com/pt/create/color-wheel

E um jogo da memória super legal para memorize a sequência na roda de cores.

https://color.adobe.com/pt/color-wheel-game

daydreamer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store