Espacios de color explicados: sRGB, P3, gamma y por qué tus colores cambian

Ese rojo corporativo que se ve perfecto en tu MacBook y apagado en el portátil del cliente no es un bug ni mala suerte: es la consecuencia de que los colores no viajan, viajan descripciones que cada pantalla interpreta con su propia física. Entender gamuts, espacios y gamma convierte la frustración en control — y te permite usar los colores anchos modernos cuando de verdad aportan.

Un color digital es una receta, no una sustancia

rgb(220, 50, 30) no define "rojo": define tres intensidades relativas dentro de un sistema concreto. La pregunta clave es siempre: ¿intensidades de qué fósforos, con qué curva de brillo, dentro de qué triángulo posible? Eso es un espacio de color: primarias (colores puros de referencia), punto blanco y función de transferencia (gamma).

El mismo triple numérico en dos espacios produce colores físicamente distintos. Sin declarar el espacio, el número no significa nada universal.

Gamut: el triángulo de lo posible

Un display solo puede emitir colores dentro del triángulo que forman sus tres subpíxeles:

• sRGB (1996): el estándar histórico de la web. Cubre aproximadamente el 35% de los colores visibles. Todo lo demás existe como especificación pero no cabe en pantallas antiguas.
• Display P3 (~2015, Apple): mismas coordenadas blancas que sRGB pero primarias más saturadas, sobre todo en verdes y rojos. Cubre ~45% visible. Hoy está en iPhones, Macs, muchos OLED Android y monitores medios.
• Rec.2020/ProPhoto: gamuts enormes usados en vídeo profesional y masterización; las pantallas consumidoras apenas rozan su interior.

Cuando tu diseño usa un color fuera del gamut del dispositivo, este hace clipping: elige el vecino más cercano que puede mostrar. De ahí el "se ve apagado": ese verde vivo de P3 se recorta al borde del triángulo sRGB.

CSS moderno: colores fuera de sRGB

Históricamente CSS solo hablaba sRGB. La sintaxis actual permite declarar espacios explícitamente:

.tarjeta {
  /* clásico, sigue siendo la base */
  background: rgb(89.57% 19.61% 11.76%);

  /* Display P3: más saturado donde hay soporte */
  @supports (color: color(display-p3 1 0 0)) {
    background: color(display-p3 0.898 0.292 0.089);
  }
}

Y la evolución reciente va más allá con espacios perceptuales:

.oklch(55% 0.2 25)   /* luminosidad, croma, matiz */

OKLCH resuelve el problema eterno del HSL: en HSL, dos tonos con la misma "lightness" percibida se ven de brillos distintos porque la L no es perceptualmente uniforme. En OKLCH sí lo es — por eso las paletas generadas con OKLCH mantienen armonía real entre tonos, algo que nuestra generador de paletas aprovecha para construir combinaciones consistentes.

Gamma: la curva que nadie ve

Los sensores de cámara responden linealmente a la luz; los ojos no — somos hipersensibles a diferencias en sombras y poco sensibles en altas luces. La función de transferencia (gamma) codifica aprovechando esa curva: más bits dedicados a las sombras donde discriminamos mejor.

Detalles prácticos que derivan de aquí:

• El sRGB usa una curva aproximada de 2.2; mezclar contenido etiquetado mal (una imagen sin perfil interpretada como lineal) produce el típico resultado lavado u oscurecido.
• Los gradientes CSS interpolan en el espacio declarado; interpolar en sRGB genera el feo paso grisáceo en medio de dos colores saturados, mientras que in oklch produce transiciones perceptualmente suaves:

background: linear-gradient(in oklch, #ff0000, #0000ff);

• Las conversiones hex ↔ rgb ↔ hsl son matemática pura dentro del mismo espacio; nuestro convertidor de colores las hace al instante, pero recuerda que ninguna conversión de formato cambia el gamut: eso requiere re-mapear espacio de color.

Gestión de color práctica para web

Reglas que eliminan el 90% de sorpresas:

1. Trabaja y entrega en sRGB salvo razón concreta. Es el mínimo común denominador y todo lo demás le cae bien.
2. Perfil ICC incrustado o nada: una foto sin perfil deja al navegador adivinar (y suele asumir sRGB, bien); una foto etiquetada con perfil raro sin gestión en destino, desastre.
3. Pantallas calibradas para editar: sin calibración, estás maquillando a ciegas. Un calibrador hardware básico vale más que cualquier monitor caro sin él.
4. Usa P3 solo como mejora progresiva con @supports, nunca como base exclusiva: en pantallas sRGB el navegador recorta y el resultado varía según cómo lo hagas.
5. Compara siempre en el mismo entorno: juzgar colores entre dos monitores sin perfiles es juzgar dos pinturas con dos bombillas distintas.

Preguntas frecuentes

¿Debo exportar mis imágenes en P3? Solo si el contenido pierde algo esencial en sRGB (fotografía de producto muy saturada, arte digital vívido) y aceptas el peso extra del perfil. Para UI y web general, sRGB gana: compatibilidad total y archivos menores.

¿Por qué mi captura de pantalla se ve diferente pegada en otra app? Capturas sin perfil + apps sin gestión de color = reinterpretación libre. Exporta con perfil incrustado desde apps serias.

¿OKLCH funciona ya en todos lados? Todos los navegadores modernos lo soportan (base 2023+). Para producción amplia, define fallbacks hex/rgb previos a la declaración moderna.

Convierte entre HEX, RGB, HSL y más con nuestro convertidor de color, gratis y directamente en tu navegador.