Display P3 es un espacio de color con un gamut más amplio que sRGB: su rojo, su verde y su azul están más saturados, así que puede mostrar colores vivos que sRGB no alcanza. Los números 255, 0, 0 son un rojo distinto en cada uno. En la web, un código hex común es siempre sRGB.
¿Qué es un gamut?
Un gamut es el rango de colores que un espacio, o una pantalla, puede producir. Todo espacio RGB se define con tres primarios, su rojo, su verde y su azul más puros, además de un punto blanco y una curva que traduce los números a brillo. Los colores que se alcanzan mezclando esos tres forman un triángulo en un diagrama de cromaticidad, y ese triángulo es el gamut.
sRGB tiene el triángulo más pequeño. Display P3 es uno más amplio que lo contiene, con un rojo y un verde más saturados y el mismo punto blanco. MDN describe así la característica de medios color-gamut: sRGB está contenido en P3, que está contenido en Rec. 2020. Como el triángulo P3 contiene al de sRGB, todo color sRGB tiene un equivalente en P3. Al revés no ocurre.
¿Por qué el mismo número se ve distinto?
Porque #ff0000 no dice "este rojo exacto". Dice "rojo al máximo, en el espacio que el software de alrededor dé por supuesto". El rojo al máximo en P3 es más intenso que el rojo al máximo en sRGB. Si le das los mismos tres números a una pantalla que los interpreta como P3 y a otra que los interpreta como sRGB, salen dos rojos distintos.
El eje de grises es la excepción. Los grises, el negro y el blanco, donde los tres canales son iguales, se ven igual en los dos espacios. Las diferencias se concentran en los colores saturados, y por eso un pastel o un neutro sobreviven a cualquier confusión y un verde o un naranja vivo no.
¿Por qué una captura de mi teléfono se ve más apagada en la web?
Una causa frecuente: la captura se hizo con un perfil P3 incluido, y en algún punto del camino hacia la página web se perdió el perfil. Los valores de los píxeles no cambian, pero lo que los muestra ahora los lee como sRGB. Números P3 leídos como sRGB caen en un color menos saturado, y todo se ve algo desteñido.
También existe el error opuesto. Una herramienta que convierte bien a sRGB conserva el color tan cerca como lo permite el gamut más pequeño, pero los colores más vivos no tienen adónde ir y se recortan o se comprimen. Una foto con verdes intensos puede verse más plana después de exportarla a sRGB aunque nada estuviera mal etiquetado.
No puedo decirte cuál de las dos cosas le pasó a tu archivo. Nadie puede hacerlo solo mirando la imagen. El perfil se guarda como metadatos, y los sitios de subida, las apps de mensajería y algunos editores lo reescriben o lo quitan. Si un color cambió entre dos lugares, pregunta qué hizo cada paso con el perfil. El lado de las imágenes, incluido qué más viaja dentro de un archivo de foto, está en qué son los datos EXIF y qué revelan.
¿Cómo se escribe un color P3 en CSS?
Con la función color(): color(display-p3 1 0.5 0), tres valores de 0 a 1. MDN la lista como ampliamente disponible en los navegadores desde mayo de 2023. Puedes preguntar si la pantalla puede usarla con @media (color-gamut: p3).
El patrón seguro es un respaldo en la cascada. Escribe primero el color sRGB y después el P3, y un navegador que no entienda color() ignora la segunda línea:
.badge {
background: #00c853;
background: color(display-p3 0 0.8 0.3);
}Un navegador que entiende la línea P3 en una pantalla que no puede mostrarla asigna el color más cercano que sí puede. Lo que obtienes ahí depende del dispositivo, así que compruébalo en un monitor sRGB común en lugar de suponerlo.
¿Cuándo vale la pena un gamut más amplio?
Con menos frecuencia de la que sugiere el marketing. Rinde en pocos lugares:
- Un color de marca saturado. Un verde, un naranja o un magenta vivo es donde sRGB recorta, y donde una versión P3 se ve claramente más rica en una pantalla P3.
- Fotografía y miniaturas de video. Las imágenes son el contenido con más probabilidad de tener colores fuera de sRGB, siempre que el archivo esté realmente etiquetado y exportado en P3.
- Degradados y brillos. Dos extremos vivos le dan más material a un espacio más amplio. Si tu degradado ya se pone gris en el medio, la causa es el espacio en que se interpola, no el gamut.
No rinde nada en texto de cuerpo, bordes, fondos ni en nada gris, porque el eje de grises compartido deja sin nada que ganar. Y tiene un costo: un segundo valor que mantener por cada color que amplíes, y un diseño que ahora se ve distinto en dos tipos de pantalla. El mismo azul serán dos azules, y quien revise en una laptop sRGB no verá lo que aprobó quien diseñó en una pantalla P3.
¿Qué usa la comprobación de contraste?
La fórmula de contraste de WCAG 2.x está escrita en términos de valores sRGB. Para un color que solo existe en P3 no tiene una respuesta definida, así que prueba el respaldo sRGB que envías junto a él. Los umbrales están en qué relación de contraste necesitas para un texto legible.
Qué pueden y qué no pueden hacer nuestras herramientas de color
Las dos son solo sRGB. El conversor de colores pasa entre HEX, RGB y HSL, que son tres formas de escribir un mismo color sRGB, y su selector devuelve un valor hex. No convierte desde ni hacia Display P3, y no lee OKLCH ni ningún otro espacio. El generador de paletas arma sus paletas a partir de una base sRGB y exporta códigos hex. Para un valor P3 tienes que escribir tú la línea color() o tomarla de una herramienta de diseño que soporte el espacio. Las dos corren completamente en tu navegador, y nada de lo que escribes se sube. La elección de formato entre HEX, RGB, HSL y OKLCH tiene su propio artículo: qué formato de color usar.
Para ver cuáles son realmente tus valores sRGB antes de ampliar nada, el conversor de colores muestra un color como HEX, RGB y HSL lado a lado, y el generador de paletas te da una paleta hex de partida. Ninguno produce un valor Display P3, así que esa línea te toca escribirla a ti.
Si lo siguiente es cómo armar la paleta en primer lugar, cómo elegir una paleta de colores que funcione trata los neutros, los estados y el contraste, que importan más que el gamut en la mayoría de los sitios.
Preguntas frecuentes
¿Cuál es la diferencia entre sRGB y Display P3?
Los dos son espacios de color RGB, pero Display P3 tiene primarios rojo y verde más saturados, así que puede mostrar colores vivos que sRGB no alcanza. Todo color sRGB existe en P3, y al revés no ocurre. Los mismos tres números, como 255, 0, 0, son un rojo más intenso en P3 que en sRGB.
¿Por qué mis colores se ven más apagados después de subir una captura?
Una causa frecuente es que la imagen llevaba un perfil Display P3 y un paso posterior lo quitó, así que los valores de los píxeles ahora se leen como sRGB. Números P3 leídos como sRGB salen menos saturados. También puede ser una exportación a sRGB que comprime colores que el gamut más pequeño no puede contener. Cuál ocurrió depende de lo que hizo cada herramienta con el perfil, y la imagen sola no lo dice.
¿Un código hex puede ser un color Display P3?
No. En CSS un código hex es siempre sRGB, así que no puede nombrar un color fuera de ese gamut. Para usar Display P3 escribes color(display-p3 r g b) con valores de 0 a 1, y dejas antes una línea hex como respaldo para los navegadores que no la entienden.
¿Necesito Display P3 para mi sitio web?
Normalmente no. Ayuda con colores de marca saturados, fotos y degradados vivos en pantallas que pueden mostrarlos, y no hace nada por los grises, el texto de cuerpo ni la mayoría de los colores de interfaz. También implica mantener dos valores por color y aceptar que el sitio se vea distinto en dos tipos de pantalla.
Última actualización 4 de octubre de 2026
