Espacios de color explicados para diseñadores

“Espacio de color” abarca dos tipos de cosas distintos, y casi toda la confusión en torno al término viene de mezclarlos. Las gamas — sRGB, Display-P3, Rec.2020 — son conjuntos de colores producibles: lo que una pantalla dada puede mostrar físicamente. Los sistemas de coordenadas — HSL, LAB, OKLCH — son maneras de referirse a los colores con números, independientes de cualquier pantalla. En sentido amplio, un espacio de color es cualquier sistema organizado para representar el color; la habilidad práctica está en reconocer a cuál de los dos tipos se refiere un nombre determinado.

Este artículo es el mapa de orientación: los dos tipos, cómo se combinan y qué emparejamiento encaja con cada trabajo. Pertenece a nuestra guía de OKLCH, que cubre en profundidad el lado de los sistemas de coordenadas.

¿Qué es una gama?

Una gama es el conjunto de colores que un dispositivo o un estándar puede reproducir. Los tres nombres con los que te toparás más a menudo forman anillos anidados:

• sRGB — la base, estandarizada a mediados de los años noventa y todavía la suposición segura para la web: prácticamente toda pantalla en uso puede mostrarla por completo.
• Display-P3 — aproximadamente un 25 % más grande, con los colores extra concentrados en los tonos medios saturados: rojos, verdes y turquesas vivos. Estándar en los iPhones desde 2016 y en los Mac casi desde hace lo mismo; la mayoría de los móviles actuales y muchos portátiles vienen con paneles compatibles con P3.
• Rec.2020 — la especificación de emisión para vídeo de ultra alta definición, todavía más amplia. Es más un objetivo que una realidad presente: las pantallas de consumo de hoy cubren solo una parte de ella.

Cada anillo contiene al anterior, así que un color que es seguro en sRGB es seguro en todas partes, mientras que los colores P3 más vivos no tienen equivalente alguno en sRGB. Una gama responde exactamente a una pregunta — ¿puede este hardware producir este color? — y no dice nada sobre cómo deberías nombrar, comparar o manipular los colores. Ese es el trabajo del otro tipo.

¿Qué es un modelo de color?

Un modelo de color — un sistema de coordenadas — es un esquema para referirse a los colores con números:

• HSL reorganiza los valores RGB en un cilindro de tono/saturación/luminosidad. Cómodo de leer, pero su “luminosidad” es una fracción geométrica del RGB, no una afirmación sobre la percepción.
• LAB (CIELAB) se construyó para la medición perceptual y sigue siendo la columna vertebral de los flujos de trabajo de impresión y gestión del color.
• OKLCH (la forma cilíndrica de OKLab) es el modelo perceptual moderno: los colores con la misma L se ven genuinamente igual de claros, y por eso las funciones de color más nuevas de CSS y las herramientas se han estandarizado en él.

La propiedad crucial es lo que un modelo no es: no está atado a una gama. Un sistema de coordenadas puede referirse a todos los colores visibles y algunos más; una gama es una región dentro de ese espacio. Puedes describir un color sRGB en OKLCH, y un color exclusivo de P3 en OKLCH, con los mismos tres números significando las mismas cosas. (HSL es la excepción que confirma la regla — está definido sobre valores sRGB, que es una de las razones por las que no puede alcanzar colores de gama amplia.)

¿Debería usar P3 u OKLCH?

La pregunta compara cosas de categorías distintas — como preguntar si viajar en pasaporte o en avión. P3 es una gama; OKLCH es un sistema de coordenadas. No eliges entre ellos: eliges uno de cada, y cualquier combinación es coherente.

Una analogía útil — y no es más que una analogía — es la lengua hablada. El sistema de coordenadas es el idioma en el que describes los colores; la gama es el vocabulario que una pantalla concreta puede pronunciar. Una pantalla sRGB y una pantalla P3 hablan el mismo OKLCH, solo que una tiene más palabras disponibles. “¿P3 u OKLCH?” se disuelve en dos preguntas independientes con respuestas claras: ¿en qué idioma debería pensar? (uno perceptual, porque los juicios de diseño — “el mismo color, más claro”, “igual de vivo entre tonos” — son juicios perceptuales, y quieres palabras que encajen con ellos) y ¿a qué vocabulario debería apuntar? (sRGB como el suelo que todos pueden renderizar, P3 como mejora donde las pantallas lo permitan).

¿Cómo se ve el mismo color en distintas notaciones?

Toma el azul #2563eb. Cada fila de esta tabla nombra el mismo punto en el espacio de color:

Cuatro notaciones, un color. Ahora empuja el croma de 0,215 a 0,26, manteniendo la luminosidad y el tono. A esta luminosidad y este tono el techo de sRGB es ≈0,251, así que el nuevo color ha salido de sRGB — pero el techo de P3 aquí es ≈0,269, así que sigue siendo producible en una pantalla P3. Observa cómo divergen las notaciones:

• OKLCH aún lo nombra con exactitud: oklch(0.546 0.26 262.9). Al idioma no le importa que algunas pantallas no puedan pronunciarlo.
• La notación P3 aún puede producirlo: ≈ color(display-p3 0.154 0.345 0.981).
• Hex no tiene código para él. El valor sRGB más cercano, ≈ #0b59ff, es un color próximo pero diferente — un poco más oscuro y más apagado que lo que se pedía.

Dos notaciones siguen al color más allá de la valla; una se detiene en ella. Esa única observación es la distinción gama/modelo en su forma práctica.

Abre este azul en Scale Composer — la misma semilla generada como una escala completa contra la base sRGB, con las coordenadas oklch() de cada paso y su valor hex uno junto al otro.

¿Qué espacio de color debería usar para cada trabajo?

Uno de cada tipo, elegido por trabajo:

Para el trabajo de interfaz, genera y razona en OKLCH, entrega valores que se rendericen con seguridad en sRGB, y superpón color(display-p3 …) allí donde merezca la pena — acentos y color de marca, sobre todo. Para las imágenes, el color viaja dentro del archivo; el trabajo es un etiquetado de perfil correcto más que una cuestión de notación. Para la impresión, el papel es una gama completamente distinta, y LAB ha servido durante mucho tiempo como el idioma neutral entre pantalla e imprenta.

Observa cómo los dos tipos se mueven de forma independiente

La prueba más limpia de que gama y modelo son cosas separadas es cambiar uno mientras el otro se mantiene quieto: cambia la misma paleta a Display-P3. El sistema de coordenadas no se mueve — L, C y H siguen siendo la lectura — mientras el vocabulario crece: los pasos de tono medio adoptan un croma para el que sRGB no tenía palabras, cada paso lleva ahora una cadena color(display-p3 …), y la columna hex se queda fijada en la valla de sRGB. El mismo idioma, un vocabulario más grande, y nada en la lógica de la paleta tuvo que cambiar.