Display P3

Display P3 é um espaço de cores RGB de gama ampla introduzido pela Apple em 2015. Ele usa as mesmas primárias vermelha e azul do DCI-P3 (o padrão de projeção de cinema de 2007), mas com o ponto branco e o gama próprios da Apple. Comparado ao sRGB, o P3 cobre ~25% mais volume de cores — a maior parte extra está nos vermelhos e verdes saturados.

A Apple fornece todos os monitores Mac e iPhone de 2017 em diante com painéis da classe P3. Outros fabricantes seguiram; a maioria dos telefones Android premium, monitores de médio e alto padrão, e todas as TVs OLED atingem P3 ou além.

O CSS Color Module Level 4 suporta P3 via função color(): color(display-p3 1 0.4 0.2). A mesma cor expressa em sRGB seria cortada — o laranja saturado brilhante não existe em sRGB. Navegadores que suportam ambos renderizarão a versão P3 em monitores com capacidade P3 e farão fallback gracioso nos demais.

Os conversores de cores da Convertitive atualmente trabalham apenas em sRGB. O suporte a P3 está no roadmap.

A distinção entre DCI-P3, Display P3 e P3-D65 que confunde designers: três especificações diferentes carregam “P3” no nome. DCI-P3 é o padrão SMPTE original de cinema com um ponto branco deslocado para o verde (cerca de 6300 K) e um gama de potência pura 2,6 — usado por projetores de cinema, não por monitores de consumo. Display P3 é a adaptação da Apple com o ponto branco D65 padrão do consumidor (6504 K) e a curva de gama por partes do sRGB. P3-D65 é o mesmo que Display P3 com outro nome. O color(display-p3 …) do CSS significa Display P3 especificamente; ativos exportados de pipelines de cinema como DCI-P3 parecerão levemente esverdeados se tratados como Display P3 sem conversão.

Detectando suporte P3 no código corretamente: use a media query CSS @media (color-gamut: p3) para condicionar estilos de gama ampla, combinada com @supports (color: color(display-p3 0 0 0)) para a propriedade. Navegadores sem renderização de gama ampla ou rodando em monitores sRGB farão fallback para a declaração sRGB fornecida junto. Evite o erro comum de declarar apenas cores P3 — navegadores somente sRGB ignorarão a regra e seu CSS reverterá para os padrões herdados. A metodologia de cores da Convertitive cobre o padrão de declaração dupla. Relacionado: sRGB, gamut, cromaticidade. Referência: ICC — Caracterização do Display P3.

Exemplo prático: um vermelho de marca além do sRGB

Uma marca quer o vermelho mais saturado que seus clientes iPhone possam renderizar. Em sRGB o vermelho máximo é rgb(255, 0, 0) com coordenadas de cromaticidade CIE-1931 de aproximadamente (0,640, 0,330). A primária equivalente do Display P3 fica em (0,680, 0,320) — completamente fora do triângulo sRGB. Declarada como color(display-p3 1 0 0), a cor é aproximadamente 25% mais saturada visualmente em um painel de gama ampla. Em um monitor somente sRGB, a declaração dupla CSS background: red; background: color(display-p3 1 0 0); faz fallback gracioso. Fotografando os dois lado a lado em um telefone P3, a diferença é visível a distância do braço — especialmente no vermelho da Coca-Cola, no vermelho Ferrari e em outras cores de marca que historicamente eram cortadas na web.

Quando o P3 importa e quando não importa

Para identidade de marca, imagens de marketing e portfólios de fotografia, P3 é uma melhoria significativa — vermelhos saturados, verdes e tons de pele ganham profundidade visível. Para a maioria do trabalho de UI (texto, neutros, acentos suavizados), a diferença é imperceptível porque as cores nunca se aproximam do limite da gama sRGB de qualquer forma. Para fluxos de trabalho de impressão, P3 é em grande parte irrelevante; as gamas das impressoras são menores do que sRGB em regiões saturadas e a conversão acontece por meio de perfis CMYK de qualquer forma. A especificação CSS Color 4 do W3C é a fonte autoritativa para a sintaxe e as regras de renderização: CSS Color Module Level 4 — Display P3.