Consistência de Cores P3→sRGB — Guia Prático 2025

Quando as cores parecem “lavadas” ou “exageradas”, quase sempre é desalinhamento entre o perfil ICC do arquivo e a implementação do navegador. Este guia dá o mínimo viável para manter consistência do estúdio à publicação.

Apps de design (Photoshop/Sketch/Figma/Illustrator, etc.) tratam espaços de cor de formas distintas; se o ICC some na exportação, a aparência sai do eixo. Na entrega, SNS/email/OGP costumam descartar ICC. Como baseline, entregar em sRGB ainda é o caminho mais seguro.

Estratégia central

1. Trabalhe o master em P3/16‑bit; gere os assets de delivery explicitamente em sRGB/8‑bit
2. Incorpore ICC corretamente (ou declare sRGB de forma explícita)
3. Entenda opções e ressalvas de JPEG/WebP/AVIF

Nota: CSS Color Level 4 traz suporte P3 mais amplo no navegador, mas se a imagem e o CSS não “falam” o mesmo espaço, o visual quebra. Para superfícies multiplataforma (OGP/email/ads), trate sRGB como baseline.

Veja também: Fundamentos de gerenciamento de cor, P3 na prática

Observações por formato

AVIF

• Use nclx para declarar sRGB; faça a conversão P3→sRGB antes
• Em qualidades baixas, saturação colapsa primeiro; para foto, avalie a partir de quality 50–65

WebP

• Suporta ICC embutido. Para UI com risco de posterização, considere PNG

PNG

• Ótimo para UI/logos com fidelidade estrita. Preserve ICC; elimine chunks supérfluos (tEXt, etc.) para evitar inchaço

JPEG

• Incorpore ICC explicitamente. Ainda domina em mobile

Automação (trechos ilustrativos)

# Conversão explícita para sRGB (ImageMagick)
magick input-p3.tif -colorspace sRGB -profile sRGB.icc -strip output-srgb.tif

# Exportar AVIF (equivalente sharp)
sharp output-srgb.tif --avif quality=60 chromaSubsampling=4:2:0

# Exportar WebP (cwebp)
cwebp -q 80 -m 6 -metadata icc -af output-srgb.tif -o output.webp

Checklist de QA

• [ ] Compare a renderização em combinações de navegador/SO, incluindo Canvas
• [ ] Para thumbnail/OGP/etc., force sRGB (assuma re‑encode da plataforma)
• [ ] Separe fluxo de impressão em pipeline CMYK próprio

Rendering intent (visão rápida)

O rendering intent muda o resultado para cores fora do gamut.

• Relative Colorimetric
  • Alinha o white point; corta fora‑de‑gamut na borda
  • Melhor para UI/brand/logo com cor definida
• Perceptual
  • Mapeia de forma ampla mantendo relação entre cores
  • Melhor para fotos/gradientes/tons de pele
• Saturation
  • Prioriza vividez
  • Raro em produção; às vezes para gráficos/slides

Dica prática: Para P3→sRGB, use Perceptual em fotos e Relative em UI. Em páginas mistas, separe camadas antes de exportar ou processe elementos separadamente.

# ImageMagick: definir rendering intent
magick input-p3.tif \
  -intent Perceptual \
  -profile P3.icc -profile sRGB.icc \
  -strip output-srgb-perceptual.tif

Fluxos por aplicativo (campo)

• Photoshop
  • Trabalhe em P3/16‑bit com ICC; faça soft‑proof sRGB
  • Exportação: marque “Convert to sRGB” e inclua ICC
• Illustrator
  • Documento em RGB; defina Display‑P3 ao desenhar
  • Exportação: converta para sRGB; para SVG, valide color-gamut: sRGB
• Figma/Sketch
  • Prévia varia por dispositivo; ao exportar, force conversão sRGB
  • Revise cores para fundos mistos/alpha após exportar

Referências: P3 na prática, Fundamentos de gerenciamento de cor

Medição e verificação (ΔE & dispositivos)

• Alvos: logo/UI ΔE ≤ 2; fotos ΔE ≤ 3 geralmente são indistinguíveis
• Compare em iPhone P3 e laptop sRGB‑like
• Padrões de teste: gradientes, tons de pele, cores de marca

# Exemplo: comparar patches de teste (pseudo)
compare-dE input-p3.tif output-srgb.jpg --ref sRGB.icc --patches skin,brand,gradients

Pipeline de automação (Node/Sharp – ilustrativo)

import sharp from 'sharp'

async function toSRGB(input: Buffer) {
  return sharp(input, { unlimited: true })
    .withMetadata({ icc: 'sRGB.icc' })
    .pipelineColorspace('srgb')
    .toFormat('avif', { quality: 60, effort: 5 })
    .toBuffer()
}

Ops tips: Direcione ícones/UI transparentes a PNG/WebP. Com AVIF nclx, declare sRGB — não leve wide‑gamut aos assets de delivery.

Sintomas → causas → correções

• Foto lavada → clipping com Relative na conversão → tente Perceptual
• Cor de logo desviada → ICC sumiu na exportação → reexporte com conversão sRGB + ICC
• Mudança em SNS/OGP → re‑encode da plataforma → publique JPEG sRGB e verifique após publicação

FAQ

P. Posso enviar AVIF em P3?

R. O suporte de navegador cresce, mas canais como SNS/app/email ainda são frágeis. Comece com sRGB como baseline.

P. Por que a cor da imagem difere do CSS color(display-p3 …)?

R. ICC da imagem e gerenciamento de cor do CSS estão dessincronizados. Alinhe ambos e valide.

Resumo

“Crie em gamut amplo; entregue em sRGB confiável.” Regressões de cor viram regressões de qualidade e podem afetar SEO. Teste em dispositivos‑chave e mantenha checklist de ICC/ΔE no seu operacional.