¿Cómo cambiar los colores de mi app?

Aquí tienes el rol de cada color, cómo cambiarlos para toda la app y cómo darle su propio color a un solo elemento.

En el panel Colores, los cuatro «Colores primarios» y luego los dos «Colores secundarios» tienen cada uno un rol, el mismo en toda la app. Aquí los tienes en el orden del panel, como en la imagen.

1. El texto principal, los títulos y el texto de los artículos.
2. El acento, la información bajo el título, la dirección de un evento, el icono de una acción seleccionada.
3. El texto secundario, la información sobre el título (fecha, categoría), los autores, el enlace a la lista completa.
4. El fondo de las superficies, las celdas y las cabeceras de widget.
5. Los bordes, alrededor de las celdas.
6. El fondo secundario, el de un widget cuando le das uno.

En una app GoodBarber, un color tiene, por tanto, una función, no un lugar. Si tu acento es azul, todo lo que lleva el acento se vuelve azul, de una pantalla a otra. Y cuando cambias de tono, el texto sigue siendo texto y el fondo sigue siendo fondo. Las zonas de la app, el «Header», el menú, los botones, tienen sus propios ajustes, en el mismo panel. Así, el amarillo de las pastillas de fecha, el 7 de la imagen, viene de «Otros botones».

Aquí tienes dos veces la misma pantalla, y entre las dos solo ha cambiado un color, el acento. A la izquierda, tiene el color del texto, y todo se lee al mismo nivel. A la derecha, pasa al azul de la marca, y con él la información bajo el título del aviso y la dirección de cada ensayo, con su icono. El ojo encuentra enseguida lo que le sirve. Ni los títulos, ni los fondos, ni las fuentes se han movido.

Un solo ajuste llega lejos. En una de nuestras apps GoodBarber, cambiar el color del texto principal repintó 95 ajustes de golpe, en toda la app, sin abrir una sola pantalla. Es nuestro principio «No design burden», para que la coherencia nunca corra de tu cuenta.

Para juzgar tu ajuste, mira la vista previa antes de aplicar, y luego recorre dos o tres páginas. Si el acento salta a la vista donde no debería, seguramente es el elemento que lo lleva el que hay que retocar, en su panel de diseño.

Estas cuatro apps usan los mismos roles y, sin embargo, no se parecen. La diferencia está en los ajustes donde cada una pone su color.

• Eastside Music Workshop pone su azul en el acento, que aquí colorea la dirección de un ensayo, y su amarillo en «Otros botones», que colorean las pastillas de fecha.
• Blandas Astronomy Club pone su ámbar en los ajustes de su barra de pestañas, y aquí solo se enciende la pestaña actual.
• Unit 7 pone su verde fluorescente de fondo en la pestaña activa, un bloque de color liso con su nombre escrito encima.
• Tweed & Cheviot pone su rojo en el acento, pero solo muestra la información bajo el título donde importa, aquí la cifra que hay que retener.

Tú eliges dónde poner el tuyo. Pregúntate qué debe decir, lo que está activo, lo que es nuevo, lo que espera un gesto.

Mi ajuste favorito no se nota. Para el fondo de las superficies, nunca pongo #FFFFFF, sino un blanco ligeramente teñido, #FFF8ED en Eastside, sobre un «Fondo de la app» un punto más oscuro, #EDE7DD. Las celdas se despegan sin sombra, y la pantalla gana textura, como el papel. Para el texto principal, tampoco #000000, sino un casi negro con un toque de color, #23252B aquí. El negro puro sobre blanco da el contraste máximo, 21:1, que me parece duro en una lectura larga. #23252B sobre #FFF8ED mantiene 14,5:1, el doble del nivel más exigente de las WCAG (7:1), y además con más suavidad.

Tres valores, y toda la app sale ganando, los títulos, los textos, las celdas. Es lo que permite el rol, ajustar una vez, para todas partes.

Los colores en resumen

• En una app GoodBarber, los colores de toda la app se ajustan en un solo panel, veinte ajustes, entre ellos seis colores que cumplen cada uno un rol.
• Un color tiene una función, no un lugar, el texto principal, el acento, el texto secundario, el fondo de las superficies, los bordes, el fondo secundario.
• Todo se ajusta en el panel Colores, un tema, la Paleta mágica o un solo color, y luego «Aplicar», que repinta toda la app.
• Un elemento se retoca en el panel de su sección o de su widget, o clave por clave con la extensión gratuita Edición avanzada.
• Ajusta primero el tema, y los detalles después.
• Dos ajustes de diseñadora, nunca blanco puro para las superficies, nunca negro puro para el texto.