Estudio sobre el diseño de GUIs (II): El color

Continuación del Estudio sobre el diseño de GUIs (I): El ojo humano, donde ahondaremos en las peculiaridades referentes a el color


2.- El color

2.1.- El espacio de color

Una gráfica de la Commission Internationale d’Eclairage (CIE) define un espacio de color estandarizado, ésta es una herramienta muy útil a la hora de especificar colores. Representa la saturación y el tono en un gráfico bidimensional. Los tonos totalmente saturados se encuentran en el límite exterior y los colores no saturados ocupan el centro del gráfico. Esta gráfica X-Y CIE fue revisada más tarde para reflejar mejor la percepción humana del color.

CIE

A pesar de que la gráfica CIE es una herramienta muy útil, el espacio de color que ella define no ofrece un modelo intuitivo para nuestro sistema de visión en color o los utensilios que usamos para reproducir color. El siguiente diagrama es una representación aproximada de la gráfica CIE.

cubo

Dado que nuestro sistema de visión en color usa tres diferentes fotorreceptores para detectar el espectro visual, el espacio de color debería ser inherentemente tridimensional. Podemos ver más fácilmente este espacio de color como un cubo. Un vértice representaría la excitación nula de los tres tipos de fotorreceptores, es decir, el negro. Tres vectores partirían desde este punto en las tres direcciones indicando la excitación Rho (red), Gamma (green) y Beta (blue). El color blanco estaría en el vértice opuesto al punto cero o color negro; en los vértices contiguos a el negro estarían los colores rojo, verde y azul, y en los siguientes las combinaciones de estos colores entre sí. Esta es la visualización del espacio de color definido por los vectores de estimulo de fotorreceptores rojo, verde y azul.

cubo

Existe una línea que conecta las esquinas del cubo desde el negro al blanco, esta es la línea del gradiente neutral.

También hay líneas conectando cada uno de los colores primarios con sus correspondientes colores secundarios, estas son las líneas de los gradientes primario-secundario.

cubo

Existe un plano triangular conectando cada uno de los colores primarios. Todos los colores totalmente saturados se encuentran en la superficie del cubo.

cubo

También existe un plano triangular que conecta cada color secundario. Este plano atraviesa el gradiente neutral en un punto más cercano al blanco que al negro, y el plano anterior lo cortaba en un punto más cercano al negro que al blanco. Generalmente en las imágenes en blanco y negro percibimos los colores primarios más oscuros que los secundarios. Así, aunque el cubo RGB puede ser quizá un poco más complejo de visualizar y entender, es un muy buen modelo para obtener una comprensión mejor del color.

cubo

Cada uno de los colores primarios y secundarios tienen sus propios caminos desde el negro hasta el blanco. Los vectores Rho, Gamma y Beta se suman vectorialmente para ir desde un punto a otro, así, por ejemplo, para moverse desde la esquina roja a la blanca, se necesitan los vectores Gamma y Beta además del Rho.

cubo

Los colores secundarios se mueven desde el negro hasta el blanco de manera opuesta a los colores primarios. El movimiento desde el negro a los colores saturados (cambio de dos variables) se produce mediante una diagonal en el plano de la superficie del cubo. Para moverse desde los colores saturados al blanco (cambio de una variable) se atraviesa una arista. El límite externo de los colores totalmente saturados de la gráfica CIE corresponde a un camino al rededor de la superficie del cubo de color.

cubo
cubo

El cubo de color definido en función de los vectores de sensibilidad se aplica igualmente bien a muchos de los sistemas que utilizamos para almacenar y reproducir color porque ellos son también sistemas de combinación de tres colores. En la imagen de abajo podemos ver la representación para un valor RGB de 24 bits en un ordenador. Las tres componentes del color se visualizan fácilmente en esta representación, no hay una visión equivalentemente intuitiva de los valores RGB en la gráfica CIE. Así, el cubo RGB es una útil aproximación para entender cómo percibimos el color.

2.2.- Sensibilidad espectral de los tubos de rayos catódicos

Los tubos de rayos catódicos (CRTs) usados en los monitores de ordenador y televisores usan un sistema de reproducción de color llamado “RGB additive”. Los compuestos de fósforo de dentro del CRT son excitados cuando los electrones son directamente dirigidos hacia ellos. Si se observa la pantalla de un CRT con una lente de 8 a 10 aumentos se pueden observar los puntos individuales de fósforo rojo, verde y azul. El gráfico muestra la sensibilidad espectral de los fósforos de los CRTs de color.

espectros

2.3.- El espacio de color de los Web Browsers

web browsers

Un web browser operando en un modo de 8-bit usas un espacio de color que es una buena representación del cubo RGB para representar imágenes en color en nuestro display. Netscape Navigator usa un cubo de 6 por 6 por 6 con un incremento de color entre cada paso de 51 (33h). He aquí una representación de ese cubo RGB, los vectores Rho, Gamma y Beta se encuentran a lo largo de los tres bordes del cubo que dejan la esquina negra.

Esta también es una buena representación del espacio de color de un CRT en incrementos de 51/255 de sus niveles de salida de fósforo rojo, verde y azul.

2.4.- El color y sus significados

En principio, los colores cálidos (rojo, amarillo, naranja) provocan sensaciones de acción, intervención o respuesta a un requerimiento y cercanía en el espacio. Por el contrario, los colores fríos (verde, azul, violeta) consiguen crear asociaciones con situaciones más estáticas y dimensiones más lejanas.

En el siguiente cuadro podemos apreciar las relaciones que tradicionalmente se establecen entre los colores más comunes y ciertas actitudes mentales.

colores

Asociaciones mentales de los colores

Los colores primarios son el rojo, el amarillo y el azul. No pueden ser obtenidos por mezcla de otros colores. El rojo es el color del fuego y de la sangre. Excita, es afrodisíaco, pero invita también a la violencia. El amarillo es el color del sol y del oro. Es un color alegre, imagen de la iluminación y la pureza. El azul es el color del cielo y del aire. Sugiere imaginación, libertad, evasión y sueño.

Los colores secundarios son el naranja, el verde y el violeta. El naranja (rojo + amarillo) posee las connotaciones propias del fuego y el oro, características de sus colores primarios originales. El verde (azul + amarillo) es el color dominante en la naturaleza. Evoca las plantas, la humedad, el reposo y la pasividad. El violeta (rojo + azul) es el color rojo, color de la vida, “apagado” por el azul del cielo.

Existen también el negro y el blanco, que van a permitir matizar los colores anteriores, y a su vez contribuyen a crear otros nuevos, llamados terciarios. El blanco es el color de la luz, de lo espiritual y elevado. El negro es la profundidad, la oscuridad. El gris es la mezcla, ni blanco ni negro. Indica equilibrio, tibieza. Pero también se puede asociar a las sombras.

En nuestra vida cotidiana nos podemos encontrar con ejemplos que ilustran las asociaciones de este cuadro. Quizá el más característico sea el de un semáforo. Los colores rojo y amarillo reflejan una reacción más o menos inmediata por parte del individuo, y sin embargo el verde nos indica vía libre. En un hospital nunca se les ocurriría decorar sus quirófanos con colores cálidos, siempre veremos las paredes pintadas de azul o verde, en un intento de transmitir tranquilidad a los enfermos, o incluso de color blanco, que no produce relajación pero pasa desapercibido.

2.5.- Efectos visuales en la percepción del color

2.5.1.- La memoria visual

Es muy difícil, por no decir casi imposible recordar los diferentes colores. Esto confirma el importante hecho de que nuestra memoria visual es muy pobre en comparación con nuestra memoria auditiva. A menudo ésta es capaz de repetir una melodía que sólo se ha oído dos o tres veces.

La nomenclatura del color es muy insuficiente. Aunque hay innumerables colores -tonalidades y matices -, el vocabulario cotidiano sólo cuenta con una treintena de nombres para designarlos.

2.5.2.- La relatividad del color

Un color tiene muchos rostros y se puede hacer que un solo color aparezca como dos diferentes, dependiendo de los colores que lo acompañen.

Xs

2.5.3.- Intensidad luminosa

Casi todo el mundo es capaz de distinguir una nota más alta e una más baja, pero si esto se aplica al color, casi todo el mundo resultaría incompetente para su utilización correcta. A pesar de la cotidiana lectura de imágenes en blanco y negro, son muy pocas las personas capaces de distinguir entre una intensidad luminosa alta y otra baja.

2.5.4.- Imágenes persistentes

Las terminaciones nerviosas que hay en la retina humana (conos y bastones) están preparadas para recibir uno de los tres colores primarios que componen todos los colores.

El mirar fijamente al rojo fatigará las partes sensibles a ese color, por lo que con el paso repentino al blanco (integrado a su vez por rojo, amarillo y azul) solamente se dará la mezcla de amarillo y azul. Y esa mezcla es el verde, color complementario al rojo.

El hecho de que la persistencia de la imagen o contraste simultáneo (también llamado postimagen) sea un fenómeno psico-fisiológico demuestra que ni el ojo más entrenado está a salvo de la decepción cromática.

Xs

2.5.5.- La mezcla óptica: la persistencia de la imagen revisada. El efecto Bezold.

La mezcla óptica es un efecto en el que dos colores (o más), percibidos simultáneamente, se ven combinados y por ende fundidos en un color nuevo. En este proceso, los dos colores originales son primero anulados y hechos invisibles, y después reemplazados por un sustituto llamado mezcla óptica.

Los pintores impresionistas, por ejemplo, nunca presentaban un verde en sí. En lugar de aplicar pintura verde resultante de la mezcla mecánica de amarillo y azul, aplicaban amarillo y azul en puntitos sin mezclar, de manera que sólo se mezclaran en nuestra percepción. El que los puntitos fueran pequeños indica que este efecto depende del tamaño y de la distancia.

El efecto Bezold

Wilhelm von Bezold (1837-1907) descubrió que ciertos colores fuertes distribuidos de manera homogénea transformaban por completo el efecto de sus diseños de alfombras, que hacía para distraerse.

Bezold

En la imagen se ven ladrillos de color rojo claro unidos con mortero muy blanco, y luego los mismos ladrillos unidos con mortero negro puro. El rojo con blanco parece mucho más claro que el rojo con negro, sobre todo visto de lejos

2.5.6.- Color laminar y color volúmico

El color laminar es un efecto que aparece a modo de una lámina fina, transparente y traslúcida interpuesta entre el ojo y el objeto, independientemente del color superficial de éste. Así, por ejemplo, las paredes blancas de una casa con jardín en un día soleado aparecen teñidas de un verde brillante, que se refleja de la hierba del suelo.

El color volúmico es un efecto que existe y se percibe en los fluidos tridimensionales transparentes o traslúcidos. Un ejemplo sencillo consiste en comparar el color del mismo café en recipientes distintos, tales como la cafetera, la taza, un vaso… está claro que el marrón del café es el mismo en todos los casos, pero se percibe diferente por este efecto, que tiene en cuenta la cantidad de luz.

La ley de Weber-Fechner: la medida en la mezcla

Si pretendemos crear una escala de grises con una cartulina y tinta china, una medida bastante lógica (teniendo en cuenta el efecto de color volúmico) sería dividir dicha cartulina en bandas y aplicar primero una capa de tinta a todas, luego a todas menos la última, a todas menos las dos últimas… y así sucesivamente. La sorpresa es que el “aumento de profundidad” gradual que se prometía no aparece en una sucesión de escalones iguales.

percibir

La respuesta la descubrieron Wilheim Eduard Weber (1804-91) y Gustav Theodor Fechner (1801-87): la percepción visual de una progresión aritmética depende de una progresión física geométrica.

percepciones

2.5.7.- De la temperatura cromática a la humedad en el color

De las polaridades cromáticas las dos más generales son claro-oscuro y el contraste de temperaturas cálido-frío.

Al definir la ubicación de estos contrastes dentro de círculos cromáticos observaremos, además de su distribución desigual y de los llamados “neutrales” que los separan, que se traslapan ligeramente entre sí si comparamos un círculo con otro.

En cuanto a lo cálido y lo frío, se acepta en la tradición occidental que normalmente el azul parec e frío y que el grupo de adyacentes amarillo-anaranjado-rojo parece cálido. Como cualquier temperatura puede ser leída como más alta o más baja en comparación con otras, estas calificaciones son sólo relativas; por lo tanto es posible encontrar azules cálidos y rojos fríos dentro de sus respectivas tonalidades.

Pero cuando estos indicadores de temperatura, el rojo y el azul, se combinan con neutrales cromáticos como los blancos, negros y grises, y con sus mezclas, particularmente con aquellas en donde entran los neutrales de temperatura, verde y violeta, entonces es fácil que las interpretaciones personales de la temperatura resulten totalmente dispares.

percepciones

6 pensamientos en “Estudio sobre el diseño de GUIs (II): El color

  1. GASTON

    Es muy importante el poder saber como aplicar color y nitidez a un espacio que esta deslucido y sin vida.Soy de los que logra con el matizado de colores un especial y cautivante estilo de ver las cosas diferentes.me admiro cuando cambia un tono mezclandolos y fluye lo que uno desea.Desearia un cuadro de matices para poner color a un lugar muy especial. http://www.katuwira.com

    Responder
  2. Pingback: Estudio sobre el diseño de GUIs (III): La importancia del diseño « txipi:blog

  3. Pingback: Metsupedia » Vision Humana

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *