O Que É Croma? Intensidade de Cor Além da Saturação

Quando a maioria das pessoas quer descrever uma cor vívida em comparação a uma opaca, recorre à palavra "saturação". Mas na ciência moderna das cores, especialmente nos espaços de cores que alimentam o CSS atual e as ferramentas de design profissional, um termo mais preciso faz esse trabalho: croma. Croma e saturação são intimamente relacionados, mas medem coisas diferentes e se comportam de forma muito distinta quando você está construindo escalas de cores ou trabalhando com múltiplas matizes. Entender a distinção lhe dá um instrumento mais preciso para tomar decisões de cores.

Croma Definido na Ciência das Cores

Croma é a coloração absoluta de uma cor — o quanto ela se afasta de um cinza neutro da mesma luminosidade. Pense nisso como a quantidade pura e mensurável de "cor" presente, independentemente de quão escura ou clara é a cor.

O termo vem da palavra grega chroma, que significa cor ou complexão. Na ciência das cores, foi formalizado por Albert Munsell em seu Sistema de Cores Munsell no início do século XX. Munsell organizou as cores em três eixos: matiz (a família de cor específica), valor (luminosidade) e croma (a distância do cinza). Ele percebeu que cores vívidas em diferentes níveis de luminosidade não podiam ser comparadas usando uma única medida de "saturação" — um amarelo vívido muito claro e um verde vívido escuro têm valores de croma completamente diferentes, mesmo que ambos pareçam "totalmente saturados" ao olho.

No uso moderno, o croma aparece como uma dimensão em vários espaços de cores perceptuais:

• CIE LCH: Luminosidade, Croma, Matiz — uma versão cilíndrica do CIELAB
• OKLCH: Luminosidade, Croma, Matiz — uma versão cilíndrica do Oklab, otimizada para uniformidade perceptual
• Munsell: Valor, Croma, Matiz — o sistema perceptual original

Em todos esses sistemas, o croma é expresso como um número começando em 0 (cinza perfeitamente neutro) e aumentando à medida que a cor fica mais vívida. Ao contrário da saturação em HSL, o croma não tem um limite superior fixo — o croma máximo alcançável depende da matiz e do nível de luminosidade, bem como das capacidades do dispositivo de exibição ou impressão sendo usado.

Croma vs Saturação: Diferenças Principais

Saturação e croma são ambos sobre intensidade de cor, mas a medem de maneiras fundamentalmente diferentes.

Saturação em HSL é uma medida relativa. Ela pergunta: quão vívida é essa cor em comparação com a máxima vivacidade possível neste nível de luminosidade? Isso é sempre expresso como uma porcentagem de 0% (cinza puro) a 100% (vivacidade máxima para esta matiz nesta luminosidade). O problema é que "vivacidade máxima" varia enormemente dependendo da matiz e da luminosidade — portanto, 100% de saturação em um amarelo claro e 100% de saturação em um roxo escuro representam quantidades absolutas de coloração muito diferentes.

Croma em LCH ou OKLCH é uma medida absoluta. Ele pergunta: quanta coloração total está presente, medida em unidades perceptuais? Um croma de 0,15 em OKLCH significa a mesma quantidade absoluta de coloração independentemente de a matiz ser vermelho, azul ou verde, e independentemente de quão clara ou escura seja a cor.

Considere duas cores frequentemente descritas como "totalmente saturadas":

• Um amarelo vívido como #FFFF00 — em OKLCH: aproximadamente oklch(0.97 0.21 108)
• Um azul vívido como #0000FF — em OKLCH: aproximadamente oklch(0.45 0.31 265)

Ambos estão em 100% de saturação HSL. Mas seus valores de croma OKLCH são 0,21 e 0,31 respectivamente — significativamente diferentes. O azul tem croma absoluto mais alto. É por isso que quando você reduz o croma de ambos igualmente em OKLCH, obtém cores que parecem igualmente opacas ao olho humano. Se você reduzisse a saturação igualmente em HSL, o resultado perceptual seria inconsistente.

Um Resumo Prático

Croma nos Espaços de Cores LCH e OKLCH

Tanto LCH quanto OKLCH usam croma como medida de coloração. OKLCH é o mais recente e mais perceptualmente preciso dos dois.

LCH

LCH (Luminosidade, Croma, Matiz) é um rearranjo cilíndrico do espaço de cores CIELAB, projetado pela Comissão Internacional de Iluminação (CIE) em 1976. CIELAB e LCH foram especificamente projetados para ser perceptualmente uniformes, o que significa que diferenças numéricas iguais no espaço de cores correspondem a diferenças de aparência iguais ao olho humano.

Em LCH, os valores de croma variam tipicamente de 0 a cerca de 150 para cores dentro do espectro visível, embora a gama sRGB restrinja os valores práticos a cerca de 0–50 dependendo da matiz e luminosidade. A função CSS lch() usa essa escala:

/* LCH: um laranja vívido */
color: lch(65 45 45);

/* LCH: uma versão opaca da mesma matiz */
color: lch(65 15 45);

OKLCH

OKLCH é uma versão cilíndrica do espaço de cores Oklab, projetada por Björn Ottosson em 2020 como uma melhoria em relação ao CIELAB e LCH. Embora o LCH tenha excelente uniformidade perceptual geral, ele tem alguns artefatos de mudança de matiz quando as cores são interpoladas — particularmente no intervalo azul. O OKLCH corrige esses artefatos e produz gradientes e escalas de cores visualmente mais estáveis.

Em OKLCH, os valores de croma são expressos em uma escala menor — tipicamente 0 a cerca de 0,4 para cores dentro da gama Display P3, com cores sRGB geralmente caindo entre 0 e aproximadamente 0,33. A sintaxe CSS é:

/* OKLCH: um vermelho-laranja vívido */
color: oklch(0.63 0.24 27);

/* OKLCH: uma versão opaca e pastel */
color: oklch(0.85 0.08 27);

/* OKLCH: um cinza completamente neutro (croma zero) */
color: oklch(0.5 0 0);

Você pode converter qualquer cor hexadecimal para seu valor de croma OKLCH usando o Conversor de Cores. Cole um código hexadecimal e o conversor mostra os valores de L, C e H que fornecem uma medida precisa da intensidade absoluta dessa cor.

Por Que os Valores de Croma Não Têm Máximo Fixo

O croma máximo alcançável para qualquer cor depende da interseção de três fatores: matiz, luminosidade e a gama do dispositivo de saída. É por isso que o eixo de croma em OKLCH não tem um teto universal.

Por exemplo, na região verde de OKLCH (matiz em torno de 140°), a gama sRGB permite croma de até aproximadamente 0,29 na luminosidade média. Na região amarelo-verde, o croma máximo sRGB é menor — cerca de 0,21 — porque as primárias sRGB simplesmente não conseguem produzir amarelo-verdes muito saturados. Se você usar uma gama mais ampla como Display P3, esses tetos são mais altos na maioria das matizes.

Por Que o Croma Importa para Design e Paletas

Entender o croma desbloqueia um melhor controle sobre a consistência da paleta de cores. A percepção central é esta: quando você quer que duas cores pareçam igualmente vívidas, você precisa dar a elas croma igual — não saturação igual.

Harmonias de Croma Igual

Ao construir uma paleta de várias matizes destinadas a trabalhar em harmonia — digamos, um azul primário, um laranja secundário e um verde terciário — você pode fixar o valor de croma em todos os três. Na mesma luminosidade e croma, três cores com matizes diferentes parecerão igualmente vívidas, fazendo-as parecer uma família coesa em vez de uma seleção aleatória onde uma cor domina as outras.

/* Três cores de marca com croma igual (0,14) e luminosidade igual (0,65) */
--brand-blue:   oklch(0.65 0.14 260);
--brand-orange: oklch(0.65 0.14 50);
--brand-green:  oklch(0.65 0.14 145);

Alcançar isso com saturação HSL é impossível — cada matiz precisaria de um valor de saturação diferente para atingir a mesma vivacidade percebida, exigindo ajuste manual a olho nu.

Curvas de Croma em Escalas de Cores

Ao gerar uma escala de tinte a sombra para uma única matiz, o croma não permanece constante — ele naturalmente sobe e depois desce à medida que você vai do branco puro pela faixa vívida do meio ao preto puro. Isso ocorre porque as cores próximas ao branco e ao preto não conseguem sustentar alto croma; elas são inerentemente próximas ao neutro.

Entender isso significa que você pode projetar escalas de aparência mais natural permitindo que o croma siga um arco suave em vez de mantê-lo artificialmente plano:

/* Uma escala de azul com um arco de croma realista */
--blue-50:  oklch(0.97 0.02 260);  /* Próximo ao branco, croma baixo */
--blue-200: oklch(0.88 0.07 260);  /* Claro, croma suave */
--blue-400: oklch(0.72 0.14 260);  /* Médio-claro, croma crescente */
--blue-500: oklch(0.60 0.16 260);  /* Tom médio, croma de pico */
--blue-700: oklch(0.42 0.14 260);  /* Escuro, croma diminuindo */
--blue-900: oklch(0.25 0.07 260);  /* Próximo ao preto, croma baixo */

Isso produz uma escala que parece perceptualmente natural do claro ao escuro, porque espelha como o croma se comporta no mundo real.

Croma e Acessibilidade

A acessibilidade de cores no design de UI tipicamente se concentra na taxa de contraste, mas o croma desempenha um papel de suporte. Cores de croma muito baixo (próximas ao cinza) fornecem menos diferenciação visual quando usadas para codificar significado — por exemplo, em gráficos ou mapas. Se um usuário tem sensibilidade de cor reduzida (como em deficiência de visão de cores), uma paleta com diferenças de croma adequadamente variadas ajuda a manter a legibilidade mesmo quando as diferenças de matiz são menos perceptíveis.

Use o Gerador de Paletas para construir harmonias a partir de uma matiz específica e ajustar os valores de croma para encontrar o equilíbrio certo entre vivacidade e contenção.

Medindo e Comparando Valores de Croma

Aqui está uma tabela de referência de cores web comuns com seus valores de croma OKLCH, dando a você uma noção da escala:

Você pode verificar esses valores para qualquer cor usando o Conversor de Cores para converter um código hexadecimal para o formato OKLCH.

Quando o Alto Croma Ajuda

Cores de alto croma — aquelas com valores de 0,2 e acima em OKLCH — são apropriadas para:

• Cores primárias de marca que precisam ser distintivas e memoráveis
• Botões de call-to-action que devem se destacar em interfaces neutras
• Cores de destaque em visualização de dados onde a cor carrega significado
• Elementos interativos que se beneficiam de sinalizar claramente sua interatividade

Quando o Baixo Croma Ajuda

Cores de baixo croma — abaixo de 0,08 em OKLCH — são apropriadas para:

• Fundos e cores de superfície que não devem competir com o conteúdo
• Cores de texto neutras (o texto do corpo quase preto é cinza escuro de baixo croma)
• Elementos secundários de UI como bordas, divisórias e estados inativos
• Paletas sofisticadas no estilo editorial onde a contenção sinaliza qualidade

Principais Conclusões

• Croma é uma medida absoluta de coloração — o quanto uma cor se afasta do cinza neutro da mesma luminosidade. A saturação em HSL é uma medida relativa que não é consistente entre matizes ou níveis de luminosidade.
• LCH e OKLCH são os principais formatos CSS de cores que usam croma. OKLCH é preferido em 2024+ porque corrige artefatos de mudança de matiz que o LCH herda do CIELAB no intervalo azul.
• O croma não tem máximo fixo — o limite superior depende da matiz, da luminosidade e da gama de saída. Para sRGB, a maioria das matizes atinge entre 0,25 e 0,40 em OKLCH; Display P3 permite valores um pouco mais altos.
• Croma igual entre matizes produz paletas onde todas as cores parecem igualmente vívidas — algo impossível de alcançar com saturação HSL igual.
• O croma segue arcos naturalmente em escalas de cores — é mais alto na luminosidade média e cai em direção ao branco puro e ao preto puro. Projetar escalas que seguem esse arco parece mais natural.
• Use o Conversor de Cores para encontrar o valor de croma OKLCH de qualquer cor hexadecimal, e o Gerador de Paletas para explorar como o croma muda entre harmonias e escalas.