Adaptado de nuestro futuro libro Refactoring UI

¿Has visto estos generadores de paletas de colores de moda? Cuando elija un color, ajuste algunos parámetros con frases musicales como "tríada" o "cuarto mayor", y obtenga cinco colores perfectos para su sitio web.



Tal enfoque computacional y científico para elegir el esquema de color perfecto es extremadamente seductor, pero no muy útil.

Bueno, si no quieres que el sitio se vea así:

Lo que realmente necesitas

No harás nada con cinco códigos hexadecimales. Para construir algo real se requiere una paleta mucho más completa.



Una buena paleta de colores se puede dividir en tres categorías.

Gris

Texto, fondo, paneles, elementos de formulario: casi todo esto existe en la interfaz gris.



Y necesitará más colores grises de lo que piensa. Parece que tres o cuatro tonos son muchos, pero muy pronto querrás algo un poco más oscuro que el tono No. 2, pero un poco más claro que el tono No. 3.

En la práctica, es aconsejable elegir 8-10 tonos (más sobre esto más adelante). Esto no es tanto como para buscar la diferencia entre los tonos No. 77 y No. 78, sino una cantidad bastante suficiente.



El negro verdadero, por regla general, no parece natural, así que comienza con un gris muy oscuro y cambia gradualmente a blanco.

Colores primarios

La mayoría de los sitios necesitan uno o dos colores para acciones básicas, elementos de navegación, etc. Estos colores definen el aspecto general del sitio: aquellos que te hacen pensar en Facebook como "azul", aunque en realidad es principalmente gris.

Al igual que con la paleta gris, debe seleccionar una paleta (5-10) de tonos más claros y más oscuros.



Los tonos más claros pueden ser útiles como fondo teñido para cosas como alertas, mientras que los más oscuros son excelentes para texto.

Colores de acento

Además de los principales, cada sitio necesita varios colores de acento para comunicarse con el usuario.

Entonces, para resaltar una nueva función, puede elegir un color atractivo, por ejemplo, amarillo, rosa o azul-verde:



Los colores también pueden ser necesarios para enfatizar diferentes estados semánticos, por ejemplo, rojo para confirmar acciones destructivas:



... amarillo para advertencias:



... o verde para enfatizar una tendencia positiva:



Y algunos tonos de estos colores, aunque deberían usarse con moderación en la interfaz de usuario.

Si crea un diseño en el que el color ayuda a distinguir o clasificar elementos similares (por ejemplo, líneas en gráficos, eventos de calendario o etiquetas en un proyecto), es posible que se requieran más colores de acento.

En general, una IU compleja a menudo requiere hasta diez colores diferentes con 5-10 tonos cada uno.

Definir sombras por adelantado

Cuando se requiere un tono ligeramente más claro o más oscuro, no necesita utilizar funciones de preprocesador CSS como aclarar u oscurecer. Entonces terminas con 35 azules ligeramente diferentes que se ven todos iguales.

En su lugar, defina un conjunto fijo de tonos para elegir.



¿Cómo hacer una paleta así?

Primero elige un color base

Comience con el color base en el que se basan los tonos claros y oscuros.

No existe una forma científica real, pero para los colores básicos y de acento, una buena regla general es elegir un tono que funcione bien con el fondo del botón.



Es importante tener en cuenta que no hay reglas reales aquí, como "comenzar con un brillo del 50%" o similares. Cada color se comporta de manera un poco diferente, por lo que debe confiar solo en su gusto.

Establecer límites

Luego selecciona los tonos más oscuros y claros. Este tampoco es un enfoque científico, pero ayuda a imaginar dónde se usarán los colores y elegirlos de acuerdo con este contexto.

El tono más oscuro generalmente se deja para el texto y el más claro para el fondo del elemento. Una alerta simple es un buen ejemplo donde se combinan estos tonos.



Comience con un color que coincida con el tono del color primario y luego cambie la saturación y el brillo hasta que esté satisfecho.

Completa los espacios en blanco

Si ha decidido los tonos básicos, oscuros y claros, entonces solo queda llenar los espacios entre ellos.

Para la mayoría de los proyectos, necesita al menos cinco tonos por color, y preferiblemente más cerca de diez, para no sentirse avergonzado.

Nueve es un gran número porque se divide bien, lo que hace que llenar los espacios en blanco sea un poco más fácil. Llamemos a la sombra más oscura 900 , la base 500 y la más clara 100 .

Comience eligiendo tonos de 700 y 300 , que están justo en el medio de los dos intervalos: serán el compromiso perfecto entre los tonos en ambos lados.



Esto crea cuatro intervalos más en la escala ( 800 , 600 , 400 y 200 ), que se completan de la misma manera.



Al final, obtienes un conjunto de colores bastante equilibrado, suficiente para realizar tus ideas de diseño.

¿Qué hay de los grises?

Con tonos grises, el color base no es tan importante, pero de lo contrario el proceso es el mismo. Comience desde los bordes y complete los espacios en blanco hasta obtener la paleta correcta.



Elija el tono más oscuro por el color del texto más oscuro en el proyecto y el más claro, el que funciona bien como fondo claro, casi blanco.

Esto no es una ciencia.

No importa cómo lo desee, no debe confiar únicamente en las matemáticas para elegir la paleta de colores perfecta.

Un enfoque sistemático como el anterior es excelente para comenzar, pero no tenga miedo de cambiarlo si es necesario.

Tan pronto como comience a usar sus colores en el proyecto, casi inevitablemente querrá cambiar ligeramente la saturación de un tono determinado o hacer que un par de tonos sean más claros o más oscuros. Confía en tus ojos, no en los números.

Solo trata de no agregar demasiados tonos nuevos cuando sea opcional. Si no limita la paleta, generalmente puede quedarse sin un sistema de color.