Espaços de cor para a web: sRGB, DCI-P3, Rec.2020, gamma e por que o mesmo hex parece diferente em dois ecrãs
O que é um espaço de cor: primárias, gama e o branco de referência
Um espaço de cor define três coisas: um conjunto de cores primárias, um ponto branco de referência e uma função de transferência. As cores primárias são especificadas como coordenadas de cromaticidade precisas no diagrama de cromaticidade CIE 1931 xy, um mapa bidimensional de todas as cores visíveis para um observador humano padrão. As três primárias formam um triângulo nesse diagrama. Todas as cores dentro do triângulo podem ser reproduzidas misturando essas primárias em proporções variáveis; as cores fora não podem. Este triângulo é a gama de cores do espaço.
O branco de referência é a cor que aparece quando as três primárias são acionadas com intensidade máxima. Para a maioria dos padrões de consumo e web, este é D65, um iluminante padrão que modela a luz do dia média a aproximadamente 6500 K de temperatura de cor. Dois ecrãs com as mesmas primárias de gama mas pontos brancos diferentes renderizarão o cinzento neutro de forma diferente. Quando um navegador interpreta o valor CSS #808080, assume sRGB com ponto branco D65, e assume que o seu ecrã corresponde a essa suposição.
sRGB: a base universal da web, padronizada em 1996
sRGB foi definido em 1996 pela Comissão Eletrotécnica Internacional como IEC 61966-2-1. Foi concebido para corresponder às características de um monitor CRT de consumo típico de meados dos anos 90. A sua primária vermelha situa-se nas coordenadas CIE xy aproximadamente em (0.64, 0.33), verde em (0.30, 0.60) e azul em (0.15, 0.06). O triângulo de gama resultante cobre aproximadamente 35% das cores visíveis para um observador humano padrão segundo o diagrama de cromaticidade CIE 1931.
Cada cor hexadecimal CSS, cada PNG ou JPEG sem perfil ICC incorporado e cada pixel de canvas HTML está implicitamente em sRGB. Os navegadores assumem sRGB a menos que seja indicado o contrário. O limite prático mostra-se nas bordas da gama: vermelhos muito saturados, verdes vívidos e cianos puros não podem ser totalmente representados. Um tomate maduro fotografado ao ar livre tem muitas vezes um vermelho que fica fora da gama sRGB; o ficheiro de imagem corta esse vermelho ao valor sRGB mais próximo, fazendo a cor parecer ligeiramente menos vívida no ecrã do que em pessoa.
DCI-P3: um padrão de cinema adotado pelos ecrãs de consumo
DCI-P3 teve origem no consórcio Digital Cinema Initiatives. As suas primárias estão deslocadas em comparação com sRGB: a primária vermelha move-se ligeiramente para o laranja (xy aproximadamente 0.680, 0.320) e o verde estende-se mais para o verde puro (0.265, 0.690). A gama resultante cobre aproximadamente 45.5% do diagrama de cromaticidade CIE 1931, cerca de 26% mais área do que sRGB. Esta gama mais ampla foi concebida para que os projetores de cinema digital pudessem reproduzir cores saturadas comparáveis ao cinema analógico.
Os ecrãs de consumo começaram a incorporar primárias P3 por volta de 2015, quando a Apple introduziu painéis com capacidade P3 no iMac de 27 polegadas, seguido pelo iPhone 7 em 2016. Um pixel renderizado como #FF0000 num ecrã P3 usando o espaço de cor P3 aparece notavelmente mais saturado do que o mesmo valor num ecrã sRGB. O CSS expõe P3 através da função color(): color(display-p3 1 0 0) especifica o vermelho P3 mais saturado. Todos os principais navegadores desde 2023 compreendem esta sintaxe.
Rec.2020: o padrão broadcast do futuro e a lacuna atual dos ecrãs
Rec.2020 (formalmente ITU-R BT.2020) foi definido pela União Internacional de Telecomunicações em 2012 como padrão para televisão de ultra-alta definição. As suas primárias aproximam-se da luz monocromática: o vermelho é definido perto de 630 nm, o verde perto de 532 nm e o azul perto de 467 nm. A gama resultante cobre aproximadamente 75.8% do diagrama de cromaticidade CIE 1931, aproximadamente duas vezes a área do sRGB.
A lacuna entre o padrão e a prática é significativa: nenhum ecrã de consumo disponível em 2025 consegue reproduzir a gama completa do Rec.2020. Monitores de referência profissionais de topo conseguem atingir aproximadamente 75–80% do volume Rec.2020 medido no modelo de aparência de cor tridimensional CIECAM02. O conteúdo de vídeo HDR é frequentemente masterizado com primárias Rec.2020 combinadas com uma função de transferência PQ ou HLG, mas as plataformas de streaming entregam tipicamente o sinal final mapeado para Display P3 ou sRGB.
Gamma e a função de transferência: por que a codificação sRGB não é uma lei de potência pura
A expressão 'gamma 2.2' é comumente usada para descrever sRGB, mas sRGB usa uma função de transferência por partes em vez de uma lei de potência pura. A norma IEC 61966-2-1 define dois segmentos: para valores de luminância muito baixos (C linear não excedendo 0.0031308) a codificação é linear, C multiplicado por 12.92; acima desse limiar segue uma curva de potência aproximadamente igual a 1.055 vezes C elevado à potência de 1/2.4, menos 0.055. O resultado aproxima-se estreitamente de gamma 2.2 ao longo da maior parte do intervalo utilizável.
Esta codificação importa no processamento de imagens. Reduzir uma imagem calculando a média de pixels adjacentes no domínio gamma codificado produz um resultado ligeiramente mais escuro do que calcular a média em luz linear. A redução correta de imagens lineariza os valores primeiro, calcula a média e depois recodifica. Os gradientes CSS e color-mix() misturam no espaço sRGB por padrão, interpolando através de valores comprimidos por gamma em vez de luz linear.
Por que a mesma cor hexadecimal parece diferente em dois ecrãs
Vários fatores independentes explicam por que #FF6600 num ecrã parece diferente de #FF6600 noutro. Primeiro, se um ecrã tem uma gama física mais ampla (hardware P3) mas carece de gestão de cor do sistema operativo, pode expandir ingenuamente os valores de sinal sRGB para a sua gama de primárias mais ampla, fazendo todas as cores parecerem sobressaturadas. Segundo, um ecrã não calibrado pode ter um ponto branco real, curva gamma ou temperatura de cor diferente do que o padrão sRGB assume. Terceiro, o suporte de gestão de cor nos navegadores variou historicamente.
O perfil de cor ICC incorporado numa imagem, ou o perfil de ecrã aplicado por software de calibração, descreve o mapeamento desde o espaço de cor codificado desse conteúdo até à resposta medida real do ecrã. O pipeline de gestão de cor do SO — ColorSync no macOS, Windows Color System no Windows — realiza esta conversão para cada ecrã conectado. Os programadores web que visam ecrãs de gama ampla podem usar @media (color-gamut: p3) para fornecer valores color(display-p3 ...) para cores de interface vívidas, mantendo o hex simples como retorno sRGB. As ferramentas de paleta de cores e simulação de daltonismo do TeaFun operam em sRGB.