Cómo generar paletas de colores para diseño web y app - uiFromMars

Cómo crear paletas de color para diseño UI

Escrito por Cris Busquets. Publicado en Diseño UI

Cómo crear paleta de colores - uiFromMars

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 crear 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.

Una paleta de colores ideal debería tener 10 colores, contando los 4 semánticos.

Más en detalle, son estos:

  • 1 Principal
  • 1 Acento
  • 4 Semánticos (información, alerta, éxito y aviso)
  • 4 Neutros, que se obtienen del primario

Pasos para crear una buena paleta

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:

Color principal (base) paleta

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í:

Paleta color - Principal

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:

Paleta color - Acento

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):

Paleta color - Semánticos

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:

Crear estilos compartidos Sketch

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:


Deja tu opinión

  1. Diego

    ¡Excelente artículo!

    ¡Muchas gracias!

Deja tu comentario

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