Como elegir colores para una página web

Guía de estilos

Si ya tienes una guía de estilos de marca definidos, habrá que añadir varios colores para crear una paleta completa. En diseño web se necesitan muchos más colores de las que a priori parece. En caso de que no tengas una, habrá que crear una guía de estilos de marca desde el principio.

Si aún no conoces la teoría básica sobre colores, mira ese post primero.

¿Qué es y por qué es importante crear una paleta de colores?

Una paleta de colores es un conjunto de colores que funcionan bien juntos y se usa para dar forma a una marca. Ayuda a transmitir la personalidad de la marca y a comprender la jerarquía visual del diseño, a la vez que facilita la navegación por la web y a entenderla.

Existen muchas variedades de tipos de paleta, pero en diseño web casi siempre se usan 2 tipos: Monocromática y Complementaria.

Monocromática

Usamos diferentes tonalidades de un solo color. Por ejemplo, desde un azul casi blanco hasta un azul casi negro. Es difícil equivocarse y son una opción segura. Son interesantes para diseños web minimalistas. El problema que tienen es que pueden ser un poco aburridas y los CTA (llamadas a la acción) no destacan tanto.

Complementaria

Mi favorita. Es la que utiliza mi página web.

Utilizamos colores ubicados en el lado opuesto de la rueda cromática para conseguir contrastes y un diseño más divertido. Sigue siendo relativamente fácil de combinar y nos quitamos el problema de que los CTAs no destaquen.

Crear una paleta de colores para tu marca

Una paleta de colores para diseño web es bastante más compleja de crear de lo que parece. Habitualmente acabas necesitando muchos más colores de los que parece en un principio.

A la hora de distribuir los colores, se suele usar la regla del 60 - 30 - 10 típica del diseño gráfico y de interiores para garantizar un equilibrio visual.

En torno al 60% será el color para el fondo, para el cual usamos colores neutrales claros.

En un 30% neutrales oscuros o el primario para el texto y enriquecer el diseño.

El color de acento en un 10% para resaltar y dirigir la atención de los usuarios a donde nos interese como botones para comprar, que se suscriban, etc. Aquí usamos el color más llamativo y brillante de la paleta. (Un naranja, amarillo, azul claro...)

Me gusta tener esta regla como referencia, pero no hay que obsesionarse con los porcentajes. Simplemente, piensa que debes de tener un color dominante, uno que este presente y otro para acentuar las llamadas a la acción que debes de usar de manera puntual. Ten en cuenta que si acentúas demasiados elementos, dejarán de llamar la atención.

Para e-commerce y webs orientadas a conversión, yo recomiendo seguir las reglas en el 99% de los casos.

En webs orientadas a generar marca y generar un impacto rompedor puedes permitirte jugar con las reglas, pero para ello primero has de conocerlas bien.

Vamos con los colores para una paleta completa:

Recuerda que vamos a sacar muchos colores, pero no los usaremos todos, es necesario sacarlos porque no sabemos cuáles usaremos de antemano.

Escala de neutros

Necesitamos unos 8 tipos de grises, desde el casi blanco hasta el casi negro.

Casi todo lo que vemos en una interfaz web es gris, desde un gris casi blanco hasta un gris casi negro (formularios, fuentes, fondos, cajas, divisores, etc.)

El blanco puro y el negro puro no se deberían de usarse juntos. El blanco brilla demasiado y puede llegar a ser molesto para la vista, y en cuanto al negro puro, queda muy poco natural. Además, el contraste es demasiado fuerte entre ellos y causa fatiga ocular.

Una buena práctica para dar coherencia al diseño, es añadirles un poco de color primario tanto al blanco como al negro para que tengan un toque sutil al color de marca.

Para sacar los grises suelo utilizar los preestablecidos del framework de Tailwind CSS. Según el color primario elegido, me decanto por uno cálido como Stone o uno frío como Stone y en caso de duda, usa el neutral.

Primario

Aunque no vayamos a usar todos, me gusta empezar con una escala de 6 - 10 entre variaciones de tonos claros y oscuros para tener donde elegir.

Es el color que respira la página. Se suele usar para darle color a elementos, fondo de sección, etc. Si piensas en McDonald's sería el rojo o el azul en Facebook.

Podemos sacar las tintas y sombras de diferentes maneras. Usando un generador de paletas web o plugin de Figma.

Hay que tener cuidado porque a veces salen colores apagados y habrá que hacer pequeñas modificaciones. Para proyectos con presupuesto alto, es mejor hacer la paleta a mano desde 0, pero explicarlo me daría para un post entero...

Secundario

Es opcional y debería de complementar al color primario sin competir con él. En caso de usarlo, lo usaríamos para detalles de la interfaz.

Terciario

También opcional para complementar la paleta.

No es muy común usar tantos colores, pero en caso de hacerlo, optaría por colores que compartan una saturación y luminosidad para así ganar en coherencia y armonía visual. Por ejemplo, los tonos pastel son una buena opción para este tipo de paletas.

Acento

Una escala de al menos 3-4 entre tonos claros y oscuros.

Lo usaremos para darle efectos a los distintos estados de las llamadas a la acción, formularios y botones según sus estados (hover, focus, active).

Es el que usaremos para dirigir la atención de los usuarios a los elementos que más nos interesen. Dale un uso esporádico para que no pierda eficacia. Como norma general, debe ser de color llamativo y vibrante.

Soporte para alertas

Es momento de incorporar cuatro colores que representan diferentes estados o alertas. Son colores que son universalmente aceptados y entendidos intuitivamente por todos sin necesidad de pensar. A excepción del azul, son los colores que vemos a diario en los semáforos.

Necesitamos una escala de entre 2 a 4 tonos para cada color (claro, normal, oscuro).

A mí me gusta usar los diferentes tonos para los titulares y el cuerpo, así que suelo usar 4, aunque depende del diseño cualquier combinación nos vale.

Error o Peligro

El color rojo, lo usaremos para advertir a los usuarios de que han cometido un error o se les presenta una acción critica que suele ser irreversible, como borrar permanentemente un mensaje.

Informativo

El color azul, lo usaremos para informativas adicional, consejos o instrucciones para los usuarios.

Éxito

El color verde, lo usaremos para comunicar a los usuarios que la acción realizada ha tenido éxito a modo de confirmación.

Aviso

El color amarillo, lo usaremos para comunicar a los usuarios de alguna acción que requiera cierta precaución o a modo de advertencia.

Recuerda que para crear una paleta de colores eficiente, deberás de tener en cuenta la psicología y teoría de los colores, la accesibilidad y los colores corporativos de tu marca.