Gama de colores explicada: sRGB, Display P3 y colores fuera de gama
Una gama de colores (en inglés, gamut) es el conjunto de colores que puede mostrar una pantalla o un espacio de color. La web se construyó sobre sRGB, pero hoy la mayoría de los móviles y muchos portátiles muestran Display P3, con rojos, verdes y naranjas bastante más vivos.
Lectura: 2 min
Qué es una gama de colores
Cada pantalla mezcla luz roja, verde y azul. El rojo, el verde y el azul más puros que puede producir marcan las esquinas de un triángulo, y todo color dentro de ese triángulo está en su gama. Los colores que quedan fuera, sencillamente, no se pueden mostrar en esa pantalla.
sRGB, Display P3 y Rec. 2020
sRGB es el estándar de la web y de la mayoría de los monitores vendidos antes de 2016. HEX, rgb() y hsl() describen colores sRGB.
Display P3 abarca aproximadamente una cuarta parte más de colores que sRGB, sobre todo verdes, rojos y naranjas vivos. Lo usan los iPhone, iPad y Mac, y muchos móviles Android y portátiles de gama alta. En CSS se escribe como color(display-p3 r g b) o como un valor OKLCH con croma alto.
Rec. 2020 es todavía más amplio y se usa en vídeo HDR. Muy pocas pantallas lo cubren por completo.
| Formato | Valor |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
Qué pasa con los colores fuera de gama
Si un color CSS queda fuera de la gama de la pantalla, el navegador tiene que mostrar otra cosa. El recorte simple limita cada canal por separado y puede cambiar el tono. CSS Color 4 recomienda en su lugar ajustar la gama en OKLCH: mantener la luminosidad y el tono y bajar el croma hasta que el color quepa.
PickShade marca cada color que queda fuera de sRGB y muestra el color de respaldo ajustado, para que sepas exactamente qué verá quien use una pantalla más antigua.
Cómo usar colores P3 en CSS sin riesgos
Escribe primero un color de respaldo sRGB y después el valor de gama amplia, o mete el valor vivo dentro de una media query color-gamut.
CSS
.button {
background: #ff5733;
background: oklch(68% 0.24 33.7);
}
@media (color-gamut: p3) {
.hero {
color: color(display-p3 1 0.3 0.15);
}
}Preguntas y respuestas
¿Cómo sé si un color está dentro de sRGB?
Pégalo en PickShade. Cualquier color fuera de sRGB recibe un aviso de gama junto con el color más cercano que cabe.
¿Los colores P3 funcionan en Windows?
Sí, si el monitor cubre P3 y el navegador conoce el perfil de la pantalla. En una pantalla sRGB, el navegador ajusta el color a sRGB, así que nada se rompe.
¿HEX está limitado a sRGB?
Sí. HEX, rgb(), hsl() y hwb() siempre describen colores sRGB. Usa oklch() o color(display-p3 ...) para colores de gama amplia.