sRGB vs Display-P3: lo que los diseñadores necesitan saber

Un misterio conocido a la hora de entregar diseños a desarrollo: un diseñador elige un rojo vivo en una herramienta de diseño sobre un MacBook reciente, el desarrollador implementa el valor hex fielmente, y en ese mismo portátil el botón final se ve algo más apagado que la maqueta que tiene al lado. Nadie escribió mal nada. La herramienta de diseño mostraba un rojo Display-P3; el código hex solo podía transportar sRGB.

La explicación es la gama: el conjunto de colores que una pantalla o un espacio de color puede reproducir. sRGB es la referencia de la web desde hace décadas; Display-P3 es una gama más amplia, aproximadamente un 25 % mayor, cuyos colores adicionales se concentran en los tonos medios saturados: rojos, verdes, naranjas y turquesas vivos. Los valores hex no pueden expresarlos; la sintaxis más nueva de CSS sí. Este artículo cubre dónde se nota realmente la diferencia, qué significa para CSS y cuándo vale la pena el esfuerzo, como parte de nuestra guía de OKLCH, porque la gama amplia es la mitad de la razón por la que los modelos de color modernos importan.

¿Dónde viven realmente los colores adicionales de P3?

No están repartidos de manera uniforme. Cerca del blanco, del negro y del gris, las dos gamas son prácticamente idénticas: un pastel claro o un azul marino oscuro no ganan nada con P3. La brecha se abre en el centro lleno de color: el rojo, el verde o el turquesa más saturado que P3 puede mostrar queda visiblemente más allá del techo de sRGB. En términos de OKLCH, el eje de luminosidad no se mueve; lo que P3 eleva es el techo de croma, y lo eleva más en los tonos medios, donde el techo ya era más alto.

Esa geografía explica tanto la promesa como la decepción de la gama amplia: los acentos de marca, la ilustración y las imágenes pueden destacar de verdad con más fuerza, mientras que el texto de cuerpo, los bordes, los fondos y todo lo demás que compone la mayor parte de una interfaz se ve exactamente igual.

¿Los usuarios tienen realmente pantallas P3?

En su mayoría sí, a estas alturas. Los iPhone llevan pantallas P3 desde 2016, los Mac casi el mismo tiempo, y los dispositivos Android de gama alta y los mejores monitores externos vinieron después; una gran parte del tráfico actual —sobre todo el móvil— ve tu trabajo a través de un panel compatible con P3. La cuestión de la capacidad ha cambiado sin hacer ruido: el caso habitual es una pantalla que puede mostrar más que sRGB, a la que se le envía sRGB.

El público que no puede ver P3 sigue importando, y por eso la postura práctica es la mejora progresiva: diseña de forma que la representación en sRGB se sostenga por sí sola, y deja que las pantallas P3 reciban la viveza extra por encima.

¿Por qué el hex no puede transportar estos colores?

Un valor hex son tres números de 8 bits definidos respecto a sRGB: #ff0000 significa «el rojo máximo de sRGB», no «el rojo más rojo». No existe ningún punto de código más allá del borde de la gama. Alcanzar P3 requiere una sintaxis que nombre un espacio de color de forma explícita:

.accent {
  color: #e0263f;                             /* respaldo sRGB           */
  color: color(display-p3 0.9 0.12 0.22);     /* rojo amplio donde se ve */
}

color(display-p3 …) se dirige a la gama P3 directamente, y los espacios capaces de gama amplia como OKLCH pueden expresar estos colores con toda naturalidad: los mismos tres valores L/C/H simplemente se extienden hasta un croma más alto. El artículo de WebKit sobre color de gama amplia explica en detalle la mecánica de CSS. Para dar estilo, el patrón de cascada de arriba suele bastar: sRGB primero, P3 después, cada pantalla toma lo mejor que puede representar.

¿Cómo se ve la diferencia en una rampa real?

Abre una rampa roja saturada generada contra el techo de sRGB —fíjate en cómo los pasos de los tonos medios se sitúan justo en el borde de la gama, donde el generador limita el croma justo por debajo del límite para mantener suave la progresión.

Ten esa imagen en mente para la comparación al final del artículo: mismo color semilla, misma curva de luminosidad; solo se mueve el techo.

¿Cuándo vale la pena el esfuerzo de P3?

Vale la pena:

• Acentos de marca y CTA — el único lugar donde una interfaz gasta croma de verdad; la versión P3 de un color de marca vivo es la que mostraba la herramienta de diseño.
• Ilustración e imágenes — las fotos y el material gráfico etiquetados con perfiles de gama amplia transmiten visiblemente más fuerza.
• Visualización de datos — un margen extra de croma significa colores de serie saturados más distinguibles.

No vale la pena:

• Texto y elementos de interfaz — los requisitos de contraste limitan mucho antes que la gama, y la versión sRGB debe aprobar por sí sola en cualquier caso.
• Neutros y fondos — las gamas apenas se diferencian ahí.
• Cualquier cosa que no puedas verificar — si el equipo revisa en monitores sRGB, la capa P3 se publica sin que nadie la vea; añádela donde alguien vaya a comprobarla de verdad.

Observa cómo sube el techo

La forma más clara de entender las dos gamas es ver cómo una se convierte en la otra: convierte la misma rampa roja a P3. Los pasos de los tonos medios ganan croma —los números lo dicen y las muestras lo enseñan— mientras la luminosidad y el tono se mantienen perfectamente quietos, y los extremos cercanos al blanco y al negro apenas se mueven. Eso, en una sola interacción, es toda la historia de sRGB frente a P3: no colores distintos, sino los mismos colores con un techo más alto exactamente donde vive el color.