Espacios de color explicados: sRGB, Adobe RGB y DCI-P3

Una foto que en el editor tiene un verde intenso aparece apagada al publicarla, o el rojo exacto de un logotipo sale distinto al subirlo a la web. Casi nunca es culpa de la foto: los números de cada píxel solo significan un color concreto cuando se sabe en qué espacio de color están escritos. La especificación CSS Color del W3C lo define así: un espacio de color es una organización de los colores respecto a un modelo colorimétrico, de forma que cualquier color que esté dentro tiene un significado claro y medible.

Repasamos qué es una gama, qué tienen sRGB, Adobe RGB, DCI-P3 y Display P3, qué significa la cobertura de un monitor, cómo funcionan los perfiles ICC y qué pasa cuando una imagen se edita en un espacio y se ve en otro, con la especificación CSS Color 4 (borrador del editor del 9 de octubre de 2026) y la documentación del consorcio de los perfiles ICC, de macOS y de Windows, consultadas el 20 de octubre de 2026.

---

Qué es un espacio de color y qué es una gama

La especificación lo explica con un ejemplo: una hoja verde, una foto de esa hoja en la pantalla y una copia impresa de la foto producen la misma sensación de verde por medios distintos, y si la pantalla y la impresora están calibradas, las tres se ven igual. El mismo color se puede expresar en varios espacios, o pasar de uno a otro, y seguir viéndose igual: lo que cambia son los números que lo describen.

En los espacios RGB, los de las pantallas, todo se apoya en tres primarios (un rojo, un verde y un azul) y en un punto blanco, que es el color que sale con los tres al máximo. La cromaticidad de cada primario, su color sin contar lo luminoso que es, se da con dos coordenadas, x e y, y esas tres cromaticidades más la del blanco fijan la gama del espacio: el conjunto de colores que caben en él. Casi todos usan uno de los pocos blancos que imitan la luz del día, como D65, que corresponde a una temperatura de color de 6.500 kelvin.

La gama vale también para los aparatos. Ningún dispositivo físico produce todavía todos los colores que ve el ojo humano, y la especificación llama gama al rango de colores que puede producir un dispositivo, que no hay que confundir con la gamma (la curva de tonos). Un aparato con una gama limitada no puede producir colores muy saturados, como los de un arcoíris. Para comparar espacios, la especificación mide el volumen de colores que caben en cada uno, en unidades cúbicas del espacio Lab, y esa es la cifra que usamos más abajo.

---

sRGB, el espacio por defecto de la web

sRGB es el espacio por defecto de CSS y el que usan todas sus funciones de color clásicas. Y va más allá del código: los colores escritos en HTML y las imágenes que no llevan perfil se tratan como sRGB salvo que se indique otra cosa. Esa regla es la clave de lo que pasa cuando una imagen se edita en un espacio y se ve en otro.

Sus primarios están en estas coordenadas: el rojo en x 0,640 e y 0,330; el verde en 0,300 y 0,600, y el azul en 0,150 y 0,060, con el blanco D65 y una luminancia de blanco de 80 candelas por metro cuadrado. El documento de referencia es una norma de la IEC titulada «Default RGB colour space – sRGB». En volumen, sRGB es el más pequeño de los espacios que trae CSS: 0,820 millones de unidades Lab.

---

Adobe RGB: más verdes y más cianes

En la misma especificación, Adobe RGB aparece como A98 RGB (en el código, a98-rgb), uno de los espacios que admite la función color() de CSS. Su código de ejemplo para convertirlo al espacio de referencia CIE XYZ remite al documento de Adobe, el archivo «AdobeRGB1998.pdf».

El rojo y el azul de A98 RGB están en las mismas coordenadas que los de sRGB (0,6400 y 0,3300; 0,1500 y 0,0600), y el blanco también es D65. La diferencia está en el verde: en A98 RGB se va a x 0,2100 e y 0,7100, frente al 0,300 y 0,600 de sRGB. Su curva de tonos es una función gamma cercana a 1/2,2, aunque no exactamente esa, y su luminancia de blanco es de 160 candelas por metro cuadrado.

Ese verde desplazado lo cambia todo: la especificación indica que los primarios de A98 RGB tienen más croma, más intensidad de color, sobre todo en amarillos, verdes y cianes, y su volumen sube a 1,310 millones de unidades Lab, frente a los 0,820 de sRGB.

Para fotografía, la especificación cita otro mayor, ProPhoto RGB, creado en origen por Kodak, muy usado por los fotógrafos para la versión de archivo de las fotos y con 2,896 millones de unidades Lab. Si trabajas con fotos de cámara, en RAW frente a JPEG: qué información contiene cada formato contamos qué guarda cada tipo de archivo.

---

DCI-P3 y Display P3: del cine a las pantallas

DCI-P3 viene del cine: la referencia que cita la especificación es una práctica recomendada de SMPTE, de 2011, sobre la calidad del cine digital, con su proyector y su entorno de referencia. Display P3 es su adaptación a las pantallas: un espacio definido por el fabricante de los Mac (la versión que cita la especificación es de febrero de 2022) con las mismas cromaticidades primarias que DCI-P3, pero con el blanco D65 y la misma curva de tonos que sRGB.

Sus primarios son el rojo en x 0,680 e y 0,320, el verde en 0,265 y 0,690 y el azul en 0,150 y 0,060. El azul coincide con el de sRGB; el rojo y el verde llegan más lejos, y la especificación resume que los primarios de P3 tienen más croma. Su volumen es de 1,233 millones de unidades Lab: más que sRGB y algo menos que A98 RGB. Según la especificación, las pantallas modernas, los televisores y las pantallas de portátil pueden mostrar toda o casi toda la gama de Display P3.

Más amplio que P3 y que A98 RGB es Rec. 2020, la recomendación BT.2020 de la UIT para la televisión de ultra alta definición, un estándar de la industria de la difusión capaz de representar casi todos los colores reales visibles, con 2,042 millones de unidades Lab. En cuanto al HDR, la especificación cita espacios HDR como BT.2100 HLG junto a los SDR, y la utilidad de gestión del color de macOS permite ajustar una imagen HDR al rango más estrecho de una SDR. Los seis espacios de este artículo, de un vistazo:

---

Qué significa la cobertura de un monitor

Un monitor también tiene su gama, y la cobertura es la forma de expresarla: qué parte de un espacio de color concreto es capaz de reproducir. La especificación pone el ejemplo de una pantalla que cubre el 100 % de Display P3 y nada más: un color que quede fuera de P3, como algunos de ProPhoto RGB, está fuera de su gama, y para mostrarlo hay que sustituirlo por otro que sí pueda pintar.

Con los datos de arriba se entiende por qué un 100 % de sRGB no es un 100 % de Adobe RGB. Los dos comparten el rojo y el azul, pero el verde de A98 RGB está mucho más lejos, y su volumen es de 1,310 frente a 0,820. Un monitor que cubre sRGB entero puede quedarse corto justo en los amarillos, verdes y cianes que A98 RGB añade, y lo mismo pasa con P3, que estira el rojo y el verde. Un porcentaje de cobertura solo dice algo con el nombre del espacio al lado.

La cobertura tampoco es fidelidad. La especificación llama calibrado al dispositivo que, además de estar medido, se ha ajustado para cumplir objetivos de punto blanco, grises neutros y respuesta de tonos predecible y constante. La cobertura dice hasta dónde llega la pantalla; la calibración, si los colores que pinta son los que tocan. La conexión es otro tema, y está en HDMI vs DisplayPort: qué versión necesitas por resolución.

---

Perfiles ICC y gestión del color en Windows y macOS

Para que cada programa sepa en qué espacio están los números de una imagen, esta lleva una etiqueta: el perfil ICC. La especificación CSS llama imagen etiquetada a la que tiene asignado de forma explícita un perfil de color, normalmente incrustando un perfil del International Color Consortium (ICC), y recuerda que JPEG, PNG y TIFF permiten incrustarlo.

El consorcio desarrolla las especificaciones de los perfiles con el objetivo de promover una gestión del color abierta, neutral respecto a los fabricantes y multiplataforma. La especificación que cita la de CSS es la ICC.1:2022, versión de perfil 4.4.0.0, de mayo de 2022. Entre sus miembros están Adobe y los fabricantes de macOS y de Windows.

En Windows, Microsoft explica que el sistema incluye gestión del color para mejorar cómo se muestra en cualquier forma de comunicación digital; desde Windows 2000, Windows XP y Windows Server 2003 se llama Image Color Management (ICM) 2.0, y desde Windows Vista, Windows Color System (WCS) 1.0, un superconjunto de las interfaces y funciones de ICM 2.0 que pueden usar todas las aplicaciones.

En macOS, la herramienta es la Utilidad ColorSync, y Apple resume su función en una línea: usar perfiles de color para que los colores de tus imágenes se vean igual en todos tus dispositivos, impresoras incluidas. Su guía explica cómo ver y comparar perfiles, cambiar el perfil de un dispositivo y comprobarlos y repararlos.

---

Qué pasa si se edita en un espacio y se ve en otro

La regla de la especificación CSS es clara: una imagen con un perfil válido se trata como lo que dice su perfil. Si un navegador con monitor Display P3 muestra un JPEG etiquetado como Rec. 2020, tiene que convertir los colores a Display P3, y no puede tratar los valores de Rec. 2020 como si fueran de Display P3, porque saldrían colores incorrectos. Si el perfil no es válido, la imagen se trata como si no llevara ninguno, y entonces se da por hecho que es sRGB.

De ahí salen los dos fallos más típicos. Si editas una foto en Adobe RGB y la exportas sin perfil, el navegador lee sus números como sRGB y los pinta con los primarios de sRGB, que tienen menos croma: colores más apagados, lavados. Al revés, unos números pensados para sRGB leídos como Display P3 se pintan con primarios de más croma, y salen más saturados de la cuenta. Para la web, lo seguro es convertir a sRGB antes de exportar o incrustar siempre el perfil.

Convertir tampoco es gratis cuando el destino es más pequeño. Al pasar a un espacio de gama menor, algunos colores quedan fuera y hay que sustituirlos por el de dentro que menos cambie su aspecto: un color parecido, pero de menos croma, menos saturado. El método más simple, recortar los valores al rango que se puede mostrar, es también el menos aceptable, porque altera la proporción entre los tres primarios y desplaza el tono.

Por último, no hay que confundir asignar con convertir. En la utilidad de macOS, «Match to Profile» (así se llama en la guía en inglés) modifica los píxeles para ajustar los colores al perfil nuevo y se lo asigna; «Assign Profile» solo cambia el perfil de la imagen sin tocar lo guardado en el archivo, así que los mismos números pasan a leerse en otro espacio. La regla práctica: si quieres que la imagen se siga viendo igual, conviértela; si solo cambias la etiqueta, cambiarás también lo que se ve.

---

Te puede interesar

Tech Planet participa en el programa de afiliados de Amazon. Si compras a través de estos enlaces, recibimos una pequeña comisión sin coste extra para ti, lo que nos ayuda a seguir creando contenido como este.