Espacios de color para la web: sRGB, DCI-P3, Rec.2020, gamma y por qué el mismo hex se ve diferente en dos pantallas
Qué es un espacio de color: primarios, gama y el blanco de referencia
Un espacio de color define tres cosas: un conjunto de colores primarios, un punto de blanco de referencia y una función de transferencia. Los colores primarios se especifican como coordenadas de cromaticidad precisas en el diagrama de cromaticidad CIE 1931 xy, un mapa bidimensional de todos los colores visibles para un observador humano estándar. Los tres primarios forman un triángulo en ese diagrama. Todos los colores dentro del triángulo pueden reproducirse mezclando esos primarios en proporciones variables; los colores fuera no pueden. Este triángulo es la gama de colores del espacio.
El blanco de referencia es el color que aparece cuando los tres primarios se activan a máxima intensidad. Para la mayoría de los estándares de consumo y web, este es D65, un iluminante estándar que modela la luz diurna promedio a aproximadamente 6500 K de temperatura de color. Dos pantallas con primarios de gama idénticos pero puntos de blanco diferentes renderizarán el gris neutro de manera diferente. Cuando un navegador interpreta el valor CSS #808080, asume sRGB con un punto de blanco D65, y asume que tu pantalla coincide con esa suposición.
sRGB: la línea de base universal de la web, estandarizada en 1996
sRGB fue definido en 1996 por la Comisión Electrotécnica Internacional como IEC 61966-2-1. Fue diseñado para coincidir con las características de un monitor CRT de consumo típico de mediados de los años 90. Su primario rojo se sitúa en coordenadas CIE xy aproximadamente en (0.64, 0.33), verde en (0.30, 0.60) y azul en (0.15, 0.06). El triángulo de gama resultante cubre aproximadamente el 35% de los colores visibles para un observador humano estándar según el diagrama de cromaticidad CIE 1931.
Cada color hexadecimal CSS, cada PNG o JPEG sin un perfil ICC incrustado y cada píxel de HTML canvas está implícitamente en sRGB. Los navegadores asumen sRGB a menos que se les indique lo contrario. El límite práctico se muestra en los bordes de la gama: los rojos muy saturados, los verdes vívidos y los cianes puros no pueden representarse completamente. Un tomate maduro fotografiado al aire libre a menudo tiene un rojo que cae fuera de sRGB; el archivo de imagen recorta ese rojo al valor sRGB más cercano, haciendo que el color aparezca ligeramente menos vívido en pantalla que en persona.
DCI-P3: un estándar de cine adoptado por pantallas de consumo
DCI-P3 se originó con el consorcio Digital Cinema Initiatives. Sus primarios están desplazados en comparación con sRGB: el primario rojo se mueve ligeramente hacia el naranja (xy aproximadamente 0.680, 0.320) y el verde se extiende más hacia el verde puro (0.265, 0.690). La gama resultante cubre aproximadamente el 45.5% del diagrama de cromaticidad CIE 1931, alrededor de un 26% más de área que sRGB. Esta gama más amplia fue diseñada para que los proyectores de cine digital pudieran reproducir colores saturados comparables al cine analógico.
Las pantallas de consumo comenzaron a incorporar primarios P3 alrededor de 2015, cuando Apple introdujo paneles capaces de P3 en el iMac de 27 pulgadas, seguido por el iPhone 7 en 2016. Un píxel renderizado como #FF0000 en una pantalla P3 usando el espacio de color P3 aparece notablemente más saturado que el mismo valor en una pantalla sRGB. CSS expone P3 a través de la función color(): color(display-p3 1 0 0) especifica el rojo P3 más saturado. Todos los navegadores principales desde 2023 entienden esta sintaxis y muestran la gama más amplia en hardware capaz de P3, ajustando automáticamente a sRGB en pantallas de gama más estrecha.
Rec.2020: el estándar de transmisión futuro y la brecha actual de las pantallas
Rec.2020 (formalmente ITU-R BT.2020) fue definido por la Unión Internacional de Telecomunicaciones en 2012 como estándar para la televisión de ultra alta definición. Sus primarios se acercan a la luz monocromática: el rojo se define cerca de los 630 nm, el verde cerca de los 532 nm y el azul cerca de los 467 nm. La gama resultante cubre aproximadamente el 75.8% del diagrama de cromaticidad CIE 1931, casi el doble del área de sRGB.
La brecha entre el estándar y la práctica es significativa: ninguna pantalla de consumo disponible en 2025 puede reproducir la gama completa de Rec.2020. Los monitores de referencia profesionales de alta gama pueden alcanzar aproximadamente el 75–80% del volumen de Rec.2020 medido en el modelo de apariencia de color tridimensional CIECAM02. El contenido de video HDR a menudo se masteriza con primarios Rec.2020 combinados con una función de transferencia de cuantizador perceptual (PQ) o gamma logarítmico híbrido (HLG), pero las plataformas de streaming típicamente entregan la señal final mapeada a Display P3 o sRGB con el brillo máximo gestionado por el mapeo de tono.
Gamma y la función de transferencia: por qué la codificación sRGB no es una ley de potencia pura
La frase 'gamma 2.2' se usa comúnmente para describir sRGB, pero sRGB usa una función de transferencia por partes en lugar de una ley de potencia pura. El estándar IEC 61966-2-1 define dos segmentos: para valores de luminancia muy bajos (C lineal sin superar 0.0031308) la codificación es lineal, C multiplicado por 12.92; y por encima de ese umbral sigue una curva de potencia aproximadamente igual a 1.055 veces C elevado a la potencia de 1/2.4, menos 0.055. El resultado se aproxima estrechamente a gamma 2.2 en la mayor parte del rango utilizable.
Esta codificación importa en el procesamiento de imágenes. Reducir una imagen promediando píxeles adyacentes en el dominio gamma codificado produce un resultado ligeramente más oscuro que promediando en luz lineal, un artefacto bien documentado a veces llamado el problema de promediado oscuro de gamma. El escalado de imágenes correcto linealiza los valores primero, los promedia y luego los recodifica. Los degradados CSS y color-mix() mezclan en espacio sRGB por defecto, interpolando a través de valores comprimidos por gamma en lugar de luz lineal; CSS Color Level 4 permite especificar el espacio de color de interpolación explícitamente con in srgb-linear.
Por qué el mismo color hexadecimal se ve diferente en dos pantallas
Varios factores independientes explican por qué #FF6600 en una pantalla se ve diferente a #FF6600 en otra. Primero, si una pantalla tiene una gama física más amplia (hardware P3) pero carece de gestión de color del sistema operativo, puede expandir ingenuamente los valores de señal sRGB a su gama de primarios más amplia, haciendo que todos los colores parezcan sobresaturados. Segundo, una pantalla no calibrada puede tener un punto de blanco real, curva gamma o temperatura de color diferente a la que asume el estándar sRGB. Tercero, el soporte de gestión de color en navegadores ha variado históricamente: Safari en macOS aplica gestión de color completa con perfil ICC; versiones antiguas de otros navegadores tenían soporte parcial.
El perfil de color ICC incrustado en una imagen, o el perfil de pantalla aplicado por software de calibración, describe el mapeo desde el espacio de color codificado de ese contenido hasta la respuesta medida real de la pantalla. La canalización de gestión de color del SO, ColorSync en macOS y Windows Color System en Windows, realiza esta conversión para cada pantalla conectada. Los desarrolladores web que apuntan a pantallas de gama amplia pueden usar @media (color-gamut: p3) para suministrar valores color(display-p3 ...) para colores de interfaz vívidos, manteniendo el hex simple como respaldo sRGB. Las herramientas de paleta de color y simulación de daltonismo de TeaFun operan en sRGB, la línea de base segura universal.