Trucos de Diseño #1: Sobre colores. Cómo elegir una paleta de colores sobresaliente para tu proyecto.

Este artículo también está disponible en: English (Inglés)

¡Hola! Si vienes de un perfil técnico o el tema del diseño no te es muy cercano, probablemente hayas encontrado dificultades a la hora de montar la parte visual de tus proyectos. Si te soy sincera, yo todavía considero que el diseño siempre es un reto al no tener respuestas correctas. Se trata de una de esas ciencias extrañas y ambiguas donde, en teoría, no puedes estar totalemente equivocada y sin embargo nunca sabarás si estás haciéndolo del todo bien. Muchos elementos subjetivos entran en juego en el diseño y, por supuesto, las distintas personas y culturas van a inclinarse hacia unos gustos u otros. Vamos, que no es cosa fácil, para nada.

Aun así, me gustaría hacértelo más sencillo. Éste va a ser el primer artículo de nuestra colección sobre Consejos de Diseño. Y hoy comenzamos por lo que considero uno de los mayores regalos que tenemos: ¡los colores!

El poder del color.

Como probablemente ya sepas, el color es sólo la forma en que la luz se refleja en los objetos y, en condiciones normales, es lo primero que vemos de un estímulo visual. Se dice que «sólo dispones de 3 segundos para causar una buena impresión«. De modo que estoy segura de que gran parte de la atención durante esos tres segundos se la llevan los colores que eliges en tus actos de comunicación.

Pero, ¿por qué son tan importantes los colores para nosotros? Bueno, desde un punto de vista biológico, nos ayudan a nosotros -los animales- a identificar riesgos, cosas comestibles y agua, material de procreación sano, etc.; aunque su importancia es todavía más grande en el caso de los humanos ya que nosotros hemos dejado de lado nuestros otros sentidos y nos dejamos guiar esencialmente por la vista para entender el mundo. Y también porque, para nosotros, los colores despiertan una importante respuesta emocional y psicológica.

Por lo tanto, elegir una paleta de colores siempre debería ser una decisión consciente y meditada, ya que estos van a convertirse en una de las cosas más importantes de tu identidad visual. No se trata de un proceso simple, pero tampoco debería ser tan complicado si conoces cuáles son los términos de la ecuación. Hasta me atrevería a decir que elegir la correcta combinación de colores se reduce a dos elementos principales: emoción y contraste.

Antes de avanzar en los detalles, considera refrescar tu conocimiento sóbre el tema con nuestro post sobre terminología del color. Seguro que te resulta útil conocer las diferencias entre matiz, valor, pureza y los esquemas de color aditivos y sustractivos. Si esos temas son claros como el día para ti, sigamos adelante con la primera parte: ¡colores y emoción!


Psicología del color.

No existen los colores neutros. Al igual que cada Power Ranger tenía su propio carácter vinculado a su traje, tendemos a asociar ciertos valores y conceptos con los matices. ¿Sabías que el color de tu coche puede estar vinculado a tu personalidad? La exposición al color desencadena una respuesta emocional (y es por eso que nunca deberías pintar las paredes de tu cuarto de rojo sangre si alguna vez quieres dormir bien).

Las ideas que relacionamos con los colores pueden ser subjetivas y depender de nuestra cultura de base y experiencias. Por ejemplo, mi padre odia el amarillo porque cuando era niño le obligaban a llevar unos pantalones bombachos de ese tono que despreciaba enormemente, y desarrolló un cierto trauma al respecto. Por otro lado, mientras que en gran parte del mundo los asuntos de la muerte van de negro, en Asia oriental el color asociado a la transición del otro lado es el blanco -y cuanto más puro, mejor-.

Sin embargo, existe un imaginario común bastante sólido alrededor de los colores, y es por ello que juegan un papel tan importante en el branding. Hay muchos estudios al respecto, pero creo que podemos resumir la mayoría de conceptos de la psicología del color en la siguiente tabla de Class With Mack.

Probablemente pienses que es muy reduccionista, pero lo cierto es que funciona normalmente. ¿Cuántos bancos, empresas de seguros o compañías de transacciones monetarias puedes recordar? ¿Cuántas de éstas usan algún tono de azul en su imagen de marca? PayPal, Visa, Bank of America, City Bank, American Express, Deutsche Bank y muchas otras cumplen esto. La explicación es que el azul es un tono frío y tranquilo que normalmente comunica seguridad, sinceridad y asuntos serios. Echa un vistazo a la siguiente infografía. ¿Crees que estas marcas llevan los mismos valores que sus colores?

Infografía sacada de Huffpost.

Como hemos comentado antes, elegir un color o una paleta de colores siempre debe ser una decisión consciente y meditada. Lo que queramos transmitir con nuestra marca debería aprovechar los principios universales de la psicología del color a favor de la empresa, siendo conscientes -eso sí- de los matices culturales y geográficos. A pesar de todo, también hay otro criterio esencial a la hora de elegir color que puede poner la carga psicológica del tono en un segundo lugar: la diferenciación.

¿Qué sentido tendría que tu nuevo logo de banco fuera también azul, cuando ya existent tantas compañías en ese sector que lo usan? La psicología del color es importante, pero también lo es el análisis de la competencia. Vas a querer que tu marca sobresalga entre tus rivales y sea recordada por tus clientes potenciales, de modo que a veces te tocará trabajar con colores que quizás no serían la elección más obvia para tu actividad, pero que pueden llevarte más lejos y hacerte memorable.

Resumiendo: presta atención a lo que la psicología del color tiene que decir sobre los valores que te gustaría transmitir, pero manten una mente abierta a la hora de elegir los tonos que pueden hacerte especial entre tus iguales. Y con esta bella alegoría introducimos el siguiente punto del artículo: para que tu marca o producto destaque, necesitarás contraste. Dicho de otra forma, siempre deberías considerar los colores dentro de su contexto.


Importancia del contraste.

Paletas o esquemas de color.

Ahora que ya hemos hablado de los colores de la competencia, vamos a olvidarnos un poco del mercado que nos rodea y simplemente centrarnos en tu identidad visual. Tu producto puede tener un color dominante pero, en la mayoría de casos, también va a utilizar otras tonalidades y valores que combinen en cualquier comunicación visual que hagas. Eso es lo que llamamos una paleta o esquema de colores: una colección de colores que el diseñador elige para una marca, producto o diseño gráfico/multimedia.

Veamos algunos ejemplos de Brandcolours.com, la colección más grande de códigos de colores de empresas famosas:

Los esquemas de color generalmente se dividen en dos grupos de colores:

  • Primarios: son los colores dominantes, que podemos encontrar en los fondos, en el logo, en menús, botones, etc.
  • Secundarios: se usan sobre todo para dar acento y para las interacciones.

Las paletas generalmente contemplan varios valores de un mismo tono, para mayor consistencia. Sin embargo, si sólo recurres a un mismo color con más o menos negro o blanco, no lo vas a tener fácil para sobresalir, ¿verdad? Lo principal que debería considerar un esquema de color es el CONTRASTE.

Colores en contexto.

Mira estos círculos. Como podrás imaginar, los círculos de dentro siempre tienen el mismo color, tamaño y posición, pero los colores que los rodean nos hacen percibirlos de forma diferente. El poder del color está muy relacionado con lo que le rodea. En otras palabras, el contraste se obtiene usando combinaciones de colores que hagan destacar los tonos.

Es una elección, claro: podemos desear combinaciones con un contraste bajo, para dar una sensación más suave y calmada; pero es más frecuente que busquemos dar con algo impactante a nivel visual. También podemos jugar con diferentes niveles de contraste dependiendo de los elementos a los que estamos dando estilo. Por ejemplo: un fondo que use un tramado debería tener un contraste bajo, sin embargo, las barras de un gráfico o los bloques de texto debería tener un contraste alto para ser fáciles de leer.

Lo importante aquí es que nosotros controlemos cómo generar más o menos contraste. Pero, ¡oye, esta debe ser la parte más técnica de la teoría del color!

Antes, recuerda que los esquemas de color monocromos también son una opción. Y, por cierto…

Consejo profesional: ¿te has planteado empezar con una escala de grises?

¿Sabías que algunos diseñadores e ilustradores empiezan sus proyectos usando sólo la escala de grises? Trabajar entre blancos y negros nos fuerza a crear contraste en un sólo espectro de color, sin otras distracciones.

GREYSCALE to COLOR - Digital Painting Tutorial - YouTube
Mira los dos pasos en el proceso de esta ilustración de Dave Greco.

Empezar tus trabajos de color sin color (¡ja!), sólo valores, tiene las siguientes ventajas:

  • Nos obliga a usar un número limitado de luces y sombras para generar un buen contraste.
  • Hace más fácil testear distintos esquemas de color más adelante, ya que sabremos qué grupos de color vamos a necesitar (y herramientas como Adobe XD o Illustrator nos permiten cambiar tonos de forma fácil e indolora una vez que ya tenemos nuestros prototipo en escala de grises).
  • Nos entrena a pensar en cómo podemos generar contraste con otros elementos aparte del color: como los tamaños, las formas, las posiciones, la alineación, etc. Esto es muy útil para los trabajos de UI y UX.
  • Es una buena práctica para la accesibilidad. Recuerda que algunas personas tienen unas capacidades distintas para percibir los colores (como los grados de daltonismo), ¡y tenemos que diseñar también para ellas!

Personalmente no uso esta técnica regularmente cuando estoy dibujando -me da la sensación de que las ilustraciones quedan más oscuras de lo que inicialmente me gustaría-, pero sí empiezo a hacer prototipado con frecuencia en escala de grises, y lo encuentro muy útil. Si no lo has probado nunca, te lo recomiendo encarecidamente. Seguro que enriquece tu flujo de trabajo.


Métodos científicos para elegir una paleta de colores armónica.

Aparte de usar paletas con un tono en diferente grado de pureza, temperatura y valores, tenemos ciertas fórmulas para elegir las combinaciones de colores. ¿Recuerdas la rueda de colores? Es el momento de volver a ella, ya que la vamos a necesitar para aprender sobre las armonías de color. Piensa en éstas como los acordes que tocarías para lograr melodías más o menos intensas (¿alguien con sinestesia en la sala?).

¡Echémosles un vistazo!

1) Colores análogos

Este esquema usa un color principal y sus dos adyacentes en la rueda.

Tienen poco contraste y tensión pero, a cambio, son esquemas muy armónicos e integrados.

Las paletas que usan colores análogos tiene un look moderno y sofisticado. También enfatizan en el rango de colores que trabajan, de manera que las emociones asociadas a esas tonalidades se intensifican.

Aquí tenemos varios ejemplos de branding e ilustraciones basados en análogos: da una sensación de equilibrio y estabilidad, ¿no es así?

analogos
Colores análogos
Everything You Need to Know About Picking and Using Brand Colors - Venngage
Ilustración de Firewatch.

2) Colores complementarios

Ésta es la manera en la que puedes lograr el mayor contraste entre colores: usando los tonos que se encuentran diametralmente opuestos en la rueda de color. Estos colores se llaman complementarios porque, al mezclarlos, se cancelan unos a otros y se obtiene el gris.

Con este esquema tenemos lo contrario al caso anterior: obtenemos el máximo contraste y tensión, con composiciones que tienen mucho poder e intesidad, pero muy poquita o ninguna armonía. Y ya sabes lo que dicen: ¡los contrarios se atraen!

Con paletas tan contrastadas podemos lograr un gran impacto, así que se usan con cierta frecuencia. Eso sí, recuerda que es una combinación muy arriesgada cuando se usa para textos y fondos, ya que tiene una legibilidad terrible. Mira cómo estos logos solucionan ese problema oscureciendo el color complementario o usando una fuente especialmente gruesa. Una cosa son los logos, ¡pero nunca lo uses en bloques de texto!

complementarios
Colores complementarios
10 Small Logo Design Details that People Often Miss Out | Logos, Hallmark cards, Logo design
Ways to Break "Red & Green Shouldn't be Seen" Rule
Logo Ikea - Excelyfinanzas.com

¿Te has fijado alguna vez que Disney usa estos esquemas en muchas de sus princesas?

Disney Princess Rapunzel Stand Up Photo Prop | Disney Princess Party Supplies - Who Wants 2 Party Australia
Princesas Disney | Disney Wiki | Fandom
Snow White (Disney character) - Wikipedia

3) Complementarios divididos

Éste es un esquema muy frecuente ya que se trata de un acercamiento más suave que el uso de los complementarios. En lugar de elegir el exacto opuesto a un color, lo que hacemos es elegir los dos matices adjacentes al opuesto.

Estas paletas mantienen un buen contraste sin que sea extremo, y tienen menos tensión. Se las considera una gran elección para los principiantes porque es una solución generalmente agradable.

Si prestas atención probablemente veas este tipo de paletas en muchas marcas y proyectos.

complementarios divididos
Complementarios divididos
Images For > Drink Company Logos | Split complementary colors, Fanta, Split complementary color scheme
The colour wheel and logo design | Pixellogo | Pixellogo
Complementarios divididos. | 7 eleven, Eleventh, Lettering
April Colors 2019 — Faunwood
Arte de @firefun123 para el april.colours challenge.
La moda también aplica armonías de color, como se ve en esta colección de Gucci de 2011. Imagen tomada de MyFashionHub.

4) Tríada de colores.

Esta armonía se alcanza seleccionando colores que en la rueda forman un triángulo equilátero.

Esta elección es también frecuente porque tiene en lado positivo de los esquemas previos: un buen grado de contraste y vibración, junto a un adecuado equilibrio e integración. Otra ventaja es que estos colores nos permiten tener combinaciones más flexibles.

De nuevo, para hacer un uso correcto del esquema en tríada, deberíamos dejar que uno de esos colores fuera dominante sobre los demás, dejando los otros dos para dar acentos. De esa manera evitamos problemas de legibilidad y alcanzamos una mejor sensación cuando vemos estas tonalidades en combinación.

tríada
Colores en tríada.
Archivo:Burger King logo.svg - Wikipedia, la enciclopedia libre
Qué hay detrás del famoso logotipo de FedEx?
4SUPES | Superman comic, Batman and superman, Superman
Ilustración de Superman.
Joker Concept Art for BATMAN: ARKHAM ORIGINS | Guason caricatura, Batman vs guason, Enemigos de batman
Concept art del Joker en Batman Arkham: Origins.

5) Colores en tétrada y en cuadrado.

De los creadores del triángulo llega… ¡el rectángulo! Y cuando lo espaciamos de forma regular, lo que tenemos es un cuadrado perfecto. En estas dos armonías, lo que trabajamos son pares de colores complementarios.

En el primer caso, usamos una combinación de contrastes de los complementarios con la suavidad de los análogos. De esta forma tenemos un equilibro adecuado entre tonos cálidos y fríos. La variación del cuadrado es la más extrema ya que el contraste es mayor, pero también es cierto que nos da un rango mayor de tonalidades para usar.

Sin embargo, en todos los casos, las limitaciones son las mismas: si usas todos los colores con la misma intensidad, lo que va a quedarte es un diseño abigarrado y circense. Es muy recomendable que dejes que uno de los tonos sea el que domina y que los otros sólo enfaticen.

Colores en tétrada.
cuadrado
Colores en tétrada cuadrada.
Why Your Company Logo Shouldn't Have More Than 3 Colours – 48hourslogo Blog
microsoft-logo - PKF Attest
File:Slack Technologies Logo.svg - Wikimedia Commons

A modo de apunte, tanto Playstation como Microsoft no usan estos tonos de su logo de forma regular en el resto de sus soportes. El logo de la consola de Sony cambió recientemente a una versión en blanco puro y sus interfaces son esencialmente azules y blancas. Las webs de Microsoft usan un esquema basado en tonos claros y un azul tono «pantallazo de la muerte» que es diferente al del logo. En este logo de Slack ni siquiera tenemos el color principal de la marca, que es un tipo de magenta, pero estos matices del logo sí se usan como acentos en su material infográfico y en las interacciones de la app.

Ejemplo de colores en tétrada cuadrada en una pieza de arte de Wetcanvas.
Ejemplo de colores en tétrada cuadrada en una pieza de arte de Wetcanvas.

¡Y ahora ya sabes qué métodos puedes usar para elegir una paleta de colores! A modo de resumen de lo visto hasta ahora, te invito a echarle un ojo a esta chulísima infografía de Designmantic.


NORMAS cuando elegimos colores.

Ahora que ya sabes cómo elegir y combinar colores, no parece complicado completar una paleta, ¿verdad? Eso sí, antes de que veamos unas geniales herramientas para ello, deja que te dé unos últimos consejos rápidos.

A la hora de elegir…

  • Inspírate en la naturaleza y la imagen real. Todo eso de los métodos científicos está muy bien pero, en el fondo, tú ya tienes una clara idea de lo que te resulta inspirador visualmente. Fotografías, paisajes, hasta piezas de arte. ¡Encuentra las escenas que te emocionan en la dirección adecuada y extrae sus colores dominantes!
  • La regla del 60-30-10. Esta idea está sacada del diseño de interiores y viene a decir que deberías usar los colores que elijas en una proporción del 60%, 30% y 10%. Esta fórmula funciona porque equilibra los tonos y hace que sea mucho más fácil pasar de un punto focal a los demás. Es muy fácil de aplicar: 60% se reserva para el matiz dominante, 30% es para el color secundario y sólo un 10% es lo que usaremos para el tono de acento. Obviamente, esto funciona con tres colores, pero seguro que puedes apañártelas para mantener una proporción equilibrada con uno o dos colores más si mantienes esa clase de ratios.
  • Abraza los colores «neutrales». Combinar tu tono deseado con blancos o negros tiene la ventaja de destacar el resto de la paleta, manteniendo tu esquema en una condición de buen contraste, legibilidad y comodidad visual.
  • El espacio en blanco es tu aliado. Esto se aplica tanto en layout como en esquemas de color. Tus colores de acento, si están bien contrastados, siempre van a pesar más visualmente que el resto de elementos de tu marca. Dales el espacio que necesitan para evitar abigarrar tus diseños.

Cosas que debes DEFINITIVAMENTE evitar:

  • Colores puros. Y por puros me refiero a esto: . Nunca, y repito, NUNCA uses un color que es un 100% de saturación de un tono primario. Cansan mucho la vista y quedan muy feos. Puedes recurrir a tonos muy fuertes y saturados, pero siempre añade un poquito de blanco o de negro a los mismos, o incluso mézclalo con tonos cercanos. El color resultante será sin dudar mucho más apropiado y elegante.
  • Negro puro. No voy a ser tan nazi como con el punto anterior pero la idea es similar. El negro blanco suele ser innecesariamente oscuro y contrastado. Un tono de gris oscuro va a dar un resultado mucho mejor. ¿No te lo crees? Abre el inspector de tu navegador en cualquier página web que visites y echa un vistazo a los textos o fondos que parezcan negros. ¿Algunos es #000? No vas a encontrar muchos así. Es más cómodo visualmente y mucho más moderno.
  • Combinar colores complementarios como texto y fondo. Ya hemos hablado de esto, pero por favor, no lo hagas -a menos que realmente sepas lo que haces-. Ten compasión de tus lectores.
  • Contraste bajo. Sé que esto está ligado a los gustos y puede que busques una sensación gran de integración y unidad en tu diseño, pero si hablamos precisamente de diseño y no de arte, necesitas que tus producciones sean legibles, y también has de pensar en las personas que tiene problemas visuales y grados de daltonismo. El diseño siempre debería ser inclusivo.

Herramientas súper chulas para crear tu paleta.

Ahora que ya tenemos la teoría, ¡pongámonos manos a la obra! ¡Deja que te presente las mejores herramientas para crear y exportar paletas de color!

Coolors

Éste es mi generador de esquemas de color favorito a nivel personal. Me gusta porque tiene muchas herramientas manteniendo una interfaz intuitiva y simple:

  • Es rápida y fácil de usar. Es la elección perfecta para probar cosas y descubrir combinaciones majas a golpe de barra espaciadora.
  • Te permite extraer una paleta a partir de una foto o imagen que te guste.
  • Tiene una herramienta para probar la paleta de colores simulando distintos grados de daltonismo.
  • También tiene un modo zen para que te concentres sólo en los colores y olvides todo lo demás.
  • Te da un montón de opciones de exportación para tu esquema de colores.

Paletton

Paletton por otro lado te permite elegir colores con la idea de la rueda de color como figura central. Puedes comenzar considerando algunas de las armonías más frecuentes y luego ir desplanzándote por la rueda y cambiando los valores para construir tu paleta deseada. En el lado malo, es una web muy lenta, no puedes crear una cuenta para guardar tu trabajo y está invadida de anuncios.

Color Hunt

Este sitio te da acceso a paletas ya existentes y valoradas, sugeridas por otros usuarios. Si no crees tener buen ojo para los colores y prefieres usar algo que ya otros hayan validado como bonito y funcional, Color Hunt te ahorra el proceso de elegir. Pero, ahora que has leído hasta aquí, eres capaz de entender si los esquemas de color que te proponen funcionan o no para ti ; ).

Flat UI Colours

Similar a Color Hund. Te proporciona paletas con muchos tonos y matices para aplicaciones y sitios web, basadas en flat design.

Adobe Color

Me he dejado lo mejor para el final. Adobe Color es de lejos la herramienta más completa. Incluye las mismas herramientas que Coolors y Paletton y además te permite explora y elegir paletas de otros. Está integrada en la suite de Adobe y siempre puede acceder a tu librería de colores desde sus apps. Además, también tiene opciones de exportación paraSASS and LESS. Eso sí, a veces puede ser algo complicada de usar y, de entrada, no es particularmente intuitiva.


Cosita extra para inspirarte – I Love Hue

¿Te gustaría entrenar tus habilidades para diferenciar tonos? Te presento una serie de juegos de puzzles para móvil que es una pasada: I love Hue y I Love Hue Too! Y te aseguro que no veo un duro por decir esto xD, simplemente me gusta compartir lo que disfruto. Pruébalos para tener una bonita y relajante experiencia visual. En mi caso, echar unas partidas me sirve como un tipo de meditación.


¡Y esto es todo para la primera parte de nuestra serie de consejos de diseño! Ahora ya dispones del conocimiento y las herramientas para empezar a crear flamantes y preciosos esquemas de color para tus diseños, webs, ilustraciones, diseño de interiores o lo que sea que se te ocurra.

Si este artículo te ha parecido útil, haznoslo saber en los comentarios. ¡Y comparte con nosotros tus experiencias con los colores, si quieres!


Para saber más…