Mapeamento de Gamut de Cores: Convertendo Entre Espaços de Cor

Quando você fotografa um pôr do sol vívido em uma câmera profissional e o abre em um navegador web, algo se perde. Os laranjas e roxos profundos e saturados que o sensor wide gamut da câmera registrou não podem ser reproduzidos exatamente em todos os displays — e mesmo quando podem, as cores podem não sobreviver à conversão para um formato compatível com a web. Esse processo de adaptar cores que existem em um espaço de cor para caber dentro dos limites de outro é chamado de mapeamento de gamut. É uma das operações menos visíveis mas mais consequentes em todo o pipeline de cores digital, e entendê-la é essencial para qualquer pessoa que se preocupa com precisão de cores do design à produção.

O que é Mapeamento de Gamut?

Um gamut de cores é o conjunto completo de cores que um dispositivo, formato ou espaço de cor específico pode representar. Todo gamut tem limites — cores que se enquadram dentro deles podem ser representadas com precisão; cores fora deles não podem.

Diferentes dispositivos e espaços de cor têm gamuts diferentes:

Quando você move uma cor de um gamut maior para um menor, algumas cores podem cair fora do gamut de destino. Essas são chamadas de cores fora do gamut. O mapeamento de gamut é o processo de decidir o que fazer com elas.

O inverso — mover de um gamut menor para um maior — é geralmente sem perdas, pois todas as cores de origem se encaixam dentro do destino. Um arquivo sRGB exibido em um monitor Display P3 simplesmente usa um subconjunto do alcance desse monitor. Nenhum mapeamento de gamut necessário.

O Problema das Cores Fora do Gamut

Considere um ciano vívido: #00FFFF (#00FFFF) em sRGB. Essa cor fica perto da borda do gamut sRGB. No Display P3, há cianos mais saturados disponíveis — cores que o sRGB não pode representar de forma alguma.

Agora imagine que você projeta uma interface no Display P3, usando um verde vívido que cai fora do sRGB: aproximadamente color(display-p3 0.0 0.9 0.3) — um verde significativamente mais saturado do que #00E84A (#00E84A) em sRGB. Quando um usuário visualiza isso em um monitor sRGB padrão, o navegador deve tomar uma decisão: qual cor sRGB deve representar esse verde irreproduzível?

Essa decisão é o mapeamento de gamut, e existem várias abordagens com diferentes compensações.

Recorte vs Compressão Perceptual

As duas estratégias principais para lidar com cores fora do gamut são recorte e mapeamento perceptual (compressão).

Recorte

O recorte é a abordagem mais simples: cores fora do gamut são fixadas ao ponto mais próximo na fronteira do gamut. É análogo a pegar um valor de 1,5 em uma escala de 0 a 1 e simplesmente defini-lo como 1.

Para uma cor com um valor de saturação fora do gamut, o recorte define essa saturação para o valor máximo que o gamut de destino permite, enquanto deixa luminosidade e matiz inalterados. O resultado:

• Cores perto da fronteira: mudança visível mínima
• Cores bem fora do gamut: perda significativa de precisão de matiz, cores que podem parecer muito diferentes do original

O maior problema com o recorte é o deslocamento de matiz. Muitas cores fora do gamut recortam de uma forma que desloca perceptivelmente seu matiz. Um verde vívido pode recortar para um amarelo-verde; um violeta profundo pode recortar para um azul. O matiz original não é preservado.

O recorte também cria faixas: uma variedade de cores de origem diferentes recortam para o mesmo ponto de fronteira de saturação máxima, produzindo degraus visíveis em gradientes ou transições de cor suaves que deveriam parecer contínuas.

Apesar dessas desvantagens, o recorte é comum para imagens estáticas e CSS porque é computacionalmente trivial.

Intenção de Renderização Perceptual (Compressão)

A renderização perceptual — às vezes chamada de mapeamento por compressão — adota uma abordagem diferente. Em vez de apenas ajustar cores fora do gamut, ela dimensiona todo o gamut proporcionalmente. As cores mais saturadas na fonte são mapeadas para as cores mais saturadas disponíveis no destino, e todo o restante é dimensionado de acordo.

Imagine que você está encaixando uma grande pintura (gamut Display P3) em uma tela menor (gamut sRGB) reduzindo toda a pintura proporcionalmente em vez de cortar. Nenhuma cor é cortada; em vez disso, todas as relações entre cores são preservadas — apenas comprimidas.

Vantagens da compressão perceptual: - Gradientes suaves permanecem suaves (sem faixas) - As relações relativas entre cores são preservadas - Geralmente mais visualmente agradável para fotografia e gradientes

Desvantagens: - Cores dentro do gamut também são deslocadas (reduzidas ligeiramente em saturação), mesmo que não precisassem ser - As cores podem parecer ligeiramente menos vívidas do que o original, mesmo onde poderiam ter sido reproduzidas com precisão

A intenção de renderização perceptual é o padrão usado por perfis de cores ICC em fluxos de trabalho de impressão e fotografia profissional. É também a abordagem usada pelo algoritmo de mapeamento de gamut CSS.

Colorimétrico Relativo (com Compensação de Ponto Preto)

Uma terceira abordagem — colorimétrico relativo — mapeia cores dentro do gamut exatamente e recorta cores fora do gamut, enquanto ajusta para a diferença no ponto de branco entre a fonte e o destino. É um bom compromisso para documentos com poucas cores fora do gamut, pois preserva a precisão dentro do gamut melhor do que o perceptual.

Intenção de Renderização de Saturação

Uma quarta intenção usada principalmente em gráficos de negócios: maximizar a saturação à custa da precisão de matiz. Usada para gráficos de barras e pizza onde cores vívidas e distintas são mais importantes do que a reprodução precisa de matiz.

Mapeamento de Gamut CSS

O CSS suporta múltiplos espaços de cor desde a especificação CSS Color Level 4, e o mapeamento de gamut agora está integrado ao algoritmo de resolução de cores CSS.

Especificando Cores de Wide Gamut em CSS

/* sRGB (tradicional) */
color: #22C55E;
color: rgb(34, 197, 94);

/* Display P3 (wide gamut) */
color: color(display-p3 0.05 0.8 0.35);

/* Rec. 2020 (ultra-wide) */
color: color(rec2020 0.1 0.7 0.2);

/* OKLCH (perceptualmente uniforme, pode endereçar cores de wide gamut) */
color: oklch(0.75 0.25 150);  /* Verde muito vívido — pode estar fora do sRGB */

Como o CSS Lida com Excesso de Gamut

Quando um valor de cor CSS endereça uma cor que está fora do gamut do display, o navegador aplica o algoritmo de mapeamento de gamut CSS definido no CSS Color Level 4. O algoritmo usa busca binária no espaço de cor OKLCH para encontrar a cor mais similar dentro do gamut usando deltaE 2000 (uma métrica de diferença de cor perceptual) como medida de distância.

O resultado é uma abordagem de mapeamento de gamut que prioriza: 1. Preservar luminosidade primeiro (os deslocamentos de luminosidade são os mais perceptíveis) 2. Preservar matiz em segundo 3. Reduzir croma (saturação) até que a cor caiba dentro do gamut alvo

Esta é uma melhoria significativa em relação ao recorte sRGB simples. O algoritmo CSS produz resultados mais próximos da compressão perceptual para cores que estão apenas ligeiramente fora do gamut, enquanto degrada graciosamente para cores muito fora do gamut.

A Media Query color-gamut

O CSS fornece uma media query para detectar qual gamut o display suporta, permitindo servir cores diferentes para capacidades diferentes:

/* Padrão: cores sRGB para todos os displays */
.brand-color {
  color: #22C55E;
}

/* Aprimorado: cores P3 mais vívidas para displays capazes */
@media (color-gamut: p3) {
  .brand-color {
    color: color(display-p3 0.05 0.8 0.35);
  }
}

/* Ultra-wide: vibrância máxima para displays Rec. 2020 */
@media (color-gamut: rec2020) {
  .brand-color {
    color: color(rec2020 0.1 0.7 0.2);
  }
}

Os três valores para color-gamut: - srgb — display cobre aproximadamente o gamut sRGB (mais comum) - p3 — display cobre aproximadamente o gamut Display P3 (Mac moderno, iPhone, Android de ponta) - rec2020 — display cobre aproximadamente o gamut Rec. 2020 (displays profissionais e HDR)

OKLCH e Wide Gamut

O OKLCH é particularmente adequado para trabalho de design de wide gamut porque valores de croma alto endereçam naturalmente cores fora do sRGB. Um valor de croma acima de aproximadamente 0,37 em OKLCH estará fora do gamut sRGB para a maioria dos matizes, caindo no Display P3 ou além.

/* Dentro do sRGB: verde vívido */
color: oklch(0.75 0.22 145);

/* Fora do sRGB, no Display P3: verde mais vívido */
color: oklch(0.75 0.35 145);

/* Bem fora do sRGB: o navegador vai mapear o gamut */
color: oklch(0.75 0.5 145);

Quando uma cor OKLCH está fora do gamut, o CSS aplica automaticamente seu algoritmo de mapeamento de gamut. Você não precisa lidar com isso manualmente — o navegador resolve.

Use o Conversor de Cores para converter cores entre espaços de cor e ver como os valores mudam ao mover entre representações sRGB, Display P3 e OKLCH.

Soluções Práticas para Designers

Entender o mapeamento de gamut muda como você aborda o trabalho de cores para telas:

1. Projete no Gamut Alvo

Se seu produto visa principalmente usuários web em uma combinação de dispositivos, projete em sRGB. Se você sabe que seu público é principalmente em hardware Apple moderno (Mac, iPhone), considere projetar em Display P3 e fornecer fallbacks sRGB.

2. Conheça o Status de Gamut das Suas Cores Vívidas

Muitas cores vívidas que "funcionam" em ferramentas como o Figma (que usa Display P3 em hardware Apple) podem parecer diferentes quando exportadas para sRGB para uso web. Sempre verifique as cores finais com um valor CSS que você definiu explicitamente, não apenas o que o Figma renderiza na sua tela.

Alguns verdes, cianos e magentas extremamente vívidos no Design P3 não têm equivalente sRGB. Se a cor da sua marca é color(display-p3 0.0 0.9 0.3) — um verde mais vívido do que qualquer verde sRGB — você precisa decidir qual fallback sRGB usar, ou aceitar que usuários sRGB verão uma versão menos vívida.

3. Teste Transições de Gradiente Entre Gamuts

Gradientes entre duas cores de wide gamut podem produzir faixas quando exibidos em monitores sRGB, porque cores intermediárias que pareciam distintas no P3 todas mapeiam para valores sRGB similares (recorte de cor no meio do gradiente). Se você vir faixas em um gradiente, tente:

• Reduzir o croma de ambos os pontos finais para níveis seguros em sRGB
• Adicionar paradas de gradiente intermediárias para distribuir a transição
• Rotear o gradiente através do OKLCH para espaçamento perceptualmente uniforme

4. Use o Formato de Exportação Correto

Para imagens contendo cores de wide gamut: - JPEGs: Incorpore o perfil de cor (Display P3 ou Adobe RGB) — os navegadores o usarão para gerenciamento de cores - PNGs: O mesmo — incorpore o perfil - WebP: Suporta perfis ICC; incorpore para cores precisas - SVG: As cores são especificadas em CSS — use a função color() para wide gamut

Imagens sem perfis incorporados são assumidas como sRGB e serão exibidas sem conversão de gamut. Uma imagem de wide gamut sem um perfil incorporado parecerá mais desbotada do que o pretendido em displays P3.

5. A Abordagem Segura de Wide Gamut

Para designers que desejam cores mais ricas sem a complexidade de gerenciar múltiplos alvos de gamut, OKLCH com croma moderado (0,18–0,25) fica principalmente dentro do sRGB enquanto fornece resultados ligeiramente mais vívidos do que cores RGB típicas nessa faixa. O mapeamento de gamut CSS lida com quaisquer casos extremos automaticamente.

/* Azuis vívidos mas principalmente seguros em sRGB */
--color-primary: oklch(0.55 0.22 255);
--color-primary-hover: oklch(0.60 0.22 255);

Conclusões Principais

• Um gamut de cores é o conjunto de cores que um dispositivo ou espaço de cor pode representar. sRGB é a web padrão; Display P3 é ~26% maior e disponível em dispositivos Apple modernos e de ponta.
• Cores fora do gamut são cores que ficam fora de um gamut alvo e não podem ser reproduzidas com precisão nesse dispositivo — algo deve acontecer para trazê-las para dentro dos limites.
• O recorte fixa cores fora do gamut na fronteira do gamut — rápido, mas pode causar deslocamentos de matiz e faixas. A compressão perceptual dimensiona todo o gamut proporcionalmente — mais lenta, mas preserva relações de cores e gradientes.
• O CSS Color Level 4 define um algoritmo de mapeamento de gamut que usa OKLCH e deltaE 2000 para reduzir inteligentemente o croma enquanto preserva luminosidade e matiz — muito superior ao recorte sRGB ingênuo.
• A media query color-gamut permite servir cores color(display-p3) mais vívidas para displays capazes enquanto mantém fallbacks sRGB para outros.
• Armadilhas do design de wide gamut: O Figma em hardware Apple renderiza Display P3 por padrão — cores que parecem vívidas no Figma podem parecer menos saturadas quando exportadas como sRGB para uso web. Sempre verifique com valores CSS explícitos.
• Use o Conversor de Cores para inspecionar como qualquer cor se traduz entre sRGB, Display P3 e OKLCH para entender seu status de gamut e encontrar o equivalente mais próximo dentro do gamut.