Teoría del Color en el diseño de interfaces

La clave para definir una paleta de color en un sitio web, una app o cualquier producto digital está en habilidad de manipular un color, no solo elegirlo.

1. Cantidad de Colores

Repasando grandes productos o aplicaciones que usamos todos los días podemos descubrir esta tendencia: La complejidad de la interacción tiende a ser inversamente proporcional a la cantidad de colores.

Stripe es un gran ejemplo. Un landing page o una página de ventas tiene un nivel de interacción muy bajo. El objetivo principal está muy claro: comprar, suscribirse, iniciar, etc. UnCall to Action.

En estos casos la cantidad de color tanto en volumen como en variedad puede ser muy alta.

Pero cuando vamos a su dashboard la interacción es mucho más compleja, los objetivos del usuario son otros y el manejo del color es mucho más medido.

2. Variaciones de color

¿Cómo aprovechamos cada color para que sea funcional, predecible y aún así transmita el espíritu de una marca? Este es el gran reto del diseñador de interfaces a nivel de color.

La respuesta está en las variaciones: ligeras transformaciones de un color para construir todos los componentes que necesitemos. Veamos un par de ejemplos:

Esta es la vista móvil de Quora: 1 color principal y 2 variaciones.

Ahora Facebook: 1 color principal y 2 variaciones. Un poco más interesante que Quora. ¿Por qué?

El camino fácil para obtener variaciones de color es tomar nuestro color principal y llevarlo hacia el negro para obtener una variación más oscura o hacia el blanco para obtener una versión más clara. Eso hizo Quora y aunque funciona no deja de ser un poco aburrido.

Como seres humanos estamos acostumbrados a ver variaciones de color muy complejas todo el tiempo. En cualquier objeto de un solo color vemos variaciones por condiciones de luz, temperatura, reflejo, ambiente, etc. Por esto una variación tan pobre como la anterior no es muy interesante.

Usemos el mundo real para obtener variaciones más interesantes

Al ver con detenimiento el panel de color tenemos un comportamiento menos predecible pero un resultado mucho más interesante:

Profundicemos en el color digital

El modelo de color con el que estamos acostumbrados a trabajar es el RGB, combinación de valores de 0 a 255 para cada canal. Ahora veamos uno muy útil:

HSB

Hue Matiz
Escala de 0 a 360 de todos los colores “puros”.

Saturation Saturación
Escala de 0 a 100 dónde 100 es la saturación máxima de un color y 0 es blanco

Brightness Brillo.
Escala de 0 a 100 siendo 100 el color limpio y 0 el negro puro

Volviendo a las muestras hay unos valores interesantes. En la variación oscura la saturación aumentó y el brillo bajó, al contrario de la variación clara donde la saturación bajó y el brillo aumentó.

Esto ya es un patrón repetible:

Al aplicar esto a un solo color ya podemos obtener suficientes variaciones interesantes:

3. El Gris es MUY importante

Una escala de grises es fundamental en nuestra paleta de color. Permitirá que los colores principales sean valiosos y mantendremos la atención del usuario dónde realmente importa. Aquí también podemos tomar el camino fácil y elegir algunos grises entre el negro y el blanco:

Pero de nuevo, son muy aburridos para nuestra experiencia visual. Si utilizamos lo aprendido con el modelo HSB lograremos una paleta mucho mejor. Tomemos los extremos de las variaciones y bajemos su saturación para neutralizarlos un poco:

Con estos extremos ya podemos hacer nuestra paleta de grises. Y definitivamente es mucho más interesante que la anterior:

Con un solo color hemos logrado una paleta versátil, útil y sobre todo Interesante. Podemos arriesgarnos un poco más y tener un color secundario, como cereza del pastel. Ya sabemos los fundamentos:

Lee: las mejores 15 herramientas para generar paletas de colores

4. ¿Y el negro?

La recomendación tradicional nos dice que jamás olvidemos el blanco y evitemos el negro absoluto. Simplemente porque genera un contraste muy fuerte en las pantallas que cansan la vista. Esto sigue sigue siendo cierto sin embargo hay que tener en mente el caso inverso.
La masiva adopción de “versiones nocturnas” en aplicaciones nos obliga a tener presente paletas invertidas dónde el background será negro absoluto, allí tenemos que “evitar” el blanco.

Estos consejos nos ayudarán a crear muy buenas paletas de color en interfaces, aunque siempre nos encontraremos con colores difíciles de manipular. Déjame en los comentarios las dudas y con gusto lo resolvemos. 😊