1. Modelos de color en función del uso

Un tema que muchas veces se pasa por alto en el Diseño es el uso del color, aunque es uno de sus aspectos fundamentales. El color es importante porque puede utilizarse para consolidar una imagen y además porque transmite un estado emocional, decisivo para comunicarse con la audiencia. Un buen diseño cromático comunica un mensaje claro. Por lo tanto usemos el color para reforzar el mensaje que se desea transmitir. La Teoría del Color Una buena forma de comenzar a reflexionar sobre el uso del color es observar el entorno. Si está dando sus primeros pasos en el mundo del diseño prestemos atención a las experiencias del mundo real para aplicarlas a su trabajo. Visitar galerías, ver cine y viajar observando siempre, pueden ser excelentes complementos para lograr un nivel cromático adecuado. No todo está dicho en cuanto al uso del color, pero analizar y comprender lo que otros ya han experimentado garantiza aumentar su capacidad para encontrar la armonía que busca. Los colores se ven gracias a la incidencia de la luz. En realidad los ojos sólo perciben tres colores: el rojo, el verde y el azul. El resto es una mezcla de los tres. Cuando ve blanco, está viendo la misma cantidad de rojo, azul y verde puros, por el contrario, el negro indica la ausencia de los tres colores. La presencia de algún otro color significa que las cantidades de rojo, verde y azul puros no están equilibradas. A estos colores, resultado de la incidencia de la luz en el mundo real, se les llama colores aditivos. Observemos cualquier objeto y comprobemos como la intensidad del color varía dependiendo de la incidencia de la luz en él. Mientras más luz, más brillante se verá el color. 1

1. Modelos de color en función del uso Existen diferentes modelos de color en dependencia de su uso, si van a utilizarse para la Web o para la impresión, tanto en un caso como en otro, el color se descompone en niveles. 1. Modelo de color RGB El modelo RGB, (Red, Green, Blue; rojo, verde y azul) descompone los colores según los niveles de rojo, verde y azul y se usa para las imágenes no impresas, es decir aquellas destinadas a verse en el monitor de un ordenador, un televisor o cualquier otro dispositivo digital. Este modelo se conoce como modelo de color aditivo. El modelo RGB expresa la formación del color en correspondencia con la intensidad de los colores aditivos que hay en él. Variando la cantidad de estos tres colores se pueden representar todos los colores del espectro, desde el blanco hasta el negro, o lo que es lo mismo 256 posibilidades de intensidad. El blanco es 255 rojo, 255 azul y 255 verde, y el negro es O para cada uno de los tres colores. En esto precisamente se basa el funcionamiento del monitor de un ordenador; cada píxel que conforma la imagen que en él se visualiza posee tres barras de color, una para cada uno de los colores aditivos. 1.2 Modelo de color CMYK Para la impresión se utiliza el modelo CMYK (Cyan, Magenta, Yellow, Black; (cían, magenta, amarillo y negro). Este modelo está más cercano a la mezcla de colores que estudiamos en la escuela. Podemos explicarlo así: una imagen de color verde resultado de la incidencia de luz blanca que contiene todos los colores, si se ve verde, es que el rojo y el azul se han sustraído. El modelo CMYK se conoce como modelo de color sustractivo, lo que significa que los tres colores primarios se crean por la sustracción 100 por 100 del rojo, del verde o del azul según el caso. Todos los colores se obtienen controlando cuánta luz de estos rebota en una hoja impresa. El cian absorbe el 2

rojo, el magenta el verde y el amarillo el azul; estos junto con el negro son la base de lo que en el mundo de la imprenta se conoce como colores de cuatricromía. 1.3 Lab RGB no es el único modo de color que responde rápidamente y proporciona un amplio rango de colores. El espacio de color Lab de Photoshop consta de todos los colores de RGB y CMYK, y es tan rápido como RGB. Muchos usuarios profesionales prefieren trabajar con este modo. Mientras que el modo RGB es el modelo de color de la pantalla del ordenador y el modo CMYK es el modelo de color de la página reflectante, Lab es independiente de la luz y los pigmentos. En 1931, una organización de color internacional llamada la Cotnmission Internationale d'eclairage (CIÉ) desarrolló un modelo de color que, en teoría, contiene todos los colores que el ojo humano puede distinguir. Después, en 1976, el CIÉ presentó un sistema de color adicional, era LAB. Lo mejor del modelo de color LAB es que rellena los vacíos de los modelos de color RGB y CMYK. Por ejemplo, RGB proporciona una superabundancia de colores en el rango del azul al verde, pero es tacaño con los amarillos, naranjas y otros colores en el rango del verde al rojo. Por su parte, los colores que faltan en CMYK son numerosísimos. Lab lo corrige todo. Comprender la anatomía Lab El modo Lab consta de tres canales de color, uno para la luminosidad y los otros dos para los rangos de color, conocidos simplemente con las iniciales "a" y "b". La luminosidad en Lab es como el brillo en HSB. El blanco indica la máxima intensidad del color. 3

Por su parte, el canal "a" contiene los colores que van del verde oscuro (valores de brillo bajos) al gris (valores de brillo medios) al rosa intenso (valores de brillo altos). El canal "b" varía del azul brillante (valores de brillo bajos) al gris al amarillo fuerte (valores de brillo altos). Como en el modelo RGB, estos colores se mezclan para producir colores más claros. Sólo los valores de brillo del canal luminosidad oscurecen los colores. Puede ver el modo LAB como un RGB de dos canales sobre el que se superpone el brillo. Usar LAB Como el modo LAB es independiente del dispositivo, puede usarlo para editar cualquier imagen. Editar en el modo LAB es tan rápido como editar en el modo RGB y varias veces más rápido que editar en el modo CMYK. 1.4 Escala de grises Escala de grises es bastante bueno, porque nos libra de todos los problemas y posibles gastos de trabajar con color y, al mismo tiempo, proporciona acceso a toda la potencia y funcionalidad de Photoshop. Se pueden imprimir imágenes en escala de grises con cualquier impresora láser, reproducirlas en cualquier publicación y editarlas en prácticamente cualquier máquina. Pero aparte de ensalzar sus virtudes, no hay muchas otras cosas que decir acerca de la escala de grises. Puede convertir una imagen al modo escala de grises sea cual sea su modo de color actual; y con la misma facilidad se puede convertir de escala de grises a cualquier otro modo. Debemos editar en CMYK? RGB no representa los colores con precisión cuando vamos a imprimir una imagen, porque el espacio de color RGB contiene muchos colores (especialmente los más brillantes) que están fuera del alcance de CMYK. Es por eso que al cambiar de RGB a CMYK, los colores se ven más apagados. Por esta razón, mucha gente aconseja trabajar exclusivamente en el modo CMYK, pero merece la pena reflexionar antes de seguir este consejo con los ojos cerrados. Aunque al trabajar en CMYK se evitan decepciones con el color, también es más lento porque Photoshop tiene que convertir los valores CMYK a la pantalla RGB al instante. 4

Más aún, el escáner y el monitor son dispositivos RGB. No importa cómo trabaje, en algún momento debe producirse una conversión de RGB al espacio de color CMYK. De hecho, prácticamente todos los dispositivos en color de la Tierra son RGB, excepto la impresora. Es mejor esperar a convertir al modo CMYK hasta justo antes de imprimir. Una vez terminado el diseño, seleccionamos Imagen>Modo>Color CMYK y realizamos los cambios que nos parezcan necesarios. Por ejemplo, quizá quiera introducir algunas correcciones de color, aplicar algo de enfoque o incluso retocar a mano algunos detalles. Photoshop aplica los cambios más lentamente en el modo CMYK, pero al menos sólo lo hace al final del trabajo, no durante todo el proceso. 1.5 HSB o Tono, Valor y Saturación En el color existen tres conceptos que se tienen siempre en cuenta en cualquier estudio sobre el tema. Nos referimos a Tono, Saturación y Brillo (Hue, Saturation, Brightness), Llegó a ser un modelo de color, sin embargo ahora está relegado al cuadro de diálogo Selector de color y a la paleta Color. Tono: es el color puro, define un color concreto dentro del espectro de colores, el material del que están hechos los arcos iris, medido en un círculo de 360 grados. El rojo se encuentra en O grados, el amarillo en 60 grados, el verde en 120 grados, el cian en 180 grados (en la media circunferencia), el azul en 240 grados y el magenta en 300 grados. Esto es básicamente una versión tipo pastel del modelo RGB con la máxima intensidad, y es la base de la rueda de color que 5

con frecuencia se ofrece como una herramienta para seleccionar colores complementarios y opuestos; la relación entre colores (qué colores combinan) puede demostrarse en dicha rueda. La Saturación: representa la pureza del color, define la intensidad del color o cantidad de gris que contiene la imagen. Un valor de saturación igual a cero produce el gris. El blanco, negro y cualquier otro color que pueda aparecer en una imagen en escala de grises carecen de saturación. La saturación máxima produce la versión más pura de un tono. El brillo: es la luminosidad u oscuridad de un color, es el grado de luminosidad de los colores, la cantidad de luz blanca o negra presente en un color, el rango que va de negro(0%) a claro o máxima luminosidad (100%).Un valor de brillo igual a cero produce el negro. El máximo brillo combinado con la máxima saturación produce la versión más intensa de cualquier tono. 6

2. Combinar los colores Hay reglas que debe conocer para que no fracase el diseño. La rueda de color muestra los colores principales y la relación que tienen entre sí. 2.1 Colores complementarios Los colores complementarios son aquellos que están frente a frente en la rueda de color. Estos colores potencian la fuerza que puede transmitir una imagen, crean contraste y un sentido equilibrado del color. Cuando coinciden intensifican la fuerza de la imagen. Muchos profesionales del diseño gráfico utilizan este recurso en sus obras buscando imágenes contundentes. Ejemplos muy utilizados de colores complementarios son el rojo con el verde y el azul con el naranja. Cuando se combinan los complementarios, los fondos más oscuros aportan un toque sofisticado. 2.2 Colores análogos Son los colores cercanos en la rueda de color. Estos colores coexisten de forma apacible y armoniosa en una imagen, debido a que guardan relación entre sí. Si por ejemplo, el rojo es el color principal, el rosa y el naranja son sus análogos, que de hecho contienen un poco de rojo. Esta combinación crea un efecto interesante como la que crean el amarillo y el verde. En muchos casos reducir el número de colores en una página causa una sensación de claridad. 7

2.3 Monocromías La monocromía, como su nombre indica, consiste en dar a una imagen matices de un mismo color, a base de mezclarlo con blanco para aclararlo o con negro para oscurecerlo. Las imágenes monocromáticas pueden ser sutiles y muy agradables. Estas imágenes producen excelentes resultados en la Web, pues mientras menos color tenga una imagen, menor será su tamaño y más rápida su descarga. Además, imágenes de fondo aportan un toque de uniformidad ideal para no desviar la atención del contenido principal No basta con decidir qué tipo de colores utilizar en un diseño; si análogos, complementarios o monocromáticos. Es necesario encontrar el equilibrio entre tono, valor y saturación imprescindible para que el texto resulte legible y se logre resaltar los elementos importantes y atenuar aquellos que no lo son. 3. Colores fríos y colores cálidos Un concepto muy establecido en el mundo de la pintura, las imágenes y el color es la llamada temperatura del color. El azul, el verde y el morado se consideran colores fríos, mientras el rojo, el naranja y el amarillo se consideran cálidos. Sí desea resaltar un objeto dentro de una imagen para atraer la atención sobre él, es recomendable utilizar un color cálido. De la misma forma puede enfriar una imagen añadiendo detalles azules o violetas. Si por ejemplo está desarrollando una página Web sobre deportes de invierno los colores fríos funcionan muy bien, pero si la página es para un centro de bronceado los colores cálidos son mucho más convenientes. 8

Existen cientos de estudios sobre el uso del color, en ocasiones con opiniones enfrentadas, pero no hay duda de que cada color transmite una emoción diferente, que intentamos resumir a continuación: El rojo transmite calor y energía, es ostentoso y se relaciona con el amor, las relaciones sexuales y el peligro. Se usa mucho para crear alarmas y es ideal para atraer la atención del espectador. El naranja es alegre, amigable y estimula la creatividad, se utiliza mucho en las señalizaciones. El rosa es femenino, blando y joven. El amarillo se relaciona con el sol, es tibio, brillante y puede usarse para hacer advertencias sin la agresividad del rojo. El verde es fresco, natural y siempre se ha relacionado con la esperanza. El azul es frío, masculino, sereno, húmedo, confiable y relajante, aporta elegancia y seriedad al entorno, está muy extendido en iconos y logotipos. El morado está relacionado con el poder, es elegante, aristocrático y profundo. El marrón es natural y clásico y esta relacionado con la tierra, el blanco es pureza, limpieza, equilibrio y se relaciona con la inocencia y la verdad. Y por último, el negro significa la muerte, el poder y el misterio, es el color de la noche y las sombras. Conociendo el significado que en general se atribuye a los colores y sus combinaciones, puede tener una idea de cómo utilizarlos, en función de las sensaciones que desea generar en la audiencia. Cuando esté definiendo los colores para su sitio puede agruparlos por grupos diferentes: divertidos, acogedores, tranquilos... 4. El color en la Web La Web tiene limitaciones que los diseñadores deben tener en cuenta. Antes de decidir los colores que utilizará en su sitio, considere que una misma página puede verse diferente en dependencia del monitor, del sistema operativo y del navegador que la visualice. Todavía navegan por la Web internautas con monitores antiguos (esto ya es falso) con limitación de colores. Una minoría de los usuarios que se conectan a Internet tienen monitores que sólo permiten visualizar 256 colores, y aunque la mayoría sí cuenta con monitores de mayor resolución y posibilidades para el color, cuando organice el diseño de colores de su sitio hágalo pensando en todos. Otro tema son los propios navegadores, que con el propósito de garantizar la velocidad de descarga, tienen limitadas sus posibilidades de visualización a 256 colores. Los navegadores más usados, Internet Explorer, Netscape Navigator y Mozilla Firefox poseen una paleta con 216 colores comunes y 49 adicionales. Use esos 216 9

colores comunes para garantizar que todos los visitantes de su sitio visualizarán los colores tal y como los ha definido. A estos 216 colores se les llama colores seguros para la Web. El navegador muestra los colores tal y como los tiene definidos en su paleta. Cuando una página contiene imágenes o gráficos con un color que no se encuentra en la paleta del navegador, éste visualiza el más parecido o hace una mezcla conocida como tramado. El tramado es un fenómeno que debe evitar por el impacto negativo que suponen los puntos que pueden salir en la imagen. Los colores seguros son aquellos que los navegadores son capaces de visualizar con precisión. Son 256 los colores seguros para cada navegador y son suficientes para crear buenas composiciones para la Web. De forma predeterminada, la paleta de colores de Dreamweaver y Fireworks muestra los 216 colores comunes, y en caso que seleccione un color fuera de esa paleta, el programa automáticamente el color seguro más parecido. 5. Algunos principios básicos en el uso del color El aspecto más importante cuando aplica colores a un sitio es garantizar la legibilidad de los textos y que la comunicación con la audiencia sea segura y efectiva. Asocie cada categoría con un color determinado y varíe ligeramente su valor o saturación en las páginas de esta categoría a medida que varía la profundidad. Esta técnica, bien usada, puede ser extraordinariamente efectiva. Otros aspectos a considerar son los siguientes: Para atraer la atención del usuario hacia los elementos más importantes de la página, use un valor de color atenuado como fondo de la página y el mismo color más intenso en los elementos que quiere destacar. No abrume al usuario con un uso indiscriminado del color. Defina claramente las categorías de su sitio y los colores de cada una de ellas en el nivel más alto del sitio. Guarde los colores brillantes para elementos destacados. Estos elementos deben atraer inmediatamente la atención del usuario. Considere el género predominante en la audiencia. Hombres y mujeres tienen formas diferentes de responder a sus impulsos y el color no escapa a este 10

detalle. Las mujeres se relacionan mejor con los colores claros como los tonos pastel, mientras los hombres tienen mayor tendencia hacia los colores más fríos, como el azul y el gris. Mientras en un diseño de estética triunfa el público femenino, en uno de motociclismo hay sin duda predominio de hombres. Si su diseño es de temas infantiles utilicemos colores brillantes y con contrastes. 11