Paletas de colores para UI: créala en solo 2 pasos

Escrito por Cris Busquets. Publicado en Diseño UI

Paleta de colores para diseño UI

El color es una parte muy importante de cualquier diseño: por sí solos son capaces de transmitir emociones, tanto positivas como negativas, y un mal uso puede romper por completo el diseño.

En este artículo te explico cómo puedes crear la paleta de color ideal para tu próximo diseño 🙂

¡Vamos allá!

Cómo crear una paleta de colores

En la mayor parte de las ocasiones los proyectos ya vienen «con colores»: o bien porque la marca ya está diseñada, o porque ya existe alguna preferencia por parte del cliente o stakeholder.

Así que empezaré a explicarte cómo crear la paleta suponiendo que ya existe un color base del que partir.

¿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. Lo compré cuando estudiaba diseño y sigo consultándolo de vez en cuando.

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 color principal
  • 1 color acento
  • 4 colores semánticos (información, alerta, éxito y aviso)
  • 4 colores eutros, que se obtienen del primario

Pasos para hacer una buena paleta de colores

El color principal y los neutros

En este caso utilizaremos este color, que es «morado-casi-negro»: #45475E. Como verás en el vídeo de abajo, es un color con el que parece que no puede diseñarse nada… pero espera 😉

Para crear los neutros lo que haremos es cambiar el modo de color a HSB (Hue – Saturation – Brightness).

Modificando los valores de saturación (S) y brillo (B) y sin modificar el tono (H), lo que haremos será encontrar colores relacionados con nuestro color principal sin modificarlo.

 

Los hexadecimales resultantes son: #7D80AB, #D4D7FF y #EDEEFF.

Ojo: evita irte al negro puro. Hacerlo hará que disminuya la accesibilidad del diseño, porque reduce la legibilidad: los ojos del lector se cansan más fácilmente y el resto de colores se verán dominados por el negro.

De los colores obtenidos, los dos más claros de abajo suelen servir para usar en fondos, separar bloques de contenido u otros elementos de UI como líneas y sombras.

Color de acento

El color acento es, como indica su nombre, el color para añadir énfasis. Suele utilizarse para el botón principal, barras de progreso, el foco de los campos del formulario, bloques de contenido, etc.

Tomando como base nuestro «morado-casi-negro» (#45475E), el siguiente ejercicio es escoger un color utilizando la teoría del color.

En resumen, suelo utilizar esta herramienta y habitualmente me quedo con:

  • Complementario
  • Split complementario
  • Análogo

En este caso, no utilizaré el color original (#45475E), sino uno de los que han salido del primer ejercicio, #D4D7FF.

Paleta de color diseño UI: Split complementario

En este caso he escogido el split complementario.

¿Y cómo queda esto en un diseño? Pues así 😉

Split complementario: paletas de diseño UI

Autor: Outcrowd.

 

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 es importante que reserves estos colores para comunicar el tipo de mensaje que te comentaba en la lista anterior.

Eso sí: cuando escojas los colores semánticos trata de modificar solo el tono (H). Evita modificar mucho la saturación (S) o brillo (B) porque creará combinaciones de colores que no casarán entre sí.

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:


Más artículos que te interesarán:

Design Tokens: qué son, ventajas y cómo diseñarlos e implementarlos

9 trucos para mejorar tu workflow y ahorrar tiempo con Figma

Los mejores 9 plugins de Figma para diseñador@s


Deja tu opinión

  1. Diego

    ¡Excelente artículo!

    ¡Muchas gracias!

  2. José Luis

    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!

    1. Cris Busquets

      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 🙂

  3. Alexander Fernandez

    Excelente trabajo. gracias por la información.

Deja tu comentario

Tu email no será publicado. Los campos con asterisco son obligatorios.

Únete a 2.546 diseñador@s y recibe los mejores contenidos para crecer.


No te enviaré spam. Recibirás un correo semanal y descuentos promocionales. Podrás darte de baja cuando quieras.