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