Consistencia de color P3→sRGB — Guía práctica 2025

Cuando los colores se ven “apagados” o “sobre‑saturados”, suele ser por desajustes entre el tratamiento de ICC y las implementaciones del navegador. Esta guía resume los pasos mínimos para mantener la consistencia de color de extremo a extremo, desde la creación hasta la entrega.

Las apps de diseño (Photoshop/Sketch/Figma/Illustrator, etc.) difieren en su manejo del espacio de color; si el ICC se elimina al exportar, los colores se desvían. En la entrega, SNS/correo/OGP también suelen quitar ICC. Fijar la salida en sRGB sigue siendo lo más seguro entre plataformas.

Estrategia básica

1. Conservar los másteres en P3/16‑bit; convertir explícitamente a sRGB/8‑bit para entrega
2. Incrustar ICC correctamente (o declarar sRGB de forma explícita)
3. Conocer opciones y precauciones de espacio de color en JPEG/WebP/AVIF

Nota: CSS Color Level 4 aporta más soporte a P3 en web, pero si el ICC de la imagen y la gestión de color de CSS no están alineados, la visualización se rompe. En canales cruzados (OGP/correo/ads), toma sRGB como base.

Consulta también: Fundamentos de gestión de color, Entrega práctica en P3

Notas por formato

AVIF

• Usa nclx para declarar sRGB; realiza la conversión P3→sRGB por adelantado
• A baja calidad, la saturación colapsa primero; en fotos, empieza evaluando en quality 50–65

WebP

• Soporta ICC incrustado. Para UI sensibles a la posterización, considera PNG

PNG

• Adecuado para UI/logos con alta fidelidad de color. Mantén ICC; elimina chunks innecesarios (tEXt, etc.) para evitar bloat

JPEG

• Incrusta ICC de forma explícita. Sigue siendo fuerte en superficies con alto tráfico móvil

Fragmentos de automatización (pseudo)

# Conversión explícita a sRGB (ImageMagick)
magick input-p3.tif -colorspace sRGB -profile sRGB.icc -strip output-srgb.tif

# Exportar AVIF (equivalente en 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

Lista de control de QA

• [ ] Compara el renderizado de color entre combinaciones de navegador/SO, incluyendo Canvas
• [ ] Para miniaturas/OGP/etc., fija sRGB (asume re‑codificación de la plataforma)
• [ ] Separa los flujos de impresión en una canalización CMYK independiente

Elección del intent de renderizado (de un vistazo)

El intent de renderizado cambia el resultado para colores fuera de gama.

• Colorimétrico relativo
  • Alinea el punto blanco; recorta los fuera de gama al borde
  • Ideal para UI/marca/logotipos donde deben mantenerse colores definidos
• Perceptual
  • Re‑mapea ampliamente para conservar relaciones globales
  • Ideal para fotos/degradados/tonos de piel
• Saturación
  • Prioriza lo vívido
  • Poco común en producción; a veces para gráficos/diapositivas

Consejo: En P3→sRGB, usa Perceptual para fotos y Colorimétrico relativo para UI. En páginas mixtas, separa capas antes de exportar o procesa por elemento.

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

Flujos por aplicación (notas de campo)

• Photoshop
  • Trabaja en P3/16‑bit con ICC incrustado; prueba sRGB (Proof Setup)
  • Exporta: activa “Convert to sRGB” e incluye ICC
• Illustrator
  • Documento RGB; asigna perfil Display‑P3 al diseñar
  • Exporta: convierte a sRGB; para SVG, valida bajo color-gamut: sRGB
• Figma/Sketch
  • La vista previa depende del dispositivo; en exportación, fuerza conversión a sRGB
  • Verifica colores en mezclas de fondo/elementos con alfa tras exportar

Referencias: Entrega en P3, Fundamentos de gestión de color

Medición y verificación (ΔE y dispositivos)

• Objetivos: logo/UI ΔE ≤ 2, fotos ΔE ≤ 3 suelen verse bastante cercanas
• Compara en un iPhone P3 y un portátil tipo sRGB
• Patrones: degradados, tonos de piel, colores de marca

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

Canalización de automatización (Node/Sharp)

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()
}

Operación: enruta iconos/UI con transparencia a PNG/WebP. Con AVIF nclx, declara siempre sRGB: no lleves amplia gama a los entregables.

Síntomas → causa → solución

• Fotos apagadas → recorte con Colorimétrico relativo → prueba Perceptual
• Logotipo desviado → se perdió ICC al exportar → re‑exporta con conversión a sRGB + ICC
• Cambios en SNS/OGP → re‑codificación de la plataforma → sube sRGB/JPEG y verifica tras publicar

FAQ

P. ¿Se puede entregar AVIF en P3?

R. El soporte mejora, pero en canales cruzados (SNS/apps/correo) aún se rompe. Empieza con sRGB como base de calidad.

P. ¿Por qué la imagen no coincide con color(display-p3 …) en CSS?

R. El ICC de la imagen y la gestión de color de CSS no están sincronizados. Alinea ambos y valida de forma consistente.

Resumen

“Crea en amplia gama; entrega en sRGB con fiabilidad”. Los fallos de color son regresiones de calidad y pueden perjudicar el SEO. Antes de publicar, revisa en dispositivos clave y mantén una lista de control de ICC/deltas visuales en tus operaciones.