Mapeo de Gama de Color: Conversión Entre Espacios de Color

Cuando fotografías un atardecer vívido con una cámara profesional y lo abres en un navegador web, algo se pierde. Los naranjas y morados profundos y saturados que el sensor de gama amplia de la cámara registró no pueden reproducirse exactamente en cada pantalla, y aunque pudieran, es posible que los colores no sobrevivan la conversión a un formato compatible con la web. Este proceso de adaptar colores que existen en un espacio de color para que quepan dentro de los límites de otro se llama mapeo de gama. Es una de las operaciones menos visibles pero más importantes de toda la cadena de procesamiento de color digital, y comprenderla es esencial para cualquier persona que se preocupe por la precisión del color desde el diseño hasta la producción.

¿Qué Es el Mapeo de Gama?

Una gama de color es el rango completo de colores que un dispositivo, formato o espacio de color particular puede representar. Cada gama tiene límites: los colores que caen dentro de ellos pueden representarse con precisión; los colores fuera de ellos no pueden.

Diferentes dispositivos y espacios de color tienen distintas gamas:

Espacio de Color / Dispositivo	Tamaño de Gama	Caso de Uso
sRGB	Más pequeña (estándar)	Web, la mayoría de los monitores de consumo
Display P3	~26% más grande que sRGB	iPhone, pantallas Mac, Android moderno
Adobe RGB	~35% más grande que sRGB	Fotografía profesional, impresión
Rec. 2020	~57% más grande que sRGB	Video HDR, pantallas futuras
ProPhoto RGB	Más grande	Edición de fotos RAW

Cuando mueves un color de una gama más grande a una más pequeña, algunos colores pueden caer fuera de la gama de destino. Estos se denominan colores fuera de gama. El mapeo de gama es el proceso de decidir qué hacer con ellos.

El proceso inverso —mover de una gama más pequeña a una más grande— generalmente no tiene pérdidas, ya que todos los colores de origen caben dentro del destino. Un archivo sRGB mostrado en un monitor Display P3 simplemente usa un subconjunto del rango de ese monitor. No se necesita mapeo de gama.

El Problema de los Colores Fuera de Gama

Considera un cian vívido: #00FFFF (#00FFFF) en sRGB. Este color se sitúa cerca del borde de la gama sRGB. En Display P3, hay cianes más saturados disponibles: colores que sRGB no puede representar en absoluto.

Ahora imagina que diseñas una interfaz en Display P3, usando un verde vívido que cae fuera de sRGB: aproximadamente color(display-p3 0.0 0.9 0.3), un verde significativamente más saturado que #00E84A (#00E84A) en sRGB. Cuando un usuario lo ve en un monitor sRGB estándar, el navegador debe tomar una decisión: ¿qué color sRGB debe representar a este verde irreproducible?

Esta decisión es el mapeo de gama, y hay varios enfoques con diferentes ventajas y desventajas.

Recorte vs. Compresión Perceptual

Las dos estrategias principales para manejar los colores fuera de gama son el recorte y el mapeo perceptual (por compresión).

Recorte

El recorte es el enfoque más simple: los colores fuera de la gama se ajustan al punto más cercano en el límite de la gama. Es análogo a tomar un valor de 1.5 en una escala de 0 a 1 y simplemente establecerlo en 1.

Para un color con un valor de saturación fuera de gama, el recorte establece esa saturación al valor máximo que la gama de destino permite, dejando sin cambios la luminosidad y el matiz. El resultado:

Colores cerca del límite: cambio visible mínimo
Colores muy fuera de la gama: pérdida significativa de precisión de matiz, colores que pueden verse muy diferentes del original

El mayor problema con el recorte es el desplazamiento de matiz. Muchos colores fuera de gama se recortan de una manera que desplaza perceptiblemente su matiz. Un verde vívido puede recortarse a verde-amarillo; un violeta profundo puede recortarse a azul. El matiz original no se conserva.

El recorte también crea bandas: un rango de diferentes colores de origen se recortan al mismo punto de límite de máxima saturación, produciendo escalones visibles en gradientes o transiciones de color suaves que deberían aparecer continuas.

A pesar de estos inconvenientes, el recorte es común para imágenes estáticas y CSS porque es computacionalmente trivial.

Intención de Renderizado Perceptual (Compresión)

El renderizado perceptual —a veces llamado mapeo por compresión— adopta un enfoque diferente. En lugar de solo ajustar los colores fuera de gama, escala toda la gama de manera proporcional. Los colores más saturados de la fuente se mapean a los colores más saturados disponibles en el destino, y todo lo demás escala en consecuencia.

Imagina que estás ajustando una pintura grande (gama Display P3) a un lienzo más pequeño (gama sRGB) reduciendo toda la pintura proporcionalmente en lugar de recortarla. Ningún color se corta; en cambio, todas las relaciones entre colores se conservan, simplemente comprimidas.

Ventajas de la compresión perceptual: - Los gradientes suaves siguen siendo suaves (sin bandas) - Las relaciones relativas entre colores se conservan - Generalmente más visualmente agradable para fotografía y gradientes

Desventajas: - Los colores dentro de la gama también se desplazan (se reducen ligeramente en saturación), aunque no fuera sea necesario - Los colores pueden verse ligeramente menos vívidos que el original, incluso donde podrían haberse reproducido con precisión

La intención de renderizado perceptual es el valor predeterminado utilizado por los perfiles de color ICC en impresión y flujos de trabajo de fotografía profesional. También es el enfoque utilizado por el algoritmo de mapeo de gama CSS.

Colorimétrico Relativo (con Compensación del Punto Negro)

Un tercer enfoque —colorimétrico relativo— mapea exactamente los colores dentro de la gama y recorta los colores fuera de ella, mientras se ajusta por la diferencia en el punto blanco entre la fuente y el destino. Es un buen compromiso para documentos con pocos colores fuera de gama, ya que preserva la precisión dentro de la gama mejor que el perceptual.

Intención de Renderizado de Saturación

Una cuarta intención usada principalmente en gráficos de negocios: maximiza la saturación a expensas de la precisión de matiz. Se usa para gráficos de barras y pastel donde los colores vívidos y distintos importan más que la reproducción precisa del matiz.

Mapeo de Gama en CSS

CSS ha soportado múltiples espacios de color desde la especificación CSS Color Level 4, y el mapeo de gama ahora está integrado en el algoritmo de resolución de color CSS.

Especificar Colores de Gama Amplia en CSS

/* sRGB (tradicional) */
color: #22C55E;
color: rgb(34, 197, 94);

/* Display P3 (gama amplia) */
color: color(display-p3 0.05 0.8 0.35);

/* Rec. 2020 (ultra-amplia) */
color: color(rec2020 0.1 0.7 0.2);

/* OKLCH (perceptualmente uniforme, puede abordar colores de gama amplia) */
color: oklch(0.75 0.25 150);  /* Verde muy vívido: puede estar fuera de sRGB */

Cómo CSS Maneja el Desbordamiento de Gama

Cuando un valor de color CSS aborda un color que está fuera de la gama de la pantalla, el navegador aplica el algoritmo de mapeo de gama CSS definido en CSS Color Level 4. El algoritmo usa búsqueda binaria en el espacio de color OKLCH para encontrar el color dentro de la gama más similar usando deltaE 2000 (una métrica de diferencia de color perceptual) como medida de distancia.

El resultado es un enfoque de mapeo de gama que prioriza: 1. Preservar la luminosidad primero (los cambios de luminosidad son los más perceptibles) 2. Preservar el matiz en segundo lugar 3. Reducir la croma (saturación) hasta que el color quepa dentro de la gama de destino

Esto es una mejora significativa sobre el simple recorte sRGB. El algoritmo CSS produce resultados más cercanos a la compresión perceptual para colores que están ligeramente fuera de gama, mientras se degrada con gracia para colores muy alejados.

La Consulta de Medios color-gamut

CSS proporciona una consulta de medios para detectar qué gama soporta la pantalla, permitiéndote servir diferentes colores a diferentes capacidades:

/* Por defecto: colores sRGB para todas las pantallas */
.brand-color {
  color: #22C55E;
}

/* Mejorado: colores P3 más vívidos para pantallas capaces */
@media (color-gamut: p3) {
  .brand-color {
    color: color(display-p3 0.05 0.8 0.35);
  }
}

/* Ultra-amplio: máxima vibración para pantallas Rec. 2020 */
@media (color-gamut: rec2020) {
  .brand-color {
    color: color(rec2020 0.1 0.7 0.2);
  }
}

Los tres valores para color-gamut: - srgb — la pantalla cubre aproximadamente la gama sRGB (la más común) - p3 — la pantalla cubre aproximadamente la gama Display P3 (Mac moderno, iPhone, Android de alta gama) - rec2020 — la pantalla cubre aproximadamente la gama Rec. 2020 (pantallas profesionales y HDR)

OKLCH y Gama Amplia

OKLCH es particularmente adecuado para el trabajo de diseño de gama amplia porque los valores de croma alta abordan naturalmente colores fuera de sRGB. Un valor de croma superior a aproximadamente 0.37 en OKLCH estará fuera de la gama sRGB para la mayoría de los matices, situándose en Display P3 o más allá.

/* Dentro de sRGB: verde vívido */
color: oklch(0.75 0.22 145);

/* Fuera de sRGB, en Display P3: verde más vívido */
color: oklch(0.75 0.35 145);

/* Muy fuera de sRGB: el navegador aplicará mapeo de gama */
color: oklch(0.75 0.5 145);

Cuando un color OKLCH está fuera de gama, CSS aplica automáticamente su algoritmo de mapeo de gama. No necesitas manejar esto manualmente: el navegador lo resuelve.

Usa el Convertidor de Color para convertir colores entre espacios de color y ver cómo los valores cambian al moverse entre representaciones sRGB, Display P3 y OKLCH.

Soluciones Prácticas para Diseñadores

Comprender el mapeo de gama cambia la manera en que abordas el trabajo de color para pantallas:

1. Diseñar en la Gama de Destino

Si tu producto apunta principalmente a usuarios web en una mezcla de dispositivos, diseña en sRGB. Si sabes que tu audiencia utiliza principalmente hardware Apple moderno (Mac, iPhone), considera diseñar en Display P3 y proporcionar respaldos sRGB.

2. Conocer el Estado de Gama de tus Colores Vívidos

Muchos colores vívidos que "funcionan" en herramientas como Figma (que usa Display P3 en hardware Apple) pueden verse diferentes cuando se exportan a sRGB para uso web. Siempre verifica los colores finales con un valor CSS que hayas definido explícitamente, no solo lo que Figma renderiza en tu pantalla.

Algunos verdes, cianes y magentas extremadamente vívidos en Display P3 no tienen equivalente sRGB. Si tu color de marca es color(display-p3 0.0 0.9 0.3), un verde más vívido que cualquier verde sRGB, necesitas decidir qué respaldo sRGB usar, o aceptar que los usuarios de sRGB verán una versión menos vívida.

3. Probar Transiciones de Gradiente Entre Gamas

Los gradientes entre dos colores de gama amplia pueden producir bandas cuando se muestran en monitores sRGB, porque los colores intermedios que parecían distintos en P3 se mapean todos a valores sRGB similares (recorte de color en el medio del gradiente). Si ves bandas en un gradiente, intenta:

Reducir la croma de ambos extremos a niveles seguros para sRGB
Agregar paradas intermedias de gradiente para distribuir la transición
Enrutar el gradiente a través de OKLCH para un espaciado perceptualmente uniforme

4. Usar el Formato de Exportación Correcto

Para imágenes que contienen colores de gama amplia: - JPEGs: Incrusta el perfil de color (Display P3 o Adobe RGB): los navegadores lo usarán para la gestión del color - PNGs: Igual: incrusta el perfil - WebP: Admite perfiles ICC; incrusta para un color preciso - SVG: Los colores se especifican en CSS: usa la función color() para gama amplia

Las imágenes sin perfiles incrustados se asumen como sRGB y se mostrarán sin conversión de gama. Una imagen de gama amplia sin un perfil incrustado aparecerá más desaturada de lo previsto en pantallas P3.

5. El Enfoque Seguro de Gama Amplia

Para diseñadores que quieren colores más ricos sin la complejidad de gestionar múltiples objetivos de gama, OKLCH con croma moderada (0.18–0.25) se mantiene principalmente dentro de sRGB mientras proporciona resultados ligeramente más vívidos que los colores RGB típicos en ese rango. El mapeo de gama CSS maneja automáticamente cualquier caso límite.

/* Azules vívidos pero mayormente seguros en sRGB */
--color-primary: oklch(0.55 0.22 255);
--color-primary-hover: oklch(0.60 0.22 255);

Conclusiones Clave

Una gama de color es el rango de colores que un dispositivo o espacio de color puede representar. sRGB es el estándar web; Display P3 es ~26% más grande y está disponible en dispositivos Apple modernos y de alta gama.
Los colores fuera de gama son colores que caen fuera de una gama de destino y no pueden reproducirse con precisión en ese dispositivo: algo debe suceder para llevarlos dentro de los límites.
El recorte ajusta los colores fuera de gama al límite de la gama —rápido pero puede causar desplazamientos de matiz y bandas. La compresión perceptual escala toda la gama proporcionalmente —más lenta pero preserva las relaciones de color y los gradientes.
CSS Color Level 4 define un algoritmo de mapeo de gama que usa OKLCH y deltaE 2000 para reducir inteligentemente la croma mientras preserva la luminosidad y el matiz, muy superior al simple recorte sRGB.
La consulta de medios color-gamut te permite servir colores color(display-p3) más vívidos a pantallas capaces, manteniendo respaldos sRGB para las demás.
Trampas del diseño de gama amplia: Figma en hardware Apple renderiza Display P3 de forma predeterminada: los colores que se ven vívidos en Figma pueden verse menos saturados al exportarse como sRGB para uso web. Siempre verifica con valores CSS explícitos.
Usa el Convertidor de Color para inspeccionar cómo cualquier color se traduce entre sRGB, Display P3 y OKLCH para entender su estado de gama y encontrar el equivalente dentro de la gama más cercano.