Cómo crear paletas de color para diseño UI
Este artículo tiene todo lo que necesitas para poder generar rápidamente una paleta de color para tu próxima web o app.
Así que si quieres comunicar mejor, destacar contenidos y transmitir una imagen de marca correcta, sigue leyendo.
Cómo generar una paleta de colores
En esta ocasión trabajaremos con un color concreto como base, que es el que en un proyecto real nos vendría dado por el departamento de marketing o marca.
¿Cómo debe ser una buena paleta?
Estoy convencida de que alguna vez te habrás descargado una aplicación o llegado a alguna web en la que había «algo» que no parecía estar bien.
Si no era la tipografía, me apuesto lo que quieras a que probablemente era la paleta de colores: muchas marcas optan por empezar a poner colores sin ton ni son para destacar diferentes tipos de contenidos, cuando en realidad lo que están haciendo es hacerlo todo más confuso.
Naturalmente una buena paleta debe tener en cuenta la psicología del color, ya que es un aspecto importante que condiciona mucho nuestra percepción.
Si te interesa este tema en concreto, te recomiendo que te leas el libro ‘Psicología del color‘ de Eva Heller. Es lo más completo que encontrarás a este precio.
En resumen, la paleta de colores ideal debería tener 10 colores, contando los 4 semánticos.
Más en detalle, son los siguientes:
- 1 Principal
- 1 Acento
- 4 Semánticos (información, alerta, éxito y aviso)
- 4 Neutros, que se obtienen del primario
Pasos para hacer una buena paleta de colores
El color principal probablemente vendrá dado por el departamento de marketing o de marca, que lo cogerán directamente del logotipo de la empresa.
El color principal (base) y los neutros
En este caso utilizaremos el azul eléctrico #5012DD. Para crear los neutros lo que haremos será modificar los valores para aclararlo (tinte) u oscurecerlo (sombra), pero sin tocar el color.
Para hacerlo, nos moveremos exclusivamente en la paleta de color que nos muestra #5012DD:
Aquí hay que evitar un error clásico, que es irse al negro puro. Hacerlo hará que disminuya la legibilidad, los ojos del lector se cansen más fácilmente y el resto de colores se vean dominados por el negro.
El resultado que obtenemos es el siguiente. Naturalmente podemos añadir más de cuatro pero para no hacer infinitas gradaciones, de cara al ejemplo lo dejaremos así:
Los hexadecimales son #1B0748, #9C79EE, #CEC5E2 y #F1EDFA.
Color de acento
El color de acento se utiliza para añadir énfasis y resaltar información: botones, texto, barras de progreso, inputs de formulario, etc.
Tomando como base nuestro azul (#5012DD), el siguiente ejercicio es escoger un color utilizando la teoría del color.
No te preocupes, puedes hacerlo automáticamente utilizando esta herramienta. En este caso utilizaremos el complementario, #DD9612:
Eso sí, jamás hay que escoger este color «por inspiración», ya que debe tener cierta relación con el principal, ya sea porque son complementarios, terciarios, etc.
Colores semánticos
Estos colores están presentes en todos los diseños, ya que psicológicamente envían los siguientes mensajes:
- Rojo: errores, peligro y alertas
- Verde: éxito, seguridad y correcto
- Amarillo: alerta y precaución
- Azul: información
No hay un estándar sobre qué matiz exacto deben tener, pero te recomendaría no salirte de las características de tu color principal y mover únicamente el tono (el «arcoiris» de abajo):
Los hexadecimales son, por este orden: #12A5DD, #DD2C12, #80DD12 y #DBDD12.
Paletas de colores y Sketch
Una vez tengas la paleta hecha, es hora de crear los estilos compartidos. Funcionan prácticamente igual que los estilos de texto.
Simplemente debes seleccionar la capa que contenga el color que quieras añadir y hacer clic en No layer style del panel de la derecha:
Allí te permitirá añadir un nombre al color. Te lo guardará automáticamente, así que solo hay que repetir el mismo proceso hasta tenerlos todos 🙂
Nomenclaturas y estilos compartidos
No existe un estándar concreto, pero yo acostumbro a guardarlos así:
- Color / Primary 100
- Color / Primary XX, donde XX es un número que a medida que se acerca a 0 indica un color más claro
- Color / Accent 100 (por si en un futuro le añades tonos neutros)
- Color / Semantic / Error (y así con los tres restantes)
Conclusiones
Obviamente este no es el único método para crear paletas de colores, pero sí es el que mejor me ha funcionado después de años tratando de dar con un sistema que me permitiera obtenerlas sin sufrir más de la cuenta.
Si quieres profundizar más en este tema tan complejo, te recomiendo que te hagas con estos libros:
- ‘Psicología del color: cómo actúan sobre los sentimientos y la razón‘, de Eva Heller
- ‘Interacción del color’, de Josef Albers (ex profesor de la Bauhaus).
¡Excelente artículo!
¡Muchas gracias!
Hola Cris!
Enhorabuena por tu artículo, creo que resuelve muchas dudas.
Me gustaría hacerte llegar varias dudas que tengo en cuanto a temas de color, ¿qué podemos hacer cuando el color primario de una marca es un verde casi ilegible (#bfda2c) al contraste sobre blanco, cuando hay que diseñar una aplicación en modo light?
Y otra cuestión, cuando sacas los colores neutros, ¿qué valor son los que tocas en el HSB? yo siempre lo he hecho tocando el brillo, en tu articulo no se entiende muy bien lo que haces para conseguir estos.
Enhorabuena y un saludo!
Hola José Luis,
En este caso que me comentas, habría que tratar de suavizar un poco el verde. Por ejemplo, este sí funcionaría: #6E7E16. Obviamente es más oscuro, pero el que me proponías no funcionará nunca sobre blanco.
Cuando saco los neutros lo que suelo modificar es saturación y brillo, pero nunca el matiz.
Espero haberte resuelto las dudas 🙂