Una guía paso a paso para diseñar una escala de colores para su sistema de diseño, que le ayudará a evitar complicaciones en la elección del color.
Cualquier escala de colores tiene 3 tipos de colores:
Colores de la marca
Ven del negocio y construirás todas las escalas de colores basadas en los colores de la marca.Colores de soporte
Peligro, color de éxito, etc.Neutrales (escala de grises)
Fondo, texto, etc.
Empiece siempre a diseñar a partir de los colores de la marca, porque todos los demás colores se basarán en ellos.
Tomemos el azul como color de marca.
La mayoría de las aplicaciones de diseño usan como predeterminado Maleficio valor del color. Para la paleta de colores, debes usar HSB.
h — Tono
S — Saturación
B — Brillo
HSB nos da un mayor control del color, lo que nos ayudará a crear fácilmente nuestra paleta.
La cantidad de colores de soporte depende de su aplicación. Si necesita alertas de éxito, agregue el color verde de éxito. Si no, no le dediques tiempo.
Como ejemplo, digamos que en nuestra aplicación necesitamos colores de peligro, atención y éxito.
Para mantener la coherencia de la interfaz, asegúrese de que la saturación y el brillo se mantengan cerca de los colores de su marca.
Basándonos en los colores tenemos que crear los colores más oscuros y los más claros, jugando con la Saturación y el Brillo.
Si no quieres que te importe, puedes usar Saturación = 8 y Brillo = 100 para los más ligeros y Saturación = 100 y Brillo = 24 para los más oscuros.
Lo mismo para los neutrales. Toma el color de tu marca y hazlo gris.
Si necesitas más colores, puedes crearlos en el medio.
Error común
La mayoría de los diseñadores utilizan una escala de 100 a 900 colores para cada color en la interfaz y, en mi opinión, eso es un error.
¿Realmente usarías 9 tonos diferentes en una sola interfaz? Probablemente no. En realidad, usarás de 3 a 4 tonos de color y otros simplemente acumularán polvo o, peor aún, se usarán y crearán un caos de colores en una interfaz donde se usan 100, 300, 500 y 900 en un solo lugar, y 100, 400. , 700 y 800 en otro.
Tienes que crear colores para tu sistema de diseño no basándose en una hermosa paleta de colores, sino más bien en el uso del color.
¿Cómo crear la paleta de colores adecuada?
Por ejemplo, queremos crear una paleta de colores peligrosos (rojo):
Pregúntate ¿dónde se utilizará esta paleta de colores?
Digamos, para alertas.Qué átomos ¿Tenemos en alerta?
Tenemos texto, título h4, ícono de alerta, ícono de cruz y fondo.¿Qué colores necesitamos para ello?
Necesitamos colores oscuros para el texto, el título y el ícono de la cruz, rojo intenso para el ícono de alerta y el rojo más claro para el fondo.
Nombrar colores
Mi método favorito para nombrar colores, fuentes, íconos y estilos es fichas de diseño.
Fichas de diseño son la única fuente de verdad para nombrar y almacenar decisiones de diseño, como color, evaluación, trazo, etc.
¿Qué les dicen Red100, Red500 y Red900 a sus compañeros de equipo? Correcto, nada. Por eso usamos fichas de diseño. En nuestro caso, Red100 se convierte en color.background.danger, Red500 en color.icon.danger y Red900 en color.text.danger, color.headline.danger, color.cross.danger.
Puede explorar más sobre los tokens de diseño aquí: https://atlassian.design/tokens/design-tokens