El color en la web (VII)
por Luciano Moreno, del departamento de diseño web de BJS Software.

El color y las emociones.-

Es bien sabido por los psicólogos la influencia emocional que desencadenan los colores en el espíritu humano. Se han desarrollado miles de estudios al respecto, sobre todo orientados en los tiempos modernos al uso del color para influenciar a las personas a comprar un determinado producto (poderoso caballero es don dinero). De estos estudios se desprende que las respuestas emocionales varían enormemente para cada color y para cada intensidad de un mismo color, así como para las diferentes combinaciones de colores que se pueden dar.

Normalmente cada color individual lleva asociado un conjunto de emociones y asociaciones de ideas que le es propio. Así, y por citar sólo unos cuantos colores, podríamos establecer los siguientes:

• rojo: entusiasmo, pasión, alarma, entusiasmo, agitación, fuerza, sexo, peligro, calor, fuego, sangre, caracter belicoso, intensidad. Asociado con los sentimientos enérgicos y con la excitación apasionada o erótica, y asociado a la ira, al enfado. Es el único color brillante de verdad y puro en su composición. El rojo puede ser atractivo y seductor como unos labios de mujer pintados o desencadenar asco o mareo, como cuando se contempla un charco de sangre. Puede ser usado para llamar la atención, para incitar una acción o para marcar los elementos más importantes de la página, pero cuando es usado en grán cantidad cansa la vista en exceso.
  
  
• amarillo: entusiasmo, pasión, fuerza, sexo, peligro, calor, primavera, inocencia, infancia. Es un color optimista, moderno. Es el símbolo de la deidad en muchas culturas y denota alegría. Si es muy brillante puede indicar peligro, y si es muy suave puede sugerir delicadeza. Un entorno amarillo medio o palido hace a la gente sentirse cómoda, caliente. Se ha asociado siempre el amarillo a la intelectualidad y al pensamiento claro y hay psicólogos que dicen que este color ayuda a memorizar datos a las personas. Pero hay que tener en cuenta que es el color que fatiga mas a la vista humana, pudiendo llegar a ser aplastante, porque causa una estimulación excesiva de los ojos, por lo que un entorno amarillo brillante causa sensación de irritabilidad en las personas.
  
  
• azul: verdad, dignidad, melancolía, tristeza, confianza, masculino, cielo, agua, sensualidad, comodidad. Si es muy palido puede inspirar frescura e incluso frío. Da sensación de elegancia, de frescura, cuando no es muy oscuro. Si es oscuro da sensación de espiritualidad. Es un color que influye sobre el apetito, disminuyendo este, seguramente porque no hay ningún alimento azul en la naturaleza, por lo que no es aconsejable su uso para una página sobre recetas de cocina o productos alimenticios. También puede expresar tristeza, pasividad, depresión.
  
  
• naranja: alegría, juventud, calor, verano. Es el color de la carne y del color amistoso del fuego del hogar. Es vibrante como la luz del sol, exótico como las frutas tropicales, jugoso como la naranja, sugiere informalidad en el trato, amistad, y destaca mucho sobre el entorno que le rodea.
  
  
• rosa: calma, debilidad, tranquilidad.
   
  
• verde: naturaleza, salud, dinero, frescura, crecimiento, abundancia, fertilidad, plantas, bosques. Se dice que es el color mas descansado para el hojo humano y que tiene poder de curación. Es un color contradictorio: a muchas personas les influye un caracter desagradable, mientras que a otras les sugiere mas pasión que el rojo.
  
  
• púrpura: abundancia, sofisticación, inteligencia, espiritualidad, dignidad. Puede evocar tranquilidad y puede evocar frivolidad y artificialidad. Aunque puede simbolizar la espiritualidad, el misterio, la aristocracia y la pasión, también puede simbolizar el luto, la muerte, la nausea, el orgullo y la pomposidad.
  
  
• viloeta: es el color de la fantasía, del juego, de la impulsividad y de los estados de sueño, aunque puede sugerir pesadillas o locura.
  
  
• marrón: sugiere edad, cosas viejas, madera, ladrillo.
  
  
• negro: elegancia, seducción, misterio, fuerza, mal.
  
  
• blanco: pureza, inocencia, limpieza, ligereza, juventud, suavidad.
  
  
• oro: prestigio, costoso, elegancia, religión.
  
  
• plata: prestigio, frío, ciencia, espacio.

Las gamas blanco-gris-negro son muy importantes para el diseñador, pués le permiten hacer distinción entre los elementos de la página sin usar verdaderos colores, ya que en realidad son "colores sin color".

Ni son todos los colores ni son todas las emociones, pero sí podemos ver en estos ejemplos cómo los colores influyen es nuestro espíritu, aunque hay que destacar que estas emociones asociadas corresponden a la cultura occidental, ya que en otras culturas los colores pueden expresar sentimientos totalmente opuestos a los arriba indicados (por ejemplo, en Japón el color blanco simboliza la muerte).

Las sensaciones que producen los colores dependen de factores culturales y ambientales, y muchas veces de los propios prejuicios del usuario. Ademas hay que sumar a esto que no todas las personas ven los colores de la misma forma, ya que hay personas que sólo pueden ver bien la gama azul / naranja, otras la roja / verde y otras degeneral a la gama blanco / negro. Incluso se perciben los colores de forma diferente con el ojo derecho que con el izquierdo.

Basándonos en estas consideraciones podríamos pensar que haga lo que haga el diseñador web nunca va a poder crear una página en la que los colores expresen lo mismo para todos sus usuarios. Así es en cierta forma, pero sí se puede y se debe conocer y usar el poder psicológico de los colores para crear sensaciones en el usuario, adaptando la gama de colores usada en sus páginas presisamente al tipo de emoción que quiere inspirar en cada tipo de usuario o en la mayor parte de ellos. Este ha sido y es uno de los fallos mas comunes en el diseño web: el no adecuar el color de una página al tipo de contenido que quiere mostrar y al tipo de usuario que va a contemplarla.

Contraste de colores.-

Otro de los aspectos a tener en cuenta es el contraste creado cuando sobre un color o una imagen de fondo colocamos otro color diferente, o cuando situamos próximos en nuestra página dos o mas colores distintos. Este tema del contraste entre los elementos que forman una página sea tal vez el más importante a la hora de diseñarla. Como norma general siempre debe destacar el texto sobre el fondo con la suficiente claridad como para que se pueda leer cómodamente, y esto también es importante en el caso de las imágenes de página. No olvidemos nunca que la misión principal de una página web es transmitir información, por lo que la lectura clara y cómoda de esta es fundamental.

Buenos contrastes se obtienen:

• con fondos claros y textos oscuros, o al revés.

  buen contraste

  mal contraste

• con fondos fríos y textos calidos, o al revés, siempre que no sean analogos.

  buen contraste

  mal contraste

Un color puro y brillante  aplicado en una gran extensión de la página suele resultar irritante y cansino, mientras que ese mismo color, usado en pequeñas proporciones y sobre un fondo apagado puede crear sensación de dinamismo.

Ejemplo de color irritante.        Ejemplo de color brillante bien aplicado.

Dos colores claros brillantes puestos uno al lado de otro impactan en nuestra vista, produciendo un efecto de rechazo, mientras que si esos dos mismos colores los situamos uno dentro del otro el efecto cambia por completo, resultando agradable.

Dos colores brillantes juntos.        Dos colores brillantes uno dentro del otro.

Un mismo color puede cambiar mucho su aspecto visual dependiendo del color en el que se encuentre embutido. Este efecto del cambio de apariencia de un color dependiendo de la luz incidente sobre él, de material de que esta formado o del diferente color que le sirva de fondo recibe el nombre de Metamerismo. En el siguiente ejemplo vemos dos cuadrados, uno de color de fondo azul, y otro negro, ambos con un cuadrado amarillo dentro. Los dos cuadrados interiores son del mismo amarillo, pero parecen diferentes: en fondo azul se enmascara la pureza dal amarillo, mientras que en fondo negro el amarillo muestra toda su pureza y frescura.

El mismo color sobre fondos diferentes.

De todas formas el tema del contraste entre fondo y texto es dificil de manejar en las páginas web, debido fundamentalmente a la poca resolución que tenemos en la pantalla del monitor, que suele ser de unos 5.200 puntos por pulgada cuadrada, casi 300 veces menos de la resolución que tiene una página de revista tradicional.

Por esto, el típico conjunto fondo blanco-texto negro sigue siendo en las páginas web el mas idóneo para conseguir un contraste óptimo. Los fondos negros o muy oscuros pueden dar un buen contraste con casi cualquier color de texto que sea luminoso, mientras que los fondos coloreados pueden llegar a trabajar bien si son apagados y de baja saturación, como es el caso de tonos pasteles, grises o tierra.

Por otro lado, no es recomendable usar imagenes de fondo en las páginas web, salvo que esta sea de un color y tono muy muy apagados y con poco contenido gráfico por unidad de pantalla, ya que despistan mucho al usuario y enmascaran excesívamente el texto y los demás elementos de la página. Sólo  se deben usar cuando se realiza un buen estudio del mismo por un profesional del diseño grafico y otro del diseño web, ya que ademas de lo antes expuesto ralentizan mucho la carga de la página.