Gama de color explicada: sRGB, P3 y Rec. 2020

Los colores de tu pantalla están acotados por un límite en el que la mayoría de los usuarios nunca piensa: la gama de color. Durante la mayor parte de la historia de la web, ese límite fue el mismo para prácticamente todos los dispositivos: sRGB, un estándar establecido en 1996. Hoy en día, los teléfonos modernos, portátiles y monitores muestran rutinariamente muchos más colores de los que sRGB permite, y CSS tiene las herramientas para aprovechar esto, si sabes cómo.

Esta guía explica qué es una gama de color, describe sRGB, Display P3 y Rec. 2020 como las tres gamas más relevantes para el trabajo web, y muestra exactamente cómo usar colores de gama amplia en CSS con la consulta de características @media (color-gamut).

¿Qué es una gama de color?

Una gama de color es el rango completo de colores que un sistema de color puede representar o reproducir. No todos los colores visibles para el ojo humano se pueden expresar en todos los sistemas de color: las limitaciones físicas y técnicas hacen que cada sistema cubra solo un subconjunto de lo que podemos percibir.

El diagrama de cromaticidad CIE 1931

Los científicos del color representan las gamas visualmente usando el diagrama de cromaticidad CIE 1931, un mapa 2D en forma de herradura de todos los colores perceptibles por el ojo humano promedio. El límite exterior de la herradura representa los colores espectrales más puros y saturados. Las regiones interiores representan colores menos saturados y más mezclados. El blanco se sitúa cerca del centro.

Cualquier gama de color específica aparece en este diagrama como un polígono, típicamente un triángulo definido por sus tres colores primarios (rojo, verde, azul). El área de ese triángulo determina cuántos colores visibles cubre la gama:

• Un triángulo pequeño = gama estrecha (menos colores)
• Un triángulo grande = gama amplia (más colores)

Los tres primarios de cualquier gama determinan dónde se sitúan los vértices del triángulo. Llevar los primarios hacia el borde exterior de la herradura (primarios más saturados) expande el triángulo y la gama.

Por qué las gamas importan para el diseño web

Hasta hace muy poco, esto era una preocupación académica. Casi todas las pantallas en uso eran compatibles con sRGB, y los colores web eran universalmente colores sRGB. Pero como Display P3 se convirtió en estándar en los dispositivos de Apple (todos los iPhone desde 2016, todos los MacBooks recientes, iMacs, iPad Pros y Studio Displays), y a medida que los monitores HDR se han extendido a Windows y los videojuegos, el panorama práctico de las pantallas se ha fragmentado.

El contenido web servido en sRGB sigue viéndose correctamente en pantallas P3 y Rec. 2020: los colores sRGB son un subconjunto de esas gamas más amplias. Pero el contenido especificado en espacios de color de gama amplia puede aprovechar los primarios más ricos y saturados que ofrecen P3 y Rec. 2020.

sRGB: El estándar web desde 1996

Historia y adopción

El espacio de color sRGB (Red Green Blue estándar) fue desarrollado conjuntamente por HP y Microsoft en 1996 y estandarizado por la IEC como IEC 61966-2-1. Su objetivo era proporcionar una referencia común para monitores de consumo, impresoras y la web, permitiendo una reproducción de color coherente sin requerir calibración de dispositivos.

sRGB se convirtió en el espacio de color predeterminado para: - Navegadores web (todos los colores CSS son sRGB a menos que se especifique lo contrario) - Cámaras digitales (los archivos JPEG tienen sRGB por defecto) - La mayoría de los monitores de consumo durante los años 2000 y 2010 - El subsistema de visualización de Windows - Contenido SDR (Rango Dinámico Estándar)

Cobertura de sRGB

sRGB cubre aproximadamente el 35% de la gama de color visible según el diagrama de cromaticidad CIE 1931. Esto suena limitado, pero cubre un rango práctico que abarca una amplia variedad de colores naturales y artificiales que se encuentran en la vida cotidiana.

Los primarios sRGB son: - Rojo: aproximadamente x=0.64, y=0.33 (un rojo ligeramente anaranjado) - Verde: aproximadamente x=0.30, y=0.60 (un verde amarillento) - Azul: aproximadamente x=0.15, y=0.06 (un azul violeta)

sRGB en CSS

Cada color CSS que hayas escrito es sRGB a menos que hayas especificado explícitamente otra cosa. Esto incluye:

• Códigos hex: #3B82F6
• Colores con nombre: blue, coral, rebeccapurple
• rgb() y rgba(): rgb(59, 130, 246)
• hsl() y hsla(): hsl(217, 91%, 60%)

Todos estos se resuelven a valores sRGB. Un valor de #FF0000 significa precisamente el rojo primario sRGB: el rojo más rojo que sRGB puede representar. En una pantalla P3, ese rojo se renderiza fielmente pero no aprovecha el primario rojo aún más vívido nativo de P3.

Display P3: El estándar moderno de Apple

¿Qué es Display P3?

Display P3 es un espacio de color desarrollado por Apple para sus pantallas Retina, derivado del espacio de color DCI-P3 usado en la proyección de cine digital. Usa el mismo punto blanco que sRGB (D65, el iluminante de luz del día estándar) y el mismo gamma, pero define colores primarios diferentes y más saturados.

Display P3 cubre aproximadamente el 45% de la gama de color visible, aproximadamente un 26% más de área que sRGB. La cobertura ampliada es más pronunciada en las regiones de rojo y verde, con una expansión menos dramática en el azul.

¿Qué dispositivos admiten Display P3?

Apple adoptó Display P3 ampliamente a partir de 2015-2016:

• iPhone 7 y posteriores: todos los modelos de iPhone siguientes
• iPad Pro (9.7 pulgadas, 2016) y posteriores: todos los modelos de iPad Pro siguientes
• MacBook Pro (finales de 2016) y posteriores con pantalla Retina
• iMac (Retina 5K, finales de 2015) y posteriores
• Apple Pro Display XDR, Studio Display

En el lado de Windows y Android, muchos portátiles y teléfonos de alta gama también incluyen pantallas capaces de P3, aunque la adopción es menos uniforme. A partir de 2025, la mayoría de los dispositivos de consumo de alta gama admiten al menos P3.

Especificar colores P3 en CSS

CSS Color Nivel 4 proporciona la función color() con el espacio de color display-p3, lo que te permite especificar colores que usan directamente los primarios P3:

/* Rojo P3 — más vívido que el rojo sRGB */
color: color(display-p3 1 0 0);

/* Un verde vívido P3 */
color: color(display-p3 0 1 0);

/* Un coral rico en P3 */
color: color(display-p3 0.95 0.42 0.37);

Los tres valores en color(display-p3 R G B) están normalizados de 0 a 1 (no de 0 a 255). Esto es diferente de la función rgb().

Percibir la diferencia

El impacto práctico de P3 es más visible en los colores muy saturados. Un rojo P3 vívido [comparable a color(display-p3 1 0 0)] es notablemente más saturado que el rojo sRGB #FF0000 en una pantalla capaz de P3. Para colores de marca e imágenes heroicas que necesitan máxima vibrancia, P3 proporciona una mejora significativa.

Rec. 2020: El futuro del HDR y el cine

¿Qué es Rec. 2020?

Rec. 2020 (formalmente ITU-R BT.2020) es el estándar de color para Televisión de Ultra Alta Definición (UHDTV) y contenido HDR. Fue definido por la Unión Internacional de Telecomunicaciones en 2012 y representa una gama dramáticamente más amplia que cualquier cosa en uso común para el consumidor hoy.

Rec. 2020 cubre aproximadamente el 75% de la gama de color visible, más del doble del área de sRGB y sustancialmente más amplio que P3. Sus primarios se definen en los límites espectrales de longitudes de onda de láser específicas, lo que significa que son teóricamente los colores más saturados posibles en esas longitudes de onda.

Soporte actual en pantallas

Aquí está la advertencia crítica: casi ninguna pantalla de consumo disponible actualmente cubre completamente la gama Rec. 2020. Los televisores HDR de alta gama pueden cubrir del 75 al 90% de Rec. 2020; se necesitan proyectores de cine profesionales y monitores HDR especializados para la cobertura completa.

Sin embargo, Rec. 2020 es la gama de referencia para los estándares de contenido HDR que incluyen HDR10, Dolby Vision y HLG. Incluso si una pantalla no puede reproducirlo completamente, el contenido masterizado en Rec. 2020 se asignará tonalmente para su visualización en pantallas de gamas más pequeñas.

Rec. 2020 en CSS

/* Verde Rec. 2020 — extremadamente vívido, más allá de las capacidades de la mayoría de pantallas */
color: color(rec2020 0 1 0);

/* Un rojo profundo en Rec. 2020 */
color: color(rec2020 0.8 0.1 0.1);

Para el trabajo web actual, los colores Rec. 2020 se mostrarán como el color reproducible más cercano en la gama que soporte la pantalla. Esto lo hace compatible con el futuro: los navegadores con capacidad Rec. 2020 muestran el color completo; los demás muestran la mejor aproximación.

Colores CSS de gama amplia con @media (color-gamut)

CSS proporciona una consulta de medios específicamente para detectar la capacidad de gama de la pantalla y servir los colores apropiados:

@media (color-gamut: srgb) {
  /* Compatible con prácticamente todas las pantallas de color */
}

@media (color-gamut: p3) {
  /* La pantalla admite al menos la gama P3 */
}

@media (color-gamut: rec2020) {
  /* La pantalla admite al menos la gama Rec. 2020 */
}

Los valores son progresivos: p3 significa que la pantalla admite al menos P3 (por lo que sRGB también está cubierto), y rec2020 significa que la pantalla admite al menos Rec. 2020 (cubriendo también P3 y sRGB).

Patrón de mejora progresiva

El enfoque recomendado es definir primero el color sRGB base y luego mejorar progresivamente para pantallas de gama más amplia:

.hero-button {
  /* Respaldo sRGB — funciona en todas las pantallas */
  background-color: #E63946;
}

@media (color-gamut: p3) {
  .hero-button {
    /* Rojo más vívido en pantallas P3 */
    background-color: color(display-p3 0.95 0.17 0.23);
  }
}

@media (color-gamut: rec2020) {
  .hero-button {
    /* Aún más vívido en pantallas Rec. 2020 */
    background-color: color(rec2020 0.89 0.14 0.21);
  }
}

En un monitor sRGB estándar, el botón muestra el rojo hex #E63946. En un iPhone, MacBook Pro o monitor de gama amplia moderno, muestra la versión P3 más vívida. En una pantalla capaz de Rec. 2020, muestra la versión más vívida.

Usar oklch() para gama amplia

El espacio de color OKLCH no es específico de ninguna gama, pero puede direccionar colores fuera de sRGB de forma natural: los valores que caen fuera del rango 0-1 en términos de sRGB son automáticamente de gama amplia. Esto hace que OKLCH sea conveniente para trabajar con color entre gamas:

.accent {
  /* OKLCH puede expresar P3 y más allá */
  color: oklch(60% 0.25 27deg);
}

El navegador mapea el color OKLCH especificado al color reproducible más cercano en la gama que soporte la pantalla. Si la pantalla es capaz de P3, mapea al color P3; si es sRGB, recorta al equivalente sRGB más cercano.

Esta es una razón convincente para usar OKLCH en sistemas de diseño: puedes especificar una percepción de color intencionada y el navegador maneja el mapeo de gama automáticamente. Usa el Conversor de Color de ColorFYI para traducir entre valores hex sRGB y sus equivalentes OKLCH.

La línea base de color-gamut: srgb

Cada pantalla de color admite al menos color-gamut: srgb: esto coincide con cualquier pantalla no monocromática. Solo necesitarás este valor de consulta de medios si quieres dirigirte a pantallas de color en oposición a hipotéticas pantallas monocromáticas, lo que rara vez es necesario.

En la práctica, la consulta útil es color-gamut: p3, que cubre el ecosistema de Apple y una parte cada vez mayor de dispositivos Android y Windows.

Soporte en navegadores

A partir de 2025: - @media (color-gamut) — compatible con todos los principales navegadores (Chrome, Firefox, Safari, Edge) - color(display-p3) — compatible con todos los principales navegadores - color(rec2020) — compatible con Chrome y Safari; Firefox incorporó soporte posteriormente - oklch() — compatible con todos los principales navegadores

No hay navegadores de uso común hoy que fallen al analizar estas características: o renderizan el color de gama amplia o recurren correctamente a la declaración sRGB precedente.

Orientación práctica para proyectos de diseño web

¿Deberías usar colores P3 hoy?

Sí, con un enfoque de mejora progresiva. El riesgo negativo es nulo: los respaldos sRGB aseguran que tu diseño se vea correcto en todas las pantallas. La ventaja es que una parte significativa y creciente de tu audiencia ve colores más vívidos y ricos.

Los casos de uso con mayor impacto son: - Colores de marca y acentos que deben aparecer tan vívidos como sea posible - Imágenes heroicas y gráficos promocionales donde la vibrancia impulsa el engagement - Visualización de datos donde un rango de color más amplio permite colores categóricos más distintos

¿Qué colores se benefician más de P3?

Las ganancias de P3 sobre sRGB son mayores en: - Rojos y naranjas vívidos: el primario rojo P3 es notablemente más saturado - Verdes saturados: P3 se extiende significativamente en la región verde-amarillo - Rosas y magentas vibrantes: P3 captura mejor la paleta vívida de moda y belleza

Los colores neutros, oscuros y pastel muestran diferencias visibles mínimas entre sRGB y P3, porque están cerca del centro de la gama donde ambos espacios de color se superponen sustancialmente.

Flujo de trabajo práctico

1. Diseña tu sistema de colores en hex (sRGB) como de costumbre
2. Identifica los 2-5 colores donde la máxima vibrancia importa (color de marca principal, acento heroico, estados clave de la interfaz)
3. Usa el Conversor de Color de ColorFYI para encontrar el equivalente OKLCH de cada uno
4. En CSS, especifica el valor OKLCH (o el equivalente color(display-p3)) y deja que el navegador maneje el mapeo de gama
5. Prueba en una pantalla capaz de P3 (cualquier MacBook o iPhone moderno) para verificar la mejora visual

Resumen de comparación de gamas

Conclusiones clave

• Una gama de color es el rango total de colores que un sistema puede representar, visualizada como un triángulo en el diagrama de cromaticidad CIE. Primarios más amplios = triángulo más grande = más colores.
• sRGB ha sido el estándar universal de la web desde 1996, cubriendo aproximadamente el 35% de los colores visibles. Todos los valores CSS estándar (rgb(), hsl(), hex) son sRGB.
• Display P3 cubre aproximadamente el 45% de los colores visibles y es estándar en todos los dispositivos Apple desde 2016 (iPhone, MacBook, iPad Pro, iMac) y muchos dispositivos Windows y Android modernos.
• Rec. 2020 cubre aproximadamente el 75% de los colores visibles y se usa como gama de referencia para contenido HDR, pero pocas pantallas de consumo lo reproducen completamente hoy.
• Usa @media (color-gamut: p3) para mejorar progresivamente los colores en pantallas capaces de P3, con sRGB como respaldo base.
• color(display-p3 R G B) especifica colores en el espacio de color P3 en CSS; los valores están normalizados de 0 a 1.
• oklch() expresa naturalmente colores de gama amplia y es cada vez más preferido para sistemas de diseño: el navegador maneja automáticamente el mapeo de gama según la capacidad de la pantalla.
• Usa el Conversor de Color de ColorFYI para traducir entre hex, OKLCH y otros espacios de color mientras construyes sistemas de color de gama amplia.