¿Cómo se define una paleta de color escalable para un sistema de diseño?
La teoría del color tradicional no es suficiente para definir paletas de color enfocadas en UI. Los diseñadores suelen elegir colores basándose en la percepción, lo que resulta en paletas poco escalables que requieren ajustes constantes mediante prueba y error. Otra práctica común es copiar valores de otros sistemas, siempre opacos en su definición, sin evaluar su pertinencia. En ambos casos, las paletas necesitan ser ajustadas repetidamente para cumplir con las necesidades del sistema de diseño o producto al que deben responder.
En un sistema de diseño, el color se define con múltiples paletas de color (o swatches), que son una variación ordenada de colores (pasos o steps) con una función específica.
Para este proyecto, me centraré en cómo definir una paleta y sus steps, dejando fuera la función, semántica y aspectos tácticos de organización y nomenclatura.
Repasando algunos sistemas de diseño, me enfoqué en la paleta de neutrales para limitar las variables. Estas son sus paletas y valores:
Al normalizar las paletas a sus neutros e ignorar el Hue y la Saturación, el valor que determina cada step es la luminosidad. Entonces, los steps en una paleta neutral de color son puntos en una progresión de luminosidad (gradiente).
Analizando la distribución de steps para cada una de las paletas y aplicándolas a un mockup de prueba, identifiqué algunos hallazgos interesantes:
Una distribución simétrica permite que tanto el light mode como el dark mode mantengan un mismo look and feel.
Una distribución más densa en los extremos y menos poblada en el medio aprovecha mejor la cantidad de steps en la paleta para los usos más comunes.
La distribución afecta directamente el contraste general de las vistas, por lo que se puede tomar como una decisión de branding.
Al usar blanco puro y negro puro como parte de la UI, es importante que el step con menor luminosidad tenga al menos un valor de 8 para que se diferencie del 0. Esto depende de las pantallas; una zona segura es mantener el color más luminoso en 98 y el menos luminoso en 10.
Existen funciones matemáticas muy usadas en motion graphics que definen interpolaciones. De estas, la función cuadrática es la que mejor describe el tipo de progresión que los hallazgos sugieren.
Sin entrar en los detalles matemáticos, la curva Quad aplicada a la luminosidad para 11 steps nos da los valores: 98, 96, 90, 81, 67, 50, 36, 24, 16, 12, 10
La paleta mantiene un look & feel general en elevaciones, superficies y contrastes tanto en dark mode como en light mode.
El método que generan esta paleta son replicables en las propiedades “Hue” y “Saturation”.
La misma metodología tiene la posibilidad de modificar el número de steps para proyectos más pequeños.
La misma metodología permitiría adaptar la curva a una de las mencionadas o incluso una personalizada, esto habilita trabajar el contraste global entre elementos y generar paletas con carácter diferente sin perder la funcionalidad.
Cowlors tiene el potencial de ser un plugin de Figma que ayude a crear paletas más efectivas y personalizables.
Otro análisis sobre el color para UI que hice hace unos años:
