Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Color Theory

Teoría del Color Avanzada: ¿Qué es la Gestión del Color?

by
Length:LongLanguages:

Spanish (Español) translation by Cristian Marroquin (you can also view the original English article)

Un diseñador se siente a la par mía, mirando a la paleta en su software la paleta de artes. "Falta algo...Estoy seguro que tiene que haber otro color que no puedo ver que se reproduce..."

No, respondí devuelta y presumidamente expliqué, "Todos recuerdan en la escuela como funcionan los ojos—los conos de tus ojos detectan rojo, verde y azul claro, y los colores son combinaciones de estos. Tienes rojo, verde y azul en la pantalla y puedes mezclarlos para colores más claros, y eso es, todos los colores."

Un momento más tarde me di cuenta que estaba equivocado. Es un poco más complejo que eso, y este artículo lo explicará.

En este artículo, veremos los modelos de colores, cómo el color puede ser dividido en partes y descritos. Luego nos moveremos a los espacios de colores, el primo preciso de los modelos de colores, definiendo exactamente qué color estamos describiendo. Aquí veremos el porqué hay ciertos colores que no puedes reproducir en tu software. Finalmente, veremos a la gestión de color, el proceso es que debes asegurarte de ver los colores correctos a través del diseño del trabajo.

1. ¿Cómo Podemos Describir un Color?

¿Qué es un Modelo de Color?

Así que si tienes un buen antecedente, puedes estar riendote por mi mundo simplista de rojo, verde y azul—todos saben que los colores se forman por la combinación de cian, magenta, amarillo y negro. Pero los dos son equitativamente válidos—son modelos de colores diferentes, métodos para dividir los colores en componentes para representar numéricamente un color.

Asumo que muchos diseñadores deben estar familiarizados con los modelos de colores RGB y CMYK. Si lo estás, siéntete libre de saltar hasta la sección media para más modelos raros como el HSV y el modelo del Espacio de Color Lab.

¿Qué es un Modelo de Color RBG?

Nuestro primer ejemplo será el Modelo de Color RBG. Este modelo, a veces descrito como Modelo de Color Aditivo, describe cómo la luz coloreada se combina para hacer colores. Imaginas que estás en un salón oscuro con una lampara rojo, verde y azul tenue, y que ajustando el brillo de cada una puedes iluminar el cuarto con cualquier color, mezclando su luz. Si todas las lamparas están apagadas, obtienes negro—está oscuro. Si mezclas rojo y verde de igual manera, el cuarto parecerá amarillo, y luego a medida que enciendes la lampara azul, el cuarto se hará blanco.

¿Porqué rojo, verde y azul? Puedes recordar las lecciones de ciencia en la escuela acerca del espectro de luz, descrito como frecuencias, variando desde rojos a través de los colores del arco iris en azules y morados. Desde un punto de vista científico, la luz puede ser una mezcla de cualquiera de estos monocromos, luz de una sola frecuencia.

Sin embargo, tenemos celdas sensibles a la luz llamados conos en la retina de nuestros ojos para detectar la cantidad de luz en las areas rojas, verdes y azules. Por esto, amarillo claro monocromático "verdadero", que se encuentra entre rojo y verde en el espectro, es indistinguible de la mezcla de rojo y verde claro monocromático.

Desde un punto de vista de diseño, ya que no podemos percibir la diferencia, simplemente no importa, así que podemos abstraer cualquier color que veamos como una mezcla de rojo, verde y azul.

Spectrum of Monochromatic colors
Espectro de Colores Monocromáticos

Debido a este hecho, muchos dispositivos, como monitores, Televisiones, y luces LED, reproducen luz con rojo, verde y azul emitiendo fuentes de luz. Similarmente, dispositivos de capturas de luz, como las cámaras o escáner, imitan el ojo humano con sensores de estos tres colores.

En el mundo digital, Rojo, Verde y Azul son a menudamente descritos como números entre 0 a 255. ¿Porqué 255? Puedes culpar a los programadores por eso—es debido a que ellos está almacenado en valores de "8-bits" que puede almacenar 256 valores diferentes. Puedes culparlos incluso más si tienes que lidiar con sitios web y ¡Números hexadecimales como #FF4E3A!

Red Green Blue Additive Color Model
Modelo de Color Aditivo Rojo, Verde Azul

¿Qué es el Modelo CMYK?

Así que ¿Porqué describir los colores de otra manera? Bueno, el mundo de las impresiones es un buen ejemplo. No queremos describir la luz emitida de nuestros medio impresos; queremos describir los pigmentos de color en la tinta para ponerlo en un pedazo de papel para obtener luz emitida de ese color. Seguramente solo es rojo, verde y azul otra vez. ¿Verdad? Si has impreso antes, sabrás que no es el caso.

Nuestros colores primario en el mundo de la impresión son los pigmentos Cian, Magenta y Amarillo, y añadiendo dos de estos en un papel blanco, obtenemos Rojo, Verde y Azul. Añadiendo el tercero, obtenemos un café lodoso, pero añadiendo el cuarto pigmento negro, podemos mezclarlos para obtener todos los colores. Este modelo de color añade colores para obtener los más oscuros, de modo que a veces ser llamado el modelo sustractivo, pero más común como el modelo de color CMYK. Típicamente verás la proporción de cada pigmento representado digitalmente como un número de entre 0 a 100.

Cyan Magenta Yellow and Black color system
Mezcla sustractiva de Cian, Magenta y Amarillo pueden producir muchos colores, y la adición de negro (derecha) pueden producir muchos más.

Para una explicación visual de los modelos RBG y CMYK, mira el video de Kirk Nelson.

¿Qué el Modelo de Color HSB/HSV/HSL?

Pero hay otros modelos de colores. Si ves la paleta de colores en Adobe Photoshop CC, o vas hacia colorizer.org, verás el modelo de color de HSB.

Este modelo representa en color como una combinación de Tono, Saturación y Brillo, igualando cuantas personas tienden a pensar de los colores.

Saturación dicta que tan vivo es el color: un color 100% saturado sería vivo y audaz, un color 50% saturado un pastel sutil, y un color no saturado sería una escala de grises.

Brillo (a veces se llama Valor y por lo tanto el nombre del modelo de color HSV) puede ser considerado como una cantidad de negro en el color 0% de brillo siendo negro del todo, 100% siendo ya sea blando el color dependiendo de la saturación.

Finalmente, el Todo dicta el color del color monocromo del que estamos hablando, el color como lo conocemos de un arco iris: rojo, amarillo, verde, morado, etc. Tono es descrito como un número entre 0 a 360, esencial mente un angulo de una rueda de colores.

Mientras tiene su lugar, he encontrado desarmado que si la saturación es 0%, el tono puede ser de cualquier valor y aun representa el mismo color (una escala de gris), y peor, si Brillo es 0% ni Saturación ni Tono, con cualquier valor siempre es negro.

El modelo de color HSL comparte la definición de Tono, pero añade un concepto de Luminosidad, teniendo negro y blanco como sus extensiones, un color vivo en el medio, y una saturación sutil diferente.

HSB and HSV color models
Modelos de Color HSB y HSV

¿Qué el Modelo de Espacio de Color Lab?

El modelo de color final ofrecido por la paleta de colores de Photoshop es el Espacio de Color Lab, que es un poco menos intuitivo pero más aproximado a la manera que la visión humana funciona.

"Pero Espera", te oigo decir, "Me dijiste que el ojo humano percibe rojo, verde y azul". Lo cual es verdad, es llamado el Modelo Tricromático de la Visión, y mientras describe cómo el cono en el ojo funciona, no describe con precisión el sistema visual del todo.

Este sistema es mejor descrito por el Modelo Oponente de Visión, que sugiere que el sistema visual es conectado para detectar diferencias entre conos más que valores actuales de los que pueden percibir. El sistema mira diferentes tipos de combinaciones, Verde y Rojo, Azul y Amarillo, y Luz y Oscuridad.

Imitando esta dimensión a & b de Lab describe Oponencia de Colores,la dimensión a describe rojo/verde, y la dimensión b describe azul/amarillo. La tercera dimensión, L para Luminosidad, es similar a la definición de HSL, pero con dos diferencias principales. Mientras el otro modelo está basado en la intensidad de luz, Lab está basado en la percepción humana de esta intensidad. El resultado de esto es que la duplicación de la luminosidad parece ser realmente un doble; esto mismo no aplica para los sistemas anteriores.

Separando la percepción humana de luminosidad de las hojas de color de las dimensiones a & B como medidas de cromaticidad, brillo independiente del color. Esto es importante, ya que algunos colores parecen más oscuros o más claros, a pesar de ser de la misma intensidad. Por ejemplo, vemos un amarillo saturado más brillante que al azul saturado. Todos estos cambios resultan en un modelo de color uniforme perceptivo.

En cuanto a rangos se refiere, L es medido de 0 (negro) a 100 (luz), a desde -120 (rojo) a +120 (verde), y b de +120 (amarillo) a -120 (azul).

LAB Color Model
El modelo de color Lab - Kirk Nelson

Ya que esto puede ser difícil de entender solo leyendo, recomiendo una visita rápida de otro video de Kirk Nelson.

Trayendo la percepción en estas cosas ayuda a los investigadores de la visión humana, pero ¿Cómo ayuda a los diseñadores?

Es la uniformidad perceptual lo que importa. Por ejemplo, el brillo independiente de las dimensiones cromáticas puede ser útil. Puedes, por ejemplo, retocar las curvas en estas dimensionas para añadir un poco más de azul sin cambiar el brillo percibido de la imagen.

¿Hay Otros Modelos de Colores?

¿Se pueden dividir los colores de otra manera? ¡Por supuesto! Tomando la descripción perceptual independiente del brillo de el modelo Lab ¿Qué si dividimos la cromaticidad a Tono y Saturación como en HSV? Tendríamos el Sistema Munsell, aunque llama a  la saturación "Croma" y luminosidad "Valor" y tiende ser usado para investigaciones del suelo, más que diseño.

El vínculo que di antes, colorizer.org, es una manera fantástica de entender estos sistemas, ofreciendo variaciones de todas las dimensiones de los sistemas diferentes. Verás algunos modelos de color como YPbPR y XYZ. Estos son modelos más especialistas, menos útiles para el diseñador, pero útiles para los desarrolladores de codec de video  para exprimir un poco más de color al ancho de banda.

Moviéndonos de lo digital, sistemas como Pantone podría ser descrito como sistemas de colores, siendo una manera estandarizada de abstraer colores, permitiendo dos diseñadores remotos con el misma muestra de tela saber que están pensando en el mismo Rosado azuleado o caliente.

Si nos movemos del ojo humano, viendo a la percepción de color animal, las cámaras infrarrojas o inclusos los satélites de datos, repentinamente tenemos sensibilidades a las frecuencias rojas, verdes y azules. Entonces nos movemos a otra area de imágenes de color falso para hacer los colores que no se ven visibles.

False color imagery from NASA
Imagen de color falso de la NASA

2. ¿Cómo Podemos Describir un Color Precisamente?

Volviendo al diseño de día en día, es cuando nos movemos entre estos modelos de colores el porqué estaba evidentemente equivocado. Quizás has experimentado el dolor de perfeccionar una pieza de video con las sombras correctas que quieres, solo para darte cuenta, en la impresión, de que han sido reproducidos de maneras diferentes.

Si un documento usa 100% Rojo o 100% Cian, ¿De qué proporción es? Dada no otra pista, será 100% de lo que el dispositivo puede dar, un píxel rojo completamente brillante o una ubierta de tinta Cian. Hay dos problemas con esto: las capacidades de los dispositivos difieren, así que el rojo aparecerá diferente entre monitores, y luego, ¿cómo nos movemos entre modelos de colores mientras se representan los colores con precisión?

Para hacer esto precisamente, se requiere una Gestión de Color. Describiré esto en la sección 3, pero primero necesitamos entender los espacios de colores, modelos de colores más precisos.

¿Qué es un Espacio de Color?

Espaciado de Color precisamente especifica un mapeo desde la descripción de un color a cómo debería ser reproducido. Este espaciado de color especifica exactamente cómo los colores del componente deben ser representados, precisamente cómo una mezcla de estos primarios debe aparecer, y a qué brillo real y valor dado debería brillar en pantalla completa.

El movimiento de el espacio de color funciona para cualquier modelo. Pantone, que mencioné antes, es realmente mejor descrito como un Espacio de Color ya que describe colores precisos. Hay espacios de colores comunes para RGB y CYMK, pero primero miraremos al Lab para saber un poco más de este concepto.

Espacios de Color CIE LAB y XYZ

Exactamente lo que las dimensiones L, a & b del modelo Lab mide, depende del color de Lab al cual se refiere. El espaciado de color Lab inicial viene de Richard S. Hunter en 1948, pero la Comisión International de Iluminación (CIE) gradualmente mejoró las definiciones exactas para los valores de Lab para mejorar la aproximación de la percepción humana en las definiciones CIE de 1976, CIE 1994 y CIE 2000. Técnicamente, las dimensiones CIE deben ser referidas como L*, a* y b* ya que son definidas de diferente maneras para las dimensiones de Hunter en 1948, pero he seguido el uso de Lab en Photoshop.

Cada uno de estos sistemas está basado y definido en valores XYZ de anteriores espacios de color CIE 1932 XYZ. A menos que estés interesado en el sistema visual humano, los detalles de estos son inmateriales, excepto por el hecho de que X & Y son medidas de cromaticidad, y podemos ignorar la luminosidad para mapear todos los colores en una escala XY; esto tiene el término de un diagrama de cromaticidad. En el diagrama de cromaticidad mostrado abajo, la forma de curva en arco es el rango de colores que la visión humana puede ver (cromaticidades, realmente, ya que no tenemos luminosidad). Donde este diagrama se hace útil es para comparar los rangos de espacios de colores diferentes.

Chromaticity Diagram showing CIE 1931 xy color space
Diagrama de cromaticidad mostrando el rango de la Visión Humana dentro del espacio de color xy de 1931

¿Qué es una Gama de Colores?

El rango de un espacio de color es descrito como su gama. Puedes encontrar espacio de colores y la gama de colores usados mas o menos intercambiables, pero la mejor manera de entender la diferencia es ver al diagrama de cromaticidad de 1931 arriba. El área de color es el espacio de color de la visión humana, y la linea gruesa notada en las extensiones es la gama de colores de la visión humana.

Espacio de Color sRBG

La gama de colores son útiles cuando se describen los espacios de colores. Echemos un vistazo a sRBG para demostrar esto. Si eres valiente, puedes echar un vistazo a las especificaciones de color de espacio del sRBG. El espacio de color sRBG puede ser considerado como modelo de espacio de color por defecto. Casi todos los dispositivos de muestra y captura que funcionan con el modelo de color RBG son compatibles con sRBG como mínimo.

Echa un vistazo al diagrama de cromaticidad abajo—el triangulo muestra la gama de sRBG en comparación de la Visión Humana (CIE1931). Como se puede ver, mucho de la area de adentro de la gama de la Visión Humana está afuera de la gama del espacio de color sRBG. Esencialmente, estos son colores que podemos ver pero que no pueden ser representados dentro del espacio de color sRBG, y tales colores son referidos como Fuera de la Gama para el color de espacio sRBH. El hecho de que mucha de la visión humana está fuera del espacio de color sRBG explica el porqué es un mínimo, y tiende a ser considerado como espacio de color gama estrecha.

Chromaticity Diagram showing CIE 1931 xy color space and sRGB color space
Diagrama de cromaticidad mostrando el espacio de color sRBG comparado con la Visión Humana (CIE 1931)

¿Haz identificado la licencia artística que he tomado con los diagramas de cromaticidad? Si tu monitor solo muestra sRBG, ¿porqué no están todos lo colores en triangulo sRBG? y ¿Cómo puedes ver los colores fuera?

En realidad, los colores que están al lado del borde del arco del diagrama son colores monocromáticos puros; las tres esquinas del triangulo sRBG serán el mejor verde, azul y rojo que el monitor puede reproducir. Solo amplié el rango de colores sobre el rango de la visión humana para mejorar la ilustración del rango.

Espacio de colores RBG de Adobe & ProPhoto

¿Qué si queremos un color fuera del espacio sRBG pero aun en el modelo RBG? Necesitamos una gama RBG más amplia.

Hay muchos, pero veremos a los dos mayores. Primeramente, está el espacio de color RBG de Adobe, introducido en 1998, que como puedes ver abajo, permite una mejor representación de verdes sobre sRBG.

Luego, RBG de ProPhoto de Kodak, también conocido como ROMM RBG, ofrece un vasto espacio de colores. De hecho, hay espacios dentro de la gama RBG ProPhoto que están fuera de la gama para CIE 1931, sugiriendo que, ¡Azules y verdes profundamente saturado en este espacio de color representan colores que el ojo humano no puede ver!

Adobe ProPhoto RGB Color Spaces

Perfiles ICC

OK, entonces ¿Qué espacio de color RBG usa mi cámara/monitor/escáner? ¡Ninguno! Mientras están cerca de ser un espacio de color estándar, cada modelo de un dispositivo tendrá su propio espacio de color.

Por este hecho, el Consorcio Internacional de Color hizo el perfil ICC, una manera de definir y compartir espacios de color específicos para dispositivos. Tal espacio puede estar disponible desde el fabricante, o puede generarlo como se describe en la sección 3.

Espacio de Color CMYK

Moviéndonos del modelo de color RBG, veamos al espacio de color CMYK. Esto es más complejo debido a que requiere información no solo acerca de la tinta, pero también el papel y otros detalles de impresión. Echa un vistazo a esta guía para ver el rango de perfiles disponibles. Tomaremos el espacio de color SWOP.

El espacio irregular hexagonal es la gama para SWOP, y me he movido a la gama triangular de nuevo para que las podamos comparar. Obtenemos algunos de la gama de colores para cada espacio de color en relación a la otra, así que la implicación es que no podemos movernos trivialmente entre CMYK y RBG—Necesitamos gestionar el color.

CMYK Color Spaces

3. ¿Qué es la Gestión del Color?

Ahora que entiendes los espacios de color (eso espero), ¿Cómo realmente los usas? Administrando los colores.

Gestión del Color es una cadena de sistemas para administrar el color a través del fluido de trabajo de un medio. Incluye:

  • la administración espacio de color en archivos de media
  • la conversión entre espacios de color
  • la caracterización y calibración de dispositivos para mostrar (o capturar) precisamente en un espacio de color

Caracterización/Calibración de Dispositivos

El primer paso es asegurar de que vemos los colores apropiadamente en nuestros dispositivos. Como hemos dicho, los dispositivos tendrán su propio espacio de color, referido como perfil ICC. Este perfil puede estar disponible desde el fabricante pero para ser preciso es mejor generarlo por propia cuenta, ya que los dispositivos pueden diferir debido a la tolerancia de los fabricantes y condiciones ambientales.

Caracterización es el proceso de medir las capacidades de un dispositivo. Es logrado por Colorimetría, midiendo la apariencia de colores como se perciben por las personas, con una colorimetría.

Un paso adelante es tomar la caracterización y retoque de la reproducción de un dispositivo para una representación de color más verdadera;  este término es Calibración. Típicamente, la pantalla de la colorimetría vendrá con un software para calibrar una pantalla y hacer una caracterización final para general el perfil ICC.

He vinculado algunos tutoriales debajo de esto. Jordan Merrick corre a través del proceso para ambas técnicas en una pantalla Mac, Daniel Sone muestra el uso de otra colorimetría barata para la calibración, y Jefrrey Opp muestra el proceso de caracterización de una cámara.

Administrar los Espacios de Color

Ahora entendemos lo que un espacio de color es, pero ¿Cómo elegimos el correcto para un documento? Típicamente estamos limitado a una parte de el dispositivo que estamos usando, y dispositivo media o captura, en términos de fotografía y escaneo, dictará el modelo del color en uso. ¿Así que simplemente usamos el espacio de color con la gama más larga disponible? Eso a veces es el mejor enfoque, y ciertamente no queremos restringirnos innecesariamente, pero hay algunas desventajas de las cuales estar conscientes.

Primero se consciente del espacio de color final en tu proceso, impresión o pantalla. Como sea posible usa una gama amplia para capturas y documentos intermediarios, ya que da más datos con los cuales trabajar, pero busca terminar con los colores dentro de la gama del espacio de color final. Por lo menos, descubrir lo que ese espacio de color es y convertirlo uno mismo como el paso final. Esto te permitirá ver si el recorte del espacio de color resultará en cualquier color extraño.

Una desventaja potencial es que cuando es representada digitalmente, estamos asignando un número a las dimensiones del modelo de color, y cada uno de estos números tiene profundidad de bit, esencialmente el número de subdivisiones de intensidad para cada color primario.

Típicamente esto será 8 o 16 bits, representando 256 y 65536 valores posibles para Rojo, Verde y Azul. Así que obviamente queremos más profundidad de bit para representar más colores, pero a veces estaremos limitados por profundidades de bit más bajas (quizás por el tamaño del archivo resultante).

En este caso, una gama más larga hace espacio a las subdivisiones más aparte, lo que significa que los colores saturados gastados son realmente bits útiles de datos, en lo peor resultando en bandeado. Si tienes una profundidad limitada de bit, escoge tu espacio de color para que coincida con lo que tratas de representar en el documento.

Conversión entre Espacios de Colores

Amablemente, la Gestión del Color lidia con la parte matemática de mover entre espacios de colores para nosotros. La interacción real que el diseñador tiene con esta es selección de el mapeo para lidear con el cambio de la gama y la distribución de colores entre espacios de colores; este término se llama Propuestas de Visualización.

Colorimétrico Relativo busca mapear el color precisamente que puede ser representado en ambos espacios de colores, y representa colores de la gama como los más cercanos disponibles. Asumiendo que muchos de los colores en el documento están en el espacio compartido de ambas gamas, esto tiende a parecer más similares al ojo humano, lo que es muy útil para la fotografía. La gran desventaja es que cualquier color fuera la gama son "cortados" al color más cercano, y por lo tanto la información se pierde.

Una propuesta Perceptual, al contrario, aplastar todos los colores de la fuente del espacio de color para que se adecue al espacio de color resultante. Esto cambia la manera en que los colores se ven, pero la información no se pierde. Nada se pierde, pero los grandes cambios en color y brillo pueden ocurrir.

Una noción que he comentado hasta ahora es el punto blanco en un espacio de color, lo que describe la locación del blanco puro disponible; esto difiere de espacio de color a espacio de color. La propuesta Colorimétrica Relativa trata de mantener el punto blanco a través del mapeo, distorsionando los colores para lograrlo, pero una propuesta colorimétrica absoluta no lo hace. Esto puede cambiar el balance de blanco general de una imagen, lo cual no es bueno para la fotografía, pero es útil en envasado y marcado ya que reproduce el color exacto con precisión.

Saturación puede ser útil para moverse a gamas más grandes, ya que mantiene saturación relativa. Esto hará la fotografía más viva, pero útil para envase e infogramas.

Eso Suena como Trabajo Pesado—¿Debería Molestarme del Todo?

La respuesta depende en lo que estás diseñando. Si trabajas con resultados impresos, si. Si tu trabajo todo es digital, quizás para la web, puedes trabajar con sRBG, pero argumentaría que debes saber al menos de estos temas. Si debes calibrar es un problema de consenso, como se describe en la discusión de Thomas Cannon ¿Es la Calibración de Color Necesaria para Diseño Web?

Si capturas imágenes del mundo real (escáner y cámaras) o poner imágenes en el mundo real (impresoras), dbes saber esto, y recomendaría que leas un poco más sobre cómo tu dispositivo y software en particular lidian con los espacios y gestión de colores.

De igual manera, solo se consciente de que si, hay colores que no están en tu paleta en tu herramienta de colores digital de trabajo. Y no menciones tintas metálicas. ¡Eso es la otra punta de un iceberg!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.