Display P3

Display P3 es un espacio de color RGB de gama amplia introducido por Apple en 2015. Usa los mismos primarios de rojo y azul que DCI-P3 (el estándar de proyección cinematográfica de 2007) pero con el punto blanco y el gamma propios de Apple. Comparado con sRGB, P3 cubre ~25% más de volumen de color — la mayor parte del extra está en rojos y verdes saturados.

Apple fabrica todas las pantallas de Mac e iPhone desde 2017 en adelante con paneles de clase P3. Otros fabricantes han seguido; la mayoría de los teléfonos Android de gama alta, los monitores de gama media y alta, y todos los televisores OLED alcanzan P3 o más.

El Módulo de Color CSS Nivel 4 admite P3 mediante la función color(): color(display-p3 1 0.4 0.2). El mismo color expresado en sRGB se recortaría — el naranja saturado brillante no existe en sRGB. Los navegadores que admiten ambos renderizarán la versión P3 en pantallas capaces de P3 y recurrirán a sRGB de forma elegante en las demás.

Los conversores de color de Convertitive funcionan actualmente solo en sRGB. El soporte para P3 está en la hoja de ruta.

La distinción entre DCI-P3, Display P3 y P3-D65 que confunde a los diseñadores: tres especificaciones diferentes llevan “P3” en el nombre. DCI-P3 es el estándar cinematográfico SMPTE original con un punto blanco desplazado hacia el verde (alrededor de 6300 K) y un gamma puro de potencia 2,6 — usado por proyectores de cine, no por pantallas de consumo. Display P3 es la adaptación de Apple con el punto blanco D65 estándar del consumidor (6504 K) y la curva de gamma por tramos de sRGB. P3-D65 es lo mismo que Display P3 con otro nombre. El color(display-p3 …) de CSS significa específicamente Display P3; los activos exportados desde pipelines de cine como DCI-P3 se verán ligeramente verdes si se tratan como Display P3 sin conversión.

Detectar el soporte P3 en el código, correctamente: usa la consulta de medios CSS @media (color-gamut: p3) para condicionar los estilos de gama amplia, combinada con @supports (color: color(display-p3 0 0 0)) para la propiedad. Los navegadores sin renderizado de gama amplia o que se ejecutan en pantallas sRGB recurrirán a la declaración sRGB proporcionada junto a ella. Evita el error común de declarar solo colores P3 — los navegadores solo sRGB ignorarán la regla y tu CSS vuelve a los valores predeterminados heredados. La metodología de color de Convertitive cubre el patrón de doble declaración. Relacionados: sRGB, gama de colores, cromaticidad. Referencia: ICC — Caracterización de Display P3.

Ejemplo práctico: un rojo de marca más allá del sRGB

Una marca quiere el rojo más saturado que sus clientes de iPhone puedan renderizar. En sRGB el rojo máximo es rgb(255, 0, 0) con coordenadas de cromaticidad CIE-1931 de aproximadamente (0,640, 0,330). El primario Display P3 equivalente se sitúa en (0,680, 0,320) — completamente fuera del triángulo sRGB. Declarado como color(display-p3 1 0 0), el color es aproximadamente un 25% más saturado a la vista en un panel de gama amplia. En una pantalla solo sRGB la doble declaración CSS background: red; background: color(display-p3 1 0 0); retrocede elegantemente. Fotografiando los dos uno al lado del otro en un teléfono P3, la diferencia es visible a un brazo de distancia — especialmente en el rojo Coca-Cola, el rojo Ferrari y otros colores de marca que históricamente se recortaban en la web.

Cuándo P3 importa y cuándo no

Para identidad de marca, imágenes de marketing y portfolios de fotografía, P3 es una mejora significativa — los rojos, verdes saturados y los tonos de piel ganan profundidad visible. Para la mayoría del trabajo de UI (texto, neutros, acentos suaves), la diferencia es imperceptible porque los colores nunca se acercan al límite de la gama sRGB de todos modos. Para flujos de trabajo de impresión, P3 es en gran medida irrelevante; las gamas de impresoras son menores que sRGB en las regiones saturadas y la conversión ocurre a través de perfiles CMYK independientemente. La especificación W3C CSS Color 4 es la fuente autorizada para la sintaxis y las reglas de renderizado: Módulo de Color CSS Nivel 4 — Display P3.