Color en el Diseño Gráfico-Web

¿Por qué es importante estudiar color?

Si hay un elemento tanto definitorio como diferenciador dentro del campo del diseño gráfico-web, es el color. El significado de un diseño puede cambiar si cambiamos de color o de gama de colores. Un buen diseñador debería conocer la teoría básica del color, así como poder aplicarlo de manera eficaz en distintos tipos de diseños, ya sean para impresión o para web.

¿Qué podemos conseguir con el color?

• Distinguirnos de la competencia.
• Crear afinidad con el público objetivo.
• Potenciar la impresión que queremos conseguir en el público, más allá del mensaje.
• Evocar de un solo vistazo las emociones que queremos transmitir.

¿De qué depende la selección de color?

• El entorno socio-cultural. P.e: El blanco es el color del luto en China y otros países asiáticos. En una bandera, significa rendición.
• La marca y los valores que queremos transmitir.
• Audiencia / Público objetivo.
• La competencia.
• Los valores que se quieren transmitir.

Suele pasar que encontramos entre las empresas de un mismo sector los mismos tonos corporativos, dificultando su diferenciación. En ocasiones, elegir un color distinto al que se utiliza en el sector puede ser una buena idea.

RGB y CMYK

Muchos programas de diseño, como Photoshop o Illustrator incorporan “modos” que ayudan a los diseñadores a visualizar el color de manera correcta en la pantalla (modo RGB) o a saber el color que quedará impreso (modo CMYK).

El modo RGB hace relación a los colores de la luz. Se trata de un sistema de color aditivo, típico de pantallas de ordenador, televisiones y otro tipo de monitores. En el modo RGB, la suma de colores es igual al blanco. Los colores primarios en RGB son el rojo, el verde y el azul.

El modo CMYK hace relación a los colores de los pigmentos. Se trata de un sistema de color sustractivo, típico en pintura, tintes, tintas y otras formas de impresión gráfica. En el modo CMYK, la suma de colores es igual al negro. Los colores primarios en CMYK son el amarillo, el magenta y el azul.

Teóricamente los colores RGB y los colores CMYK deberían ser iguales pero lo cierto es que si cambiamos de modo en Photoshop podemos encontrar ligeras variaciones de color.

El círculo cromático y las armonías de color

Esto es un círculo cromático:

https://color.adobe.com/es/

Hay muchas formas de relacionar colores y, dependiendo la que seleccionemos, conseguiremos unos efectos u otros.

Armonía

La relación armónica consiste en disposición de colores afines, de tonalidades cuya vinculación forma un conjunto concordante. La armonía cromática se da cuando en distintas partes de la composición surgen colores parecidos, ya sea por ser colores análogos, monocromáticos, o tener un tono similar.

La combinación entre tonalidades es armónica cuando cada una de ellas tiene una parte de color común a los demás. También hay una armonía de colores análogos, colores colindantes en el círculo cromático (cian y azul). También tienden a armonizarse cuando se produce una desaturación generalizada.

Contraste

El amarillo y el azul destacan cuando están juntos. Lo mismo ocurre con el azul y el naranja. Se debe al contraste de colores. El contraste cromático es la yuxtaposición de colores dispares. Se consigue con la disposición simultánea de cálidos y fríos, cuando las tonalidades están alejadas entre sí en el círculo cromático. Ocurre especialmente con los colores complementarios y se extrema cuanto mayor sea la saturación.

Sensaciones que producen los colores

El azul, el cian o el verde representan valores transparentes, aéreos, lejanos y tristes. Los colores fríos suben, tienen menos peso. Los colores cálidos son estimulantes, densos, cercanos y placenteros. Los colores fríos se utilizan para “alejar” objetos. Los cálidos para “acercarlos”.

Un mismo color, dependiendo de su tonalidad, tiene implicaciones muy diferentes. Pensad, por ejemplo, en un verde amarillento. Aunque el verde es un color que transmite calma, en esta tonalidad no es así, debido a la gran carga de amarillo.

Combinaciones de colores

Contar con varios colores, en distintas proporciones, añade matices y nos permite sutilmente acertar en la consecución de la percepción deseada.

Visibilidad

Se ha de comprobar la legibilidad de los colores tanto en diferentes pantallas como al ser impresos en papel.

Tono, Saturación y luminosidad

Tono

Los objetos, dependiendo de su configuración, calidad y dirección de la luz incidente reflejan tonos. Un tono es lo que comúnmente llamamos “color”. La intensidad de un tono se ve alterada cuando se yuxtapone con otros. 

Un tono claro parece más claro cuando está rodeado de un tono oscuro. Además, el tono claro se expande cuando está rodeado de otro oscuro. Es decir, que lo percibiremos más grande de lo que es. El tono oscuro parece comprimirse cuando está rodeado de un tono claro.

Saturación

Es la pureza de un color respecto al gris. Los colores menos saturados apuntan hacia neutralidad cromática y son sutiles y tranquilizadores. Cuanto más intenso o saturado sea un color, más cargado estará de expresión y emoción.

Brillo o luminosidad

Es la característica referida al brillo (de la luz a la oscuridad). La presencia o ausencia de brillo no afecta al tono. Es decir, que siempre se trata del mismo tono (o color) solo que con mayor o menor carga de luz.

Significado de los colores

Cada color influye en el estado de ánimo e impacta de manera distinta en las personas. Los colores pueden estimular o deprimir, hacer que nos sintamos alegres o tristes, pueden activarnos o aletargarnos. Además, la percepción que tenemos de los colores depende tanto de nosotros como individuos, como de la sociedad en la que vivimos.

Los colores fríos como los verdes o los azules reflejan serenidad y calma mientras que los colores cálidos reflejan movimiento y dinamismo.

Negro

El negro es el color de lo siniestro, lo desconocido y del misterio. En occidente se asocia a la elegancia, el prestigio y el lujo.

Gris

El gris sugiere comedimiento e inteligencia. Grises son neutros, fríos, sin compromisos ni implicaciones. Para personas que no saben diseñar, una escala de grises con un color vivo que ayude a destacar, será siempre una buena idea.

Blanco

El blanco es un color que se asocia a la luz y el día. Se suele relacionar con la pureza, la virginidad, la inocencia, la paz y la armonía. Es considerado como el color de la perfección.

Rojo

El rojo es un color asociado con el corazón, la sangre y la vida. Es agresivo, excitante. Implica acción y movimiento. Es un color muy visible y es indicador de peligro. Atrae atención a textos e imágenes, pero has de usarlo con cuidado, ya que es también el color de la señal de STOP.

Naranja

El naranja es rico y extrovertido. Es un color de alarma y juventud. Se le asocia con la energía, vitalidad, diversión, calidez y confort. Es un color muy cálido, por lo que produce un efecto estimulante y denota juventud. El color naranja llama mucho la atención, por lo que puedes utilizarlo para enlaces, botones o resaltar textos.

Amarillo

El amarillo es un color reflectante, será más visible cuanto más saturado esté. Es el color de la jovialidad, de la risa, el placer, el oro y la opulencia. La alegría del amarillo deja paso a cualidades negativas como la traición, la cobardía o egoísmo.

Verde

El verde es el color de la naturaleza, la esperanza, la juventud y la fertilidad. Tiene propiedades sedantes y tranquilizadoras. Se utiliza mucho en los hospitales, ya que es un color que transmite mucha calma.

Azul

El azul es infinito, noble y grandioso, el color del cielo y el mar. Es bello y majestuoso aunque también pasivo. La confianza y la fidelidad son azules. Tiene un componente frío, preciso y ordenado. Si pierde luminosidad tiene un aire triste. Muchas redes sociales utilizan el azul en sus logos, ya que se asocia con la tecnología.

Violeta

El violeta es el color del lujo y la ostentación. Recuerda al prestigio, la dignidad y la elegancia. Es un color además que en los últimos años se ha asociado al feminismo.

Bibliotecas de color: Pantones, RAL y colores web (hexadecimal)

Hay infinitos colores en el mundo y necesitamos ordenarlos de alguna manera. Es por esto que existen las bibliotecas de color.

Librerías Pantone para el diseño gráfico

La más famosa de todas es la biblioteca Pantone, que se puede encontrar en programas de Adobe como Photoshop o Illustrator. Esta biblioteca se utiliza en infinidad de industrias, como las del diseño gráfico, moda, diseño de producto, impresión y fabricación de materiales revestidos y no revestidos como el algodón, el poliéster, el nylon y los plásticos. Las guías de Pantone consisten en una serie de colores numerados. 

Son especialmente útiles para los diseñadores gráficos, ya que les permiten visibilizar colores en sus ordenadores que luego se podrán imprimir igualando el color específico del diseño, independientemente del equipo utilizado para producir el color.

Librerías RAL para pintura

Originalmente la biblioteca de colores RAL constaba de 40 y hoy en día la cifra asciende a 213. Se trata de una biblioteca de colores nacida en Alemania, utilizada sobre todo en la arquitectura, construcción y pintura. Si bien es cierto que no nos ha tocado utilizar esta biblioteca de colores para el diseño, sí que nos ha tocado utilizarla en eventos y proyectos de interiorismo, a la hora de encontrar el color adecuado para pintar.

Los colores web y el sistema hexadecimal

Los colores web son colores que se utilizan en Internet y parten del modo RGB. Estos colores normalmente se especifican en formato hexadecimal (con un asterisco y 6 números o caracteres) aunque en algunos casos también se pueden especificar con su nombre en inglés. 

Los colores se especifican de acuerdo con la intensidad de su carga de rojo, verde y azul. Cada valor de color RR, GG, BB puede contener 256 valores diferentes, que van de 00 a FF.  Si contamos todas las combinaciones que hay, se trata de una biblioteca de 16.777.216 colores. 

Un apunte interesante es que muchos navegadores modernos también admiten añadir el valor de “transparencia”. Esto significa que existe un conjunto completamente nuevo de códigos de color, utilizando 8 cartacteres en vez de 6 (#AARRGGBB). Si contamos la transparencia, nos encontramos con 4.294.976.296 códigos de color. Es importante tener en cuenta que la adición de la transparencia no indica que haya colores adicionales, ya que solo agregar transparencia no cambia el color. Esto simplemente añade más información y más códigos de color disponibles según la transparencia o el nivel de opacidad.

El sistema hexadecimal es muy utilizado en el diseño web. Podemos utilizar este tipo de colores en Canva, Photoshop, Illustrator, Premiere y casi cualquier programa de diseño.

El color y la experiencia del usuario

El color es un componente básico del lenguaje visual y, como tal, lo podemos utilizar para resaltar, guiar la atención del usuario y unificar la imagen de marca a la hora de publicar en distintos canales (páginas web, redes sociales, newsletters, etc). Cuando hablamos de la experiencia del usuario, el color nos ayuda a reforzar las cualidades funcionales y estéticas de cualquier material de marketing que generemos, en cualquiera de los canales que tengamos abiertos. En general, el color es una herramienta muy versátil que nos ayuda a transmitir diferentes tipos de información.

Seleccionar una paleta de colores

Hemos realizado esta clase porque consideramos muy importante que tengáis vuestra paleta de colores preparada antes de empezar a diseñar. Organizar los colores te ayudará a aplicarlos de manera correcta y a conseguir cierta coherencia formal en todos tus diseños.

Colores primarios y colores secundarios

Los colores primarios son aquellos que vas a utilizar de forma frecuente en tus diseños. Estos colores son los más importantes y utilizados y deberán aparecer en cualquier material que generes para tu marca. Los colores secundarios los utilizarás menos y te ayudarán con elementos que no son tan importantes. Por ejemplo, puedes utilizar un color primario en una ilustración y un color secundario para representar una sombra.

Colores para destacar elementos

Es muy común utilizar un solo color para destacar elementos. Por ejemplo, el azul para los enlaces o los botones. Hay que tener mucho cuidado con este tipo de colores, ya que si por ejemplo utilizamos el rojo para enlaces o botones podemos conseguir menos clics, al tratarse de un color que denota “peligro”. No obstante, esto no tiene porqué aplicarse a todos los proyectos y todo en diseño web se puede testear y comprobar.

Pruebas A/B con colores

Imaginemos que no sabemos el color que funcionará mejor a la hora de conseguir mayor interacción en una landing page. Podemos generar 2 versiones similares de una página web y cambiar el color que hemos utilizar para destacar elementos. Inmediatamente después, enviamos el 50% de nuestro tráfico a una de las versiones y el otro 50% del tráfico a la otra. La página que consiga mejores resultados nos indicará el mejor color a utilizar.
No obstante, para realizar este tipo de pruebas necesitamos antes generar tráfico. Para realizar este tipo de experimentos podéis utilizar Google Optimize.

Herramientas para seleccionar colores

Existen multitud de herramientas para seleccionar colores. Resultan extremadamente útiles y os pueden ayudar mucho a la hora de mejorar vuestros diseños.

• Adobe color
• Eva Design System
• Coolors

Colorscript y el storytelling

El storytelling es la técnica perfecta para transmitir información, atraer a los usuarios y transmitir los valores de marca. La selección de colores ayuda a contar mejor las historias.

Un colorscript es una especie de guión de colores y es muy utilizado en películas de animación. Se trata de un documento que establece qué combinaciones de colores se relacionan con momentos específicos de la historia que estamos contando. Este simbolismo de color suele ser sutil pero muy impactante.

El color en WordPress, Canva, Photoshop, Illustrator y Premiere

Todos los programas de diseño gráfico-web nos permiten incluir los colores que hemos seleccionado. Nosotros solemos empezar con un documento en Illustrator, que es el programa que utilizamos para crear los logotipos en formato vectorial. No obstante, si no utilizáis este programa podéis igual añadir vuestros colores a cualquiera de las siguientes herramientas:

WordPress

Los colores suelen añadirse dentro de las opciones del tema que tengáis seleccionado en vuestra instalación. Encontraréis dichas opciones en Apariencia > Temas > Personalizar o bien en un apartado distinto (todo depende de vuestro tema de WordPress). Los temas gratuitos suelen ofrecer menos opciones a la hora de añadir colores al diseño.

Canva

Canva se ha convertido en una herramienta magnífica a la hora de crear diseños para redes sociales o impresión. Se pueden seleccionar colores hexadecimales de manera muy sencilla.

Paso 1:

Paso 2:

En su versión gratuita dispone también de una pequeña paleta de colores corporativos:

Photoshop

En Photoshop podemos seleccionar distintos modos de color:

Disponemos de una herramienta de selección de colores que nos indica RGB, CMYK y hexadecimal:

E incluso tendremos acceso a las bibliotecas de colores Pantone:

Illustrator

En Illustrator también podemos seleccionar el modo de color (RGB o CMYK):

Disponemos además de un selector muy similar al de Photoshop:

Y podemos crear nuestras propias paletas de colores:

Y utilizar las librerías de color Pantone:

Premiere

Si lo vuestro es el vídeo Premiere también incluye la gestión de color de elementos como formas y textos.

El selector de color es también muy similar al de Photoshop:

Os dejamos los enlaces a toda la bibliografía que hemos utilizado para esta entrada y vídeo:

• Curso diseño gráfico. Fundamentos y técnicas. Anna María López López. Editorial Anaya Multimedia
• Lenguaje del color. Juan Carlos Sanz. Editorial Blume
• Manual de edición y autoedición. José Martinez Sousa. Editorial Pirámide
• The color of pixar. Tia Kratter. Chronicle Books
• The Art of Pixar – 25th Anniversary Edition: The Complete Color Scripts and Select Art from 25 Years of Animation. Amid Amidi. Chronicle Books

Si tienes alguna duda o quieres aportar algo a esta clase puedes utilizar los comentarios. ¡Te contestaremos encantados!