Paleta de colores para tu página web

¿Cómo elegir los colores a la hora de diseñar tu página web?

Uno de los principales puntos que un desarrollador web debe definir es la paleta de colores que va a utilizar para su proyecto.

A la hora de trabajar con colores es importante tener en cuenta que éstos, además de decorar nuestra página y atraer la atención del usuario, deben servir para dirigir la mirada de nuestros visitantes y, de alguna manera, comunicarnos con ellos sin palabras para guiarles a través de los contenidos que son más relevantes dentro de nuestro site.

Los colores destacan enlaces, botones, acciones... podemos apostar por combinaciones más impactantes, diseños claros y suaves, pero... ¿cómo elegir la paleta de colores más adecuada para nuestra página web?

Probablemente éste sea el mejor momento para recordar aquello de "para gustos, los colores", sin embargo parecen existir algunas reglas más comúnmente aceptadas de lo que podríamos llamar "buen gusto"; determinadas combinaciones de colores complementarios y/u opuestos que parecen no desagradar a la mayoría de usuarios de una web.

Para enfrentarnos al reto de la hoja de papel en blanco y saber por dónde empezar, nos ha gustado mucho una herramienta gratuita online con la que jugar y probar sobre la rueda de colores, se trata de Color Scheme Designer y el procedimiento que hemos seguido es el siguiente:

• En primer lugar hemos decidido cuál va a ser el color seña o identidad de nuestra web, para ello hemos probado distintas tipografías y colores hasta dar con nuestro logo y nuestro emblema.
• Partiendo de ese color, supongamos que es el código #3B5998 de Facebook, accedemos a la web de Color Scheme Designer para empezar a trabajar sobre él.
• La herramienta permite definir cuántos colores queremos utilizar y de qué manera, es decir, si un único color, dos colores (primario y complementario / primario y opuesto), triadas de colores, tétradas... generando, además, variaciones tonales para cada uno de los colores primario y secundarios elegidos.
• Las opciones de configuración son muy amplias, desde el color de partida, pasando por el ángulo y rango de colores que vamos a utilizar dentro de la rueda, hasta el número de variaciones tonales por cada color que queremos generar.

Una vez hemos terminado, la herramienta permite incluso generar dos previsualizaciones de la paleta de colores obtenida en dos webs diferentes, una con tonos claros predominantes y otra más oscura y con mayor contraste. Cuando hayamos confirmado que hemos encontrado los colores que queremos, podremos exportar el resultado en distintos formatos: XML, tablas HTML + CSS, paleta para GIMP o Photoshop...

Continuando con el ejemplo de Facebook, hemos generado una paleta definida por un color primario y dos complementarios, obteniendo en este caso la siguiente muestra de colores para la web:

Si queréis ver este ejemplo y personalizarlo, podéis acceder directamente a la paleta de colores desde aquí.

Por último, en este enlace hacen un resumen muy completo y esquemático de lo que representa cada color en las distintas culturas y regiones: colores y culturas