Quando eu era criança, publiquei um fanzine sobre quadrinhos. Isso foi muito antes de eu ter um computador – ele foi criado usando máquina de escrever, papel e tesoura!

O fanzine era inicialmente em preto e branco, fotocopiado na minha escola. Com o tempo, à medida que obteve mais sucesso, consegui pagar pela impressão offset com capas coloridas!

No entanto, gerenciar essas cores foi bastante desafiador. Cada capa teve que ser impressa quatro vezes, uma para cada cor: ciano, magenta, amarelo e chave (preto) — abreviado como CMYK.

Isso significava que eu tinha que fornecer quatro folhas separadas, cada uma impressa em tinta preta, mas correspondendo a uma cor específica.

Aqui está uma das edições que publiquei:

Todo o amarelo que você vê na imagem acima foi pintado à mão por mim com tinta preta na folha “amarela”. Para os tons de pele, usei algo chamado “pontos raster”. Eram lençóis que você poderia comprar com pontos pretos de densidades variadas. Você cortaria os pontos e os aplicaria – neste caso, na folha “vermelha”.

Trabalhei em uma mesa de luz - uma mesa de desenho com tampo de vidro e iluminação embutida - para poder ver através das várias folhas enquanto as alinhava corretamente.

Foi muito demorado, mas despertou um interesse vitalício em entender as cores - e a enorme diferença entre as cores de impressão e de tela!

Embora o CMYK seja limitado a quatro cores, ainda é relativamente fácil de entender. Todos nós usamos lápis de cor no papel e temos uma noção intuitiva de como as cores se misturam. CMYK é um modelo de cores subtrativo. Você começa com uma folha de papel branca e, à medida que adiciona mais tinta, na verdade subtrai luz. Combinar todas as cores leva você para o preto. Se você não aplicar tinta, o papel permanecerá branco porque reflete toda a luz.

Quando comprei meu primeiro computador, tive que entender RGB, que é muito diferente de CMYK. RGB é um modelo de cores aditivo usado para telas digitais. Aqui, você está misturando a própria luz – adicionar mais luz torna as cores mais brilhantes e move você em direção ao branco. Desligue todas as luzes RGB (R=0, G=0, B=0) e a tela ficará preta porque não há emissão de luz.

Como designer gráfico naquela época, você tinha que calibrar sua tela porque as cores que você via na tela e as que você via na impressão eram muitas vezes muito diferentes!

Visualizando RGB

RGB representa três fontes de luz: vermelho, verde e azul. Quando uma luz está desligada, seu valor é 0; quando está totalmente ligado, seu valor é 255. Quando essas luzes se sobrepõem, elas criam cores diferentes.

Para entender melhor como o RGB funciona, vamos construir uma pequena ferramenta:

HTML

Estilos

Primeiro, vamos criar uma grade 9x8:

.rgb {
  all: unset;
  aspect-ratio: 9 / 8;
  container-type: inline-size;
  display: grid;
  font-size: 1.75cqi;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
}

É um tamanho incomum, mas é porque nossos círculos R, G e B são 5x5 e se sobrepõem:

.r, .g, .b {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  font-size: 5cqi;
  mix-blend-mode: difference;
}

O CSS para .r, .g e .b é:

.r {
  background-color: rgb(var(--r), 0, 0);
  grid-area: 1 / 3 / 6 / 8;
}

.g {
  background-color: rgb(0, var(--g), 0);
  grid-area: 4 / 1 / 9 / 6;
}

.b {
  background-color: rgb(0, 0, var(--b));
  grid-area: 4 / 5 / 9 / 10;
}

Tenho usado muito grid-area ultimamente. Ele permite que você coloque um item de grade em um local muito específico:

início de linha / início de coluna / fim de linha / fim de coluna

É mais fácil visualizar isso se você ativar o visualizador de grade do Dev Tools:

Você notou as três propriedades personalizadas de CSS, --r, --g e --b? Atualizaremos isso em um pequeno snippet JS:

const rgb = document.querySelector('.rgb');
rgb.addEventListener('input', e => {
  const N = e.target;
  document.body.style.setProperty(`--${N.name}`, N.value);
})

E é basicamente isso. Eu adicionei alguns elementos

e pequenos ajustes… mas quase esqueci de mencionar a linha mais importante para fazer o visualizador funcionar:

modo mix-blend: diferença

Leia sobre isso aqui – é muito divertido percorrer todos os modos.

Demonstração

Aqui está um Codepen. Clique e edite os números abaixo de R, G e B e observe como o plano de fundo da página e as partes sobrepostas de todos os três círculos mudam.