Fundamentos de espacios de color - Diferencias entre sRGB, Display P3 y Adobe RGB

Qué es un espacio de color - Definición del color en imágenes digitales

Un espacio de color es un sistema de coordenadas para representar colores numéricamente. Mientras que el rango de colores que los humanos pueden percibir es vasto, los dispositivos digitales solo pueden reproducir un subconjunto. Un espacio de color define "qué rango de colores puede expresarse usando qué combinaciones numéricas".

Los tres elementos centrales de un espacio de color:

• Gama (Gamut): El rango de colores representables. En el diagrama de cromaticidad CIE se representa típicamente como un área triangular
• Punto blanco (White Point): El estándar que define el "blanco". D65 (luz diurna de 6500K) es el punto blanco más utilizado
• Función de transferencia (Transfer Function): La relación de mapeo entre valores numéricos y brillo real, es decir, la curva gamma

Por qué se necesitan múltiples espacios de color:

Diferentes escenarios de aplicación tienen diferentes necesidades de color. La navegación web requiere consistencia entre dispositivos (sRGB), la impresión necesita cubrir la gama CMYK (Adobe RGB), y los monitores modernos pueden mostrar una gama más amplia (Display P3). Elegir el espacio de color adecuado es el requisito previo para asegurar que los colores se presenten correctamente en el medio objetivo.

Principios básicos de gestión del color:

La gestión del color describe las características cromáticas de los dispositivos mediante perfiles ICC, realizando conversiones de color precisas entre diferentes dispositivos. El perfil fuente describe el espacio de color de la imagen, el perfil destino describe las capacidades del dispositivo de salida, y el motor de gestión del color se encarga del mapeo entre ambos.

sRGB - El espacio de color estándar web

sRGB (Standard RGB) es un espacio de color desarrollado conjuntamente por HP y Microsoft en 1996, y sirve como el estándar de facto para la web moderna. Las especificaciones de color CSS, la visualización de imágenes HTML y el renderizado del navegador trabajan por defecto en el espacio sRGB.

Características de sRGB:

• Gama: Cubre aproximadamente el 35% del diagrama de cromaticidad CIE, es el espacio de color de uso común más pequeño
• Punto blanco: D65 (6500K)
• Gamma: Aproximadamente 2.2 (en realidad usa una función segmentada, lineal en el extremo bajo)
• Profundidad de bits: Típicamente 8 bits/canal (0-255)

Ventajas de sRGB:

• Casi todos los dispositivos lo soportan, mejor compatibilidad
• Espacio de color predeterminado del navegador web, no requiere configuración adicional
• Los archivos sin perfil ICC incrustado se interpretan como sRGB por defecto
• Alta consistencia de color, mínimas diferencias entre dispositivos

Limitaciones de sRGB:

• Gama relativamente estrecha, no puede representar cian y verde de alta saturación
• Las capacidades de los monitores modernos (especialmente OLED) superan ampliamente sRGB
• Algunos colores CMYK de impresión exceden la gama sRGB

sRGB en desarrollo web:

Los valores de color rgb(), hsl() y HEX en CSS son todos sRGB por defecto. Para la mayoría de los proyectos web, usar sRGB de forma uniforme es la opción más segura, asegurando que todos los usuarios vean colores consistentes.

Display P3 - Gama amplia para la web de próxima generación

Display P3 es un espacio de color de gama amplia adoptado por primera vez por Apple en el iMac 5K de 2015. Basado en DCI-P3 (el estándar de la industria cinematográfica), modifica el punto blanco a D65 (igual que sRGB). La gama es aproximadamente un 25% más amplia que sRGB, con expansión significativa particularmente en las regiones roja y verde.

Características de Display P3:

• Gama: Aproximadamente 25% más grande que sRGB, expansión notable en dirección rojo y verde
• Punto blanco: D65 (igual que sRGB, facilita la conversión)
• Gamma: Misma función de transferencia que sRGB
• Soporte de dispositivos: iPhone, iPad, Mac, algunos buques insignia Android

Uso de Display P3 en CSS:

color: color(display-p3 1 0 0); /* Rojo P3, más vibrante que el rojo sRGB */

Usa la media query @media (color-gamut: p3) para detectar si el dispositivo soporta la gama P3, proporcionando colores más vibrantes para dispositivos compatibles.

Estrategia de mejora progresiva:

Como no todos los dispositivos soportan P3, se debe adoptar un enfoque de mejora progresiva: primero definir un color de respaldo sRGB, luego sobrescribir con color P3 usando @supports o media queries. Así los dispositivos sin soporte P3 siguen mostrándose normalmente.

P3 en imágenes:

Las fotos tomadas con iPhone usan Display P3 por defecto. Al mostrarlas en la web, si el navegador soporta gestión del color, mostrará correctamente los colores vibrantes de la gama P3; los navegadores sin soporte recortarán a sRGB, causando cierta distorsión de color.

Adobe RGB - El espacio de color para flujos de trabajo de impresión

Adobe RGB fue desarrollado por Adobe Systems en 1998 con el objetivo de cubrir la mayoría de los colores reproducibles en impresión CMYK. La gama es aproximadamente un 35% más amplia que sRGB, con ventajas particulares en la región cian-verde.

Características de Adobe RGB:

• Gama: Aproximadamente 35% más grande que sRGB, mayor expansión en dirección cian y verde
• Punto blanco: D65
• Gamma: 2.2 (función de potencia simple, sin segmentación)
• Uso principal: Flujos de trabajo de impresión, fotografía profesional

Relación de Adobe RGB con la impresión:

La gama de impresión CMYK tiene una forma diferente a los espacios de color RGB. El objetivo de diseño de Adobe RGB es cubrir tantos colores reproducibles en CMYK como sea posible, minimizando los colores fuera de gama al convertir de Adobe RGB a CMYK. Esto es crucial para la impresión comercial que requiere reproducción precisa del color.

Casos de uso:

• Edición y salida de imágenes para impresión comercial
• Flujo de trabajo de procesamiento RAW para fotógrafos profesionales
• Propósitos de archivo que necesitan preservar la máxima información de color

Adobe RGB en la web:

Cuando las imágenes Adobe RGB se usan directamente en la web sin conversión de gestión del color por el navegador, los colores aparecen apagados y distorsionados. Las imágenes Adobe RGB deben convertirse a sRGB o Display P3 antes de publicar en la web. Las imágenes Adobe RGB sin perfil ICC incrustado se interpretan erróneamente como sRGB, causando desviaciones de color severas.

Conversión de espacios de color y consideraciones importantes

Al convertir imágenes entre diferentes espacios de color, surge la cuestión de cómo manejar los colores que exceden la gama del destino. Este método de procesamiento se llama intención de renderizado (Rendering Intent), y hay cuatro formas estándar.

Cuatro intenciones de renderizado:

• Perceptual: Comprime toda la gama para que todos los colores caigan dentro del rango objetivo, manteniendo las relaciones relativas entre colores. Adecuado para fotografías
• Colorimétrico relativo: Los colores dentro de la gama permanecen sin cambios, los colores fuera de gama se recortan al color representable más cercano. Adecuado para coincidencia precisa de color
• Saturación: Prioriza mantener la vivacidad del color. Adecuado para gráficos comerciales y presentaciones
• Colorimétrico absoluto: Similar al colorimétrico relativo, pero no ajusta el punto blanco. Usado para simulación de pruebas

Pérdida de información en la conversión:

• Al convertir de gama amplia a gama estrecha, la información de color que excede se pierde irreversiblemente
• Las imágenes de 8 bits pueden mostrar bandas durante la conversión; se recomienda convertir en modo de 16 bits
• Múltiples conversiones acumulan errores; se debe minimizar el número de conversiones

Consejos prácticos:

1. Editar en el espacio de color más amplio posible (como ProPhoto RGB o Adobe RGB)
2. Convertir al espacio de color objetivo solo en la salida final
3. Siempre incrustar perfiles ICC para asegurar la interpretación correcta del color
4. Para salida web, convertir uniformemente a sRGB (o usar Display P3 en escenarios compatibles)

カラーマネジメントの専門書は Amazon でも入手できます

Gestión práctica de espacios de color para desarrolladores web

A continuación se presentan guías prácticas para gestionar correctamente los espacios de color en el desarrollo web. El principio básico es unificar el espacio de color de todas las imágenes del sitio. Cuando se mezclan imágenes de diferentes espacios de color, la consistencia del color se rompe.

Flujo de trabajo de procesamiento de imágenes:

1. Confirmar el espacio de color de la imagen fuente (verificar perfil ICC)
2. Editar en el espacio de color apropiado
3. Convertir a sRGB para salida web e incrustar perfil ICC
4. Si los dispositivos del público objetivo soportan P3, proporcionar una versión P3 como mejora

Funciones de color CSS:

• rgb() / hsl(): Espacio sRGB
• color(display-p3 r g b): Espacio Display P3
• oklch(L C H): Espacio de color perceptualmente uniforme, adecuado para generar escalas de color
• color(rec2020 r g b): Gama ultra amplia Rec.2020

Formatos de imagen y espacios de color:

• JPEG: Soporta incrustación de perfil ICC, típicamente sRGB
• PNG: Soporta bloques iCCP y sRGB
• WebP: Soporta incrustación de perfil ICC
• AVIF: Soporte nativo de gama amplia y HDR

Solución de problemas comunes:

• Colores de imagen apagados: Posiblemente una imagen Adobe RGB usada en web sin convertir
• Colores excesivamente vibrantes: Posiblemente una imagen P3 mostrada en un navegador sin gestión del color
• Colores inconsistentes entre navegadores: Verificar si se ha incrustado un perfil ICC