RGB não é suficiente: 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. As telas funcionam muito bem com esses números. Mas no momento em que um humano começa a trabalhar com cor, o RGB fica complicado rapidamente.

RGB é conveniente, mas não é intuitivo

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

Outras notações de cor surgiram para resolver exatamente esses problemas.

HSL — do jeito que 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 cada parte vem.

Se RGB é a linguagem do computador — HSL é a linguagem do designer. Você pode trabalhar com a mesma cor a partir da perspectiva de o que você quer mudar.

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

Mesmo matiz, mas com a saturação reduzida, a cor vai gradualmente ficando mais cinza.

Lightness — a luminosidade vai do preto ao branco

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

O verdadeiro poder do HSL — criar paletas

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

As duas paletas acima podem ser criadas em uma linha só.

: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 */
}

É aí que o HSL brilha na hora de criar sistemas de design.

CMYK — a linguagem da tinta

Para aplicar cor no papel em vez da tela, é necessário um sistema completamente diferente. CMYK é a proporção das quatro tintas usadas em gráficas.

Por que o preto é chamado de “K” e não de “B”? Para não confundir com Blue. O nome vem do termo de impressão “Key plate” — a placa de referência que alinha as outras tintas.

Luz se soma e fica mais clara; tinta se 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 reflete apenas o vermelho. A tinta subtrai luz. Por isso, quanto mais você mistura tintas, mais escura fica a cor. Na teoria, misturar CMY deveria produzir preto — mas na prática resulta num marrom baço. Por isso existe o preto separado (K).

Onde o CMYK é usado

Se você trabalha com design para telas, raramente vai mexer com CMYK. Ele aparece somente na impressão em papel.

• Ao enviar arquivos para a gráfica — cartões de visita, pôsteres, livros, embalagens. A gráfica recebe arquivos RGB e converte para CMYK.
• Ao trabalhar para impressão no Photoshop / Illustrator — você começa com o modo de cor CMYK desde o início.
• Guia de marca — os valores HEX para tela e CMYK para impressão ficam juntos. A mesma cor da marca precisa parecer parecida nos dois meios.

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

A faixa de cores que uma tela pode reproduzir (RGB gamut) é diferente da faixa de tintas (CMYK gamut). Um rosa néon vibrante na tela não sai assim impresso — simplesmente não existe em tinta.

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

Como os valores CMYK são escritos

Você escreve qual porcentagem de cada tinta vai ser aplicada. 0% = nada; 100% = tinta cheia.

O preto intenso usando somente K 100% fica como um preto acinzentado. Por isso nas gráficas aplica-se CMY junto 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 parecidos com o 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 dependendo da cor. Compare diretamente:

Em uma linha: 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 você altera apenas uma coordenada de uma mesma cor.

Onde é utilizado

• Paletas de luminosidade uniforme — quando você 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 — você prevê com precisão o contraste entre texto e fundo
• Gradientes — transições naturais sem faixas cinzas no meio

Adotado oficialmente a partir do CSS Color Level 4, pode ser usado 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 usar e quando

Para a maior parte do trabalho digital, RGB/HEX é suficiente. HSL vale a pena ter em mente quando for 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 próximo é ter as cores que você usa com frequência ao alcance dos dedos. O fns reúne o fluxo de capturar, salvar e reutilizar cores por trás de uma única tecla.

Eyedropper — capture cores de qualquer lugar da tela com ⌘+Shift+K

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

Pressione ⌘+Shift+K de qualquer lugar e o Eyedropper do fns abre. Um pixel no protótipo de design, uma área específica de uma foto, a cor de fundo de outro aplicativo — leve o mouse até lá e clique para capturar exatamente aquela cor.

• A cada clique, a cor é automaticamente salva na área de transferência. Não é preciso nenhuma ação de “copiar” separada.
• No widget do Eyedropper, você escolhe em qual 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 → salvo automaticamente na área de transferência → acesse de volta pelo seletor de transferência — o fluxo não se interrompe. Não precisa abrir o Digital Color Meter nativo do Mac separadamente, nem apertar 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 detecta automaticamente se o texto copiado é um código de cor. Reconhece qualquer formato.

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

Filtrar só as cores

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

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

Converter uma cor para outro formato

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

Não precisa mais abrir um conversor toda vez que transitar entre Figma (HSB) e CSS (HSL/HEX/OKLCH).

Expansão de texto e atalhos

Registre 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 você gastava procurando e copiando as cores do guia de marca desaparece.

Experimente o fns para economizar o tempo que você perde abrindo conversores e mudando o formato dos códigos de cor.

Quer entender de onde vêm esses números — o básico 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.