P3 Rojo Llama
Rojo super saturado
P3 Verde Manzana
Verde super saturado
P3 Naranja Cinema
Naranja cinematográfico
P3 Rosa Neón
Rosa super saturado
P3 Cian Jade
Cian super saturado
P3 Violeta
Púrpura super saturado
/* sRGB fallback */
color: #ff4500;
/* P3 mejorado */
color: color(display-p3 1 0.3 0);
/* Detección media query */
@media (color-gamut: p3) {
.brand { color: color(display-p3 ...); }
}
Parches P3 más vívidos → Soporte P3 verdadero
P3 recortado → Solo gama sRGB
Prueba Profesional de Color DCI-P3
Verifica con precisión si tu pantalla realmente soporta la gama amplia P3 mediante muestras de color exclusivas de P3, visualización de límites sRGB y pruebas de saturación por canal.
Muestras Exclusivas P3
Muestra colores que solo los monitores P3 pueden renderizar correctamente: rojo ultra-saturado, verde Apple, naranja de grado cinematográfico. En pantallas sRGB, estos colores se recortan a los valores sRGB más cercanos, perdiendo su vivacidad.
Visualización de Límites sRGB
Las barras de gradiente transicionan desde el límite de la gama sRGB hasta los extremos de la gama P3. En pantallas P3, el gradiente continúa más allá del límite sRGB; en pantallas sRGB, el gradiente se detiene en el límite (los colores ya no cambian).
Verificación de Color CSS P3
Todas las muestras renderizadas usando la sintaxis CSS color(display-p3 ...) — el soporte nativo de color P3 del navegador. Combinado con consultas @media (color-gamut: p3), los desarrolladores frontend pueden ofrecer colores de interfaz más vibrantes a usuarios con gama amplia.
¿Qué Es DCI-P3?
Comprendiendo los orígenes y aplicaciones del estándar de gama de colores P3.
Estándar de la Industria Cinematográfica
DCI-P3 fue establecido en 2005 por Digital Cinema Initiatives, originalmente para proyección de cine digital. Cubre aproximadamente el 45% de los colores visibles por humanos, cerca de un 25% más grande que el 35% de sRGB.
Preferido del Ecosistema Apple
Apple adoptó P3 completamente a partir de 2015: iMac 5K, iPhone 7+, iPad Pro, MacBook Pro y Pro Display XDR todos soportan P3. La gestión de color de macOS maneja el contenido P3 perfectamente, haciéndolo el ecosistema P3 más maduro.
Estándar de Contenido HDR
Los formatos HDR como HDR10 y Dolby Vision usan P3 como su contenedor de color. Netflix, Disney+ y Apple TV+ masteriza el contenido HDR en gama P3. Las pantallas sin P3 no pueden renderizar completamente los colores HDR.
Cómo Determinar el Soporte P3
Tres pasos para verificar la capacidad de color P3 de tu pantalla.
Ver Resultados de Detección
La página detecta automáticamente la consulta de medios color-gamut del navegador al cargar. Si muestra "P3 Soportado", tu combinación de pantalla + SO + navegador puede renderizar colores P3.
Comparar Muestras Exclusivas
Observa el área de muestras exclusivas P3. Si estas muestras parecen notablemente más vívidas que los controles sRGB adyacentes (especialmente rojos y verdes), tu pantalla está mostrando realmente colores extendidos P3 en lugar de recortarlos a sRGB.
Verificar Extensión del Gradiente
Encuentra el marcador de límite sRGB en las barras de gradiente. En pantallas P3, el gradiente continúa volviéndose más vívido más allá del marcador; en pantallas sRGB, los colores dejan de cambiar más allá del marcador — ese es el límite físico de la gama sRGB.
Terminología Clave de Color P3
color(display-p3)
Función de color CSS Nivel 4 que permite especificar colores P3 directamente en páginas web. Sintaxis: color(display-p3 r g b) con valores RGB en rango 0-1. Safari fue el primero en soportarlo; Chrome 111+ y Firefox 113+ ahora también lo soportan.
Consulta de Medios Color-Gamut
@media (color-gamut: p3) detecta si el dispositivo del usuario soporta P3. Úsalo en CSS o con window.matchMedia de JavaScript para implementar degradación elegante o mejora progresiva para dispositivos con diferentes gamas.
Recorte (Clipping)
Cuando los colores P3 se muestran en un monitor sRGB, los valores que exceden el rango sRGB se recortan a los valores límite sRGB más cercanos. Esto causa pérdida de saturación — un naranja P3 vibrante se convierte en un naranja sRGB ordinario.
Gama Amplia (Wide Gamut)
Se refiere ampliamente a capacidades de gama que exceden sRGB. DCI-P3 es el estándar de gama amplia más común, seguido de Adobe RGB. Display P3 es la variante de pantalla de Apple de DCI-P3, usando el punto blanco D65.
Qué Dispositivos Soportan P3
Soporte de gama P3 en dispositivos principales.
Dispositivos Apple
Soporte P3:
• iPad Pro (todos): 100% P3.
• MacBook Pro 2016+: 100% P3.
• Pro Display XDR / Studio Display: 100% P3.
Monitores Windows
Soporte P3:
• Monitores gaming (alta gama): 90-95% P3.
• Monitores de oficina estándar: típicamente solo sRGB.
• Nota: la gestión de color de Windows requiere soporte de perfil ICC.
Dispositivos Android
Soporte P3:
• Google Pixel 6+: soporte de gama P3.
• Dispositivos de gama media: típicamente solo sRGB o ligeramente inferior.
• La gestión de color de Android mejoró a partir de Android 10.
Soporte de Navegadores
Renderizado de Color:
• Chrome 111+: soporte de función de color CSS P3.
• Firefox 113+: soporte de función de color CSS P3.
• Edge: sigue Chromium, sincronizado con el soporte de Chrome.
Prácticas de Color P3 para Frontend
Colores CSS P3
Usa color(display-p3 1 0.2 0.1) para colores de marca ultra-saturados. Combina con @supports y valores de respaldo para compatibilidad hacia atrás.
Detección por Media Query
@media (color-gamut: p3) { } proporciona colores mejorados para dispositivos P3. En JS: matchMedia("(color-gamut: p3)") para detección dinámica.
Recursos de Imagen
Sirve imágenes con perfil de color Display P3 a dispositivos P3. Usa <picture> + media queries para cargar imágenes de diferente gama según la capacidad del dispositivo.
Degradación Elegante
Siempre proporciona un respaldo sRGB antes de los valores P3. CSS: color: #ff4500; color: color(display-p3 1 0.3 0); — la segunda línea sobreescribe la primera.
Preguntas Frecuentes
Q.¿El navegador reporta "P3 soportado" pero mi pantalla es sRGB?
macOS convierte los colores P3 a la pantalla sRGB, así que el navegador aún reporta soporte P3 a nivel de sistema. Pero la pantalla físicamente no puede mostrar colores extendidos P3 — los valores excedentes se recortan. Las comparaciones de muestras de esta página ayudan a verificar la capacidad real de la pantalla.
Q.¿Los colores P3 afectan la velocidad de carga de la página?
No. color(display-p3) es una propiedad CSS nativa que no requiere bibliotecas JS adicionales ni recursos. El único impacto en rendimiento puede venir de imágenes con perfiles de color P3 incrustados, que típicamente son ligeramente más grandes que las versiones sRGB.
Q.¿Las capturas de pantalla del iPhone preservan los colores P3?
Sí. Las capturas de pantalla y fotos del iPhone usan por defecto el espacio de color Display P3. Cuando se envían a dispositivos sRGB, los colores se convierten. Ver estas capturas en dispositivos compatibles con P3 muestra colores más vibrantes.
Q.¿Por qué proporcionar tanto valores P3 como sRGB?
La gran mayoría de las pantallas del mundo siguen siendo sRGB. Usar solo valores P3 significa que los navegadores no compatibles los ignorarán o mostrarán colores incorrectos. La cascada CSS te permite escribir un respaldo sRGB primero, luego la mejora P3 — el navegador elige automáticamente la versión soportada.
Q.¿Es suficiente el "95% DCI-P3" de mi pantalla?
Sí. Una cobertura DCI-P3 del 95%+ puede mostrar la gran mayoría de los colores extendidos P3. Las diferencias aparecen solo en regiones de borde rojo-verde extremadamente saturadas. La cobertura del 100% es más un punto de marketing — en uso real, 95% y 100% son casi indistinguibles.
Q.¿Cuál es la diferencia entre Display P3 y DCI-P3?
Display P3 es la variante de Apple que usa el punto blanco D65 (igual que sRGB), adecuada para pantallas. DCI-P3 usa un punto blanco ligeramente verdoso como estándar de proyección cinematográfica. Ambos tienen rangos de gama casi idénticos — solo difiere el punto blanco.
Consejos de Desarrollo de Color P3
- • Sintaxis CSS: color: color(display-p3 1 0.3 0); — nota que los valores RGB van de 0-1, no de 0-255.
- • Compatibilidad: Siempre escribe un respaldo sRGB en la línea antes de tu valor P3. El navegador automáticamente elige la regla soportada.
- • Herramientas de Depuración: El selector de color de Chrome DevTools ya soporta vista previa y conversión de gama P3.
- • Consejo de Diseño: Usa la mejora P3 solo para colores de marca, botones CTA e imágenes clave — no para cada color individual.