P3→sRGB Color Consistency — A Practical Guide 2025

When colors look “muddy” or “over‑saturated,” it’s often a mismatch between ICC handling and browser implementations. This guide lists the minimum steps to keep color consistent end‑to‑end from creation to delivery.

Different design apps (Photoshop/Sketch/Figma/Illustrator, etc.) behave differently regarding color spaces; if ICC is stripped at export, colors drift. On the delivery side, SNS/email/OGP re‑encoding also tends to drop ICC. sRGB‑fixed output is still the safest cross‑platform choice.

Core strategy

1. Keep masters in P3/16‑bit; explicitly convert delivery assets to sRGB/8‑bit
2. Embed ICC correctly (or explicitly declare sRGB)
3. Know color‑space options and caveats for JPEG/WebP/AVIF

Note: CSS Color Level 4 brings wider P3 support on the web, but if image ICC and CSS color management aren’t aligned, visuals will break. For cross‑channel delivery (OGP/email/ads), treat sRGB as the baseline.

See also: Color management basics, Practical P3 delivery

Format notes

AVIF

• Use nclx to declare sRGB; do P3→sRGB conversion ahead of time
• At lower quality settings, saturation tends to collapse first; for photos, start evaluation at quality 50–65

WebP

• Supports embedded ICC. For UI elements that suffer from posterization, consider PNG

PNG

• Good for UI/logos that need strict color fidelity. Keep ICC; strip unneeded chunks (tEXt, etc.) to avoid bloat

JPEG

• Embed ICC explicitly. Still strong on mobile‑heavy surfaces

Automation snippets (pseudo)

# Explicit conversion to sRGB (ImageMagick)
magick input-p3.tif -colorspace sRGB -profile sRGB.icc -strip output-srgb.tif

# AVIF export (sharp‑equivalent)
sharp output-srgb.tif --avif quality=60 chromaSubsampling=4:2:0

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

QA checklist

• [ ] Compare color rendering across browser/OS combos, including Canvas
• [ ] For thumbnails/OGP/etc., force sRGB (assume platform re‑encoding)
• [ ] Split print workflows to separate CMYK pipeline

Choosing rendering intent (at a glance)

Rendering intent changes the result for out‑of‑gamut colors.

• Relative Colorimetric
  • Aligns white point; clips out‑of‑gamut colors to the boundary
  • Best for UI/brand/logo where defined colors must hold
• Perceptual
  • Re‑maps more broadly to preserve overall relationships
  • Best for photos/gradients/skin tones
• Saturation
  • Prioritizes vividness
  • Rare in production; sometimes used for charts/slides

Practical tip: For P3→sRGB, prefer Perceptual for photos and Relative Colorimetric for UI. On mixed pages, split layers before export or process elements separately.

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

App‑specific workflows (field notes)

• Photoshop
  • Work in P3/16‑bit with ICC embedded; soft‑proof sRGB (Proof Setup)
  • Export: enable “Convert to sRGB,” include ICC
• Illustrator
  • Use RGB doc mode; assign Display‑P3 profile when designing
  • Export: ensure conversion to sRGB; for SVG, validate under color-gamut: sRGB
• Figma/Sketch
  • Preview is device‑dependent; at export, force conversion to sRGB
  • Double‑check colors for background blends/alpha elements after export

References: P3 delivery in practice, Color management basics

Measurement and verification (ΔE & devices)

• Targets: logo/UI ΔE ≤ 2, photos ΔE ≤ 3 typically look close enough by eye
• Compare on a P3 iPhone and an sRGB‑like laptop
• Test patterns: gradients, skin tones, brand colors

# Example: compare test patches (pseudo)
compare-dE input-p3.tif output-srgb.jpg --ref sRGB.icc --patches skin,brand,gradients

Automation pipeline (Node/Sharp pseudo)

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 tip: Route icons/transparent UI to PNG/WebP. With AVIF nclx, always declare sRGB—don’t carry wide‑gamut into delivery assets.

Symptoms → cause → fix

• Photos look dull → clipping with Relative during conversion → try Perceptual
• Logo colors off → ICC got dropped on export → re‑export with sRGB conversion + ICC
• SNS/OGP shifts → platform re‑encoding → upload sRGB/JPEG and verify after publish

FAQ

Q. Is it OK to deliver AVIF in P3?

A. Browser support is improving, but cross‑channel delivery (SNS/apps/email) still breaks. Start with sRGB as a quality baseline.

Q. Why do image colors disagree with CSS color(display-p3 …)?

A. Image ICC and CSS color management are out of sync. Align both and validate consistently.

Summary

“Create in wide gamut; deliver in sRGB reliably.” Color mishaps show up as quality regressions and can hurt SEO. Always eyeball key devices before publishing, and keep an ICC/visual delta checklist in your ops routine.