Chroma

Chroma é o eixo do atributo de cor que captura “quanta cor existe na cor” independente do brilho. Um vermelho puro e um rosa puro podem ter matizes e luminosidades semelhantes mas chromas muito diferentes — rosa está mais próximo do cinza, vermelho está mais distante do cinza.

Chroma às vezes é confundido com saturação. A distinção:

• Chroma é a distância absoluta do eixo acromático (cinza) em uma determinada luminosidade, medida no espaço de cor escolhido (OKLab, CIELAB, etc.).
• Saturação é a proporção de chroma para luminosidade — uma medida relativa.

Isso importa no design porque OKLCH (a função de cor CSS moderna) usa chroma, não saturação. oklch(0.72 0.18 47) significa luminosidade 0,72, chroma 0,18, matiz 47°. Ajustar o chroma sozinho mantém a luminosidade e o matiz estáveis; com saturação, ajustar um valor também altera o brilho percebido.

O chroma máximo alcançável varia com matiz e luminosidade. Em sRGB, o amarelo em luminosidade média pode suportar mais chroma do que o azul na mesma luminosidade — os primários amarelos estão mais próximos do limite do gamut sRGB. Valores OKLCH que excedem o gamut sRGB são cortados na fronteira, às vezes deslocando a cor renderizada de forma inesperada. Para um design perceptualmente consistente em uma ampla faixa de matizes, escolha um valor de chroma (por exemplo, 0,12-0,15) que seja alcançável em todos os matizes necessários.

Exemplo prático

Construa uma paleta de 9 passos de cinza a vermelho. Em HSL você poderia começar em hsl(0 0% 50%) e terminar em hsl(0 100% 50%), escalando a saturação linearmente. Os passos intermediários ficam bem no vermelho, mas a mesma abordagem para o azul (hsl(240 0% 50%) → hsl(240 100% 50%)) produz um ponto médio que parece visivelmente mais escuro do que o ponto médio vermelho — a luminosidade HSL não é perceptualmente uniforme. Em OKLCH, fixando a luminosidade em 0,65 e escalando o chroma de 0 a 0,18, produz nove passos que correspondem em brilho percebido nos matizes. Concretamente: oklch(0.65 0.00 0), oklch(0.65 0.0225 0), …, oklch(0.65 0.18 0) ficam todos na mesma linha de luminosidade percebida. Repita a mesma rampa de chroma no matiz 240 (azul) e a escala azul resultante se paralelizará visualmente com a escala vermelha passo a passo — impossível de alcançar apenas com HSL.

Numericamente, os valores de chroma OKLCH para cores sRGB dentro do gamut caem aproximadamente na faixa de 0 a 0,37. O máximo depende do matiz e da luminosidade: em L=0,6, o vermelho mais saturado alcançável em sRGB tem chroma de cerca de 0,25; o amarelo mais saturado cerca de 0,21; o azul mais saturado cerca de 0,31. Conhecer esses limites evita especificar valores de paleta impossíveis que o navegador vai cortar silenciosamente.

Quando e por que isso importa

Chroma importa sempre que você precisa de cores que pareçam consistentes nos matizes — sistemas de design com escalas de cor semânticas (vermelho-50 a vermelho-900, azul-50 a azul-900, etc.), visualizações de dados com paletas categóricas que devem ser igualmente legíveis, e interfaces acessíveis onde as proporções de contraste dependem da luminosidade percebida (não bruta). A paleta do Tailwind v4, Radix Colors e o sistema de design IBM Carbon todos publicam rampas OKLCH com chroma controlado exatamente por este motivo. O erro a evitar é tratar “saturação” como sinônimo de “intensidade”: aumentar a saturação em HSL arrasta a luminosidade junto, enquanto aumentar o chroma em OKLCH não. Para visualização de dados, a regra prática é escolher o chroma máximo alcançável em todos os matizes necessários (tipicamente cerca de 0,10-0,13 para sRGB dentro do gamut em todos os matizes), depois manter o chroma fixo e variar a luminosidade para os passos da escala. Referência: W3C CSS Color Module Level 4 — OKLab e OKLCH.

Por que OKLab/OKLCH substituiu o HSL para trabalho sério de design: HSL é uma transformação algébrica simples de RGB — seu eixo de “luminosidade” não é perceptualmente uniforme. Duas cores HSL com valores de luminosidade idênticos podem parecer muito diferentes em brilho real; um amarelo com luminosidade HSL 50% parece muito mais brilhante do que um azul no mesmo valor. OKLab (Björn Ottosson, 2020) foi especificamente projetado para que o eixo L corresponda à percepção humana de luminosidade, e o eixo chroma corresponda à saturação percebida. Passos iguais em OKLab parecem passos iguais ao olho. O CSS Color Module Level 4 adicionou as funções oklab() e oklch() por esse motivo, e os sistemas de design (Tailwind 4, Radix Colors) publicam cada vez mais escalas de paleta geradas em OKLCH para consistência perceptual garantida. Relacionado: cromaticidade, sRGB, gamut. Referência: Björn Ottosson — Um espaço de cor perceptual para processamento de imagem (2020).