RGB não chega: notações de cor HSL, CMYK e OKLCH

No post anterior, Como o computador cria cores: a história do RGB, HEX e binário, vimos que uma cor é apenas três números — vermelho, verde, azul, cada um de 0 a 255. Os ecrãs funcionam muito bem com esses números. Mas no momento em que um ser humano começa a trabalhar com cor, o RGB torna-se rapidamente incómodo.

RGB é conveniente, mas não é intuitivo

“Um vermelho um pouco mais claro.” Como se faz isso em RGB? É preciso aumentar os três canais ao mesmo tempo. “Quero só reduzir a saturação” — olhando apenas para RGB, não sabe o que ajustar. “Quero imprimir esta cor em papel” — com RGB, simplesmente não é possível.

Outras notações de cor surgiram precisamente para resolver estes problemas.

HSL — da forma como as pessoas pensam

HSL divide a cor em três elementos: matiz · saturação · luminosidade. hsl(14, 100%, 60%) é a mesma cor que #FF5733, mas fica claro de onde vem cada parte.

Se RGB é a linguagem do computador — HSL é a linguagem do designer. É possível trabalhar com a mesma cor a partir da perspectiva de o que se quer alterar.

Hue — o matiz é um círculo de 360°

O matiz percorre um círculo completo, como um relógio. De 0° a 360°. 0° e 360° são o mesmo vermelho.

Saturation — a saturação é a intensidade da cor

Com o mesmo matiz, ao reduzir a saturação a cor vai gradualmente ficando mais cinzenta.

Lightness — a luminosidade vai do preto ao branco

L a 0% é sempre preto, 100% é sempre branco. 50% é a luminosidade “natural” dessa cor.

O verdadeiro poder do HSL — criar paletas

Mantendo o mesmo matiz (Hue) e alterando apenas o L, obtém um conjunto de cores que combinam naturalmente. Para fazer o mesmo em RGB, seria preciso calcular 9 células manualmente — em HSL, basta variar o L de 12% a 92% em passos.

As duas paletas acima podem ser criadas numa única linha.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... basta mudar o L em passos de 10 */
}

É aqui que o HSL brilha na criação de sistemas de design.

CMYK — a linguagem da tinta

Para aplicar cor no papel em vez de no ecrã, é necessário um sistema completamente diferente. CMYK é a proporção das quatro tintas utilizadas em tipografias.

Por que o preto se chama “K” e não “B”? Para não confundir com Blue. O nome vem do termo tipográfico “Key plate” — a chapa de referência que alinha as outras tintas.

A luz soma e fica mais clara; a tinta soma e fica mais escura

A maior diferença entre RGB e CMYK está no modo de mistura.

A tinta vermelha parece vermelha porque absorve as outras luzes e reflecte apenas o vermelho. A tinta subtrai luz. Por isso, quanto mais se misturam tintas, mais escura fica a cor. Na teoria, misturar CMY deveria produzir preto — mas na prática resulta num castanho baço. Por isso existe o preto separado (K).

Onde se utiliza o CMYK

Se trabalha com design para ecrãs, raramente vai mexer com CMYK. Aparece apenas na impressão em papel.

• Ao enviar ficheiros para a tipografia — cartões de visita, cartazes, livros, embalagens. A tipografia recebe ficheiros RGB e converte para CMYK.
• Ao trabalhar para impressão no Photoshop / Illustrator — começa com o modo de cor CMYK desde o início.
• Guia de marca — os valores HEX para ecrã e CMYK para impressão ficam juntos. A mesma cor da marca tem de parecer semelhante nos dois meios.

Por que as cores do ecrã e do papel são diferentes — Gamut

O intervalo de cores que um ecrã pode reproduzir (RGB gamut) é diferente do intervalo de tintas (CMYK gamut). Um rosa néon vibrante no ecrã não sai assim impresso — simplesmente não existe em tinta.

Por isso os designers de impressão escolhem apenas cores dentro do gamut CMYK antes de começar. É comum que designs feitos em RGB percam vivacidade quando impressos diretamente.

Como os valores CMYK se escrevem

Indica-se a percentagem de cada tinta a aplicar. 0% = nada; 100% = tinta cheia.

O preto intenso usando apenas K 100% fica como um preto acinzentado. Por isso nas tipografias aplica-se CMY em conjunto para criar um preto mais profundo.

OKLCH — as coordenadas do olho humano

Um modelo de cor que ganhou destaque nos anos 2020. A palavra-chave é uma só: “natural para o olho humano.”

As três coordenadas têm nomes semelhantes ao HSL:

• L — Lightness (luminosidade, 0–1)
• C — Chroma (saturação, 0–aprox. 0,4)
• H — Hue (matiz, 0–360°)

Mas o HSL tem um problema oculto. Mesmo com L = 50%, a luminosidade percebida varia muito consoante a cor. Compare diretamente:

Em poucas palavras: RGB e HSL são coordenadas para a máquina. OKLCH são coordenadas para o ser humano.

L · C · H, cada um no seu papel

Veja o que acontece quando se altera apenas uma coordenada de uma mesma cor.

Onde é utilizado

• Paletas de luminosidade uniforme — quando se quer 8 cores de categoria com o mesmo brilho
• Conversão automática dark/light mode — basta inverter o valor L para um tema escuro natural
• Acessibilidade — é possível prever com precisão o contraste entre texto e fundo
• Gradientes — transições naturais sem faixas cinzentas no meio

Adotado oficialmente a partir do CSS Color Level 4, pode ser utilizado diretamente nos navegadores modernos.

.btn { background: oklch(67% 0.18 30); }       /* laranja */
.btn:hover { background: oklch(60% 0.18 30); } /* só L reduzido em 7 → fica exatamente mais escuro */

O que utilizar e quando

Para a maior parte do trabalho digital, RGB/HEX é suficiente. HSL vale a pena ter em mente ao criar paletas, e OKLCH ajuda muito no design com dark/light mode.

Como trabalhar com cores no fns

Saber que cor é número é o primeiro passo. O seguinte é ter as cores que se usam com frequência ao alcance dos dedos. O fns reúne o fluxo de capturar, guardar e reutilizar cores por trás de uma única tecla.

Eyedropper — capture cores de qualquer lugar do ecrã com ⌘+Shift+K

O Eyedropper captura com precisão a cor de qualquer pixel do ecrã. É como ter o seletor do Figma/Photoshop disponível em todo o sistema.

Prima ⌘+Shift+K em qualquer lugar e o Eyedropper do fns abre. Um pixel no protótipo de design, uma área específica de uma fotografia, a cor de fundo de outra aplicação — leve o rato até lá e clique para capturar exatamente aquela cor.

• A cada clique, a cor é automaticamente guardada na área de transferência. Não é necessária nenhuma ação de “copiar” separada.
• No widget do Eyedropper, pode escolher em que formato a cor vai para a área de transferência: RGB, HEX, HSL, CMYK ou OKLCH.
• Mostra também uma pré-visualização visual da cor capturada e as cores de sistema mais próximas.

Eyedropper → guardado automaticamente na área de transferência → aceda de novo pelo seletor de transferência — o fluxo não se interrompe. Não é preciso abrir o Digital Color Meter nativo do Mac separadamente, nem premir um atalho de copiar a cada vez.

A área de transferência reconhece cores automaticamente

O histórico de área de transferência do fns deteta automaticamente se o texto copiado é um código de cor. Reconhece qualquer formato.

Quando vai buscar uma cor guardada no histórico, é difícil lembrar qual era a cor olhando apenas para o texto. O fns apresenta um pequeno chip colorido ao lado de cada item para que veja a cor de relance.

Filtrar só as cores

Com uma tecla, pode filtrar o histórico da área de transferência para ver apenas códigos de cor. Quando está a trabalhar em design e quer ver só as cores recentes, não precisa de vasculhar entre textos, URLs e código.

• No mesmo seletor, use palavras-chave como color: → aparecem só itens de cor
• Pesquisa por nome de cor — pesquise “blue”, “red” e só aparecem aquelas tonalidades
• Cores similares agrupadas visualmente

Converter uma cor para outro formato

Pode converter e extrair a mesma cor noutra notação. Se copiou #FF5733 do Figma e quer colar como rgb(...) no CSS, basta selecionar esse item no seletor de área de transferência do fns e usar um atalho — a conversão é automática.

Não é necessário abrir um conversor todas as vezes que transitar entre Figma (HSB) e CSS (HSL/HEX/OKLCH).

Expansão de texto e atalhos

Registe as cores da sua marca como atalhos de texto.

O mesmo atalho funciona em qualquer lugar — no campo de cor do CSS, no Figma, em mensagens do Slack, no editor de código. O tempo que gastava a procurar e copiar as cores do guia de marca desaparece.

Experimente o fns para poupar o tempo que perde a abrir conversores e a mudar o formato dos códigos de cor.

Quer perceber de onde vêm estes números — o essencial dos três canais do RGB, o binário e a notação HEX? Comece por Como o computador cria cores: a história do RGB, HEX e binário.