En un proyecto web, sea o no en WordPress, una de las primeras tareas que tienes que realizar es escoger la paleta de colores que utilizarás en tu web.
Vamos a analizar los colores a utilizar para la web de inteligencia artificial que estoy realizando en html, css y javascript. Nos basaremos en Adobe Color para encontrar distintos esquemas de colores y luego tomaremos una decisión al escoger los colores que finalmente usaremos.
Tomaremos como referencia el color #01012C que fue el elegido cuando encargamos el logo al diseñador. El azul en piscología tiene varios significados y pueden diferir según los autores. Nos quedaremos con los significados que encajan con el proyecto: inteligencia, equilibrio, estabilidad, madurez (azul oscuro) y añadiría un significado asociado al negro que encajaría en el escogido, un azul muy oscuro, elegancia.
Tabla de contenidos,
Rueda cromática
Empezaremos trabajando con la rueda cromática, una herramienta que nos permitirá aplicar distintas reglas de armonía de color.
Análogos
Son colores adyacentes. Normalmente se consideran tres; pero Adobe Color te ofrece hasta cinco.
Monocromáticos
Son variaciones de saturación de un mismo color. Como Adobe Color en todas las reglas de armonía de color trabaja con cinco colores, más colores que los implicados en las reglas de color, añade el resto de colores con variaciones de saturación de los escogidos.
Triada
Son tres colores equiespaciados.
Complementarios
Dos colores que se encuentran directamente uno frente al otro en la rueda de color.
Separación complementaria
Un color y dos colores adyacentes al complementario.
Doble separación complementaria
Se añade a la separación complementaria los dos colores complementarios a los dos añadidos al original.
Cuadrado
Cuatro colores doblemente complementarios.
Compuestos
Es una combinación de cuatro colores que tienen una relación espacial rectangular en el círculo cromático. Es la combinación de dos armonías de color complementarias.
Tonos
Si añadimos o quitamos negro al color del que partimos obtenemos una paleta donde el color permanece en el mismo lugar de la paleta de colores.
Personalizados
Adobe Color también te permite construir tu propia paleta. Como quiero explorar la posibilidad de utilizar el color #DB0EB7 para destacar elementos de la web lo añado a la paleta de colores. También voy a usar el #43E615 que es complementario del #DB0EB7, por si tuviera que destacar dos elementos, el blanco para fondos y #19184F por ser una variación de saturación del inicial #19184F.
Elección de la paleta de colores
Las paletas de colores son indicaciones para el diseñador de los colores que quedan bien y hacen agradable la web. En el caso del color #01012C su complementario es un color ocre que no queda bien en la web. Además quiero usar en portada la foto siguiente.
Por lo que en este caso voy a utilizar el color #DB0EB7 que ofrece un contraste adecuado con el color de fondo #01012C como podemos comprobar con la herramienta Comprobador de Contraste de Adobe Color.
El contraste con el blanco es menor; pero suficiente para nuestros objetivos.
Los colores que usaré en la web serán
- #01012C
- #DB0EB7
- #FFFFFF
Adicionalmente si fuera necesario para fondos #19184F y para destacar #43E615.
Temperatura
A la hora de jugar con los colores podemos también trabajar la temperatura. Para eso usaremos la herramienta de Lunapic.
Cogeremos la foto de portada de la web y la mostraremos enfriándola:
La foto original ya era suficientemente fría por lo que no se nota mucho el efecto. Probemos ahora en aumentar la temperatura al máximo:
En este caso se nota bastante el efecto; pero no es el efecto que busco por lo que mantendré la temperatura de la foto original.
Juguemos ahora con la paleta escogida.
Si la enfriamos quedaría:
y si subimos la temperatura:
Existen unos valores intermedios; pero el resultado no es relevante para esta prueba. En todo caso, vamos a quedarnos con la paleta escogida que refleja lo que quiero transmitir en la web.
Texturas
Las texturas transmiten profundidad a la web, son elementos para fondos con aspecto de madera, roca, etc. Las veo muy adecuadas para webs conectadas con la naturaleza. Para una web sobre tecnología podrían encajar patrones, elementos repetidos.
En el caso de la web que estoy diseñando busco una web limpia, para ello cuando no use el fondo azul oscuro quiero usar el blanco, por lo que un patrón haría perder ese uso de los espacios que quiero reflejar.
Conclusión
Si bien existen herramientas como Adobe Color para ayudarte a escoger una paleta que sea armónica, la creatividad no es una herramienta matemática y si bien tienes que tener de fondo unos principios como las reglas de armonía del color, a la hora de confeccionar tu paleta has de basarte en la estética que quieres transmitir y como encajan los colores con el contenido que vas a publicar.
También puedes jugar con la temperatura y las texturas; pero son elementos de ayuda, opcionales, que no sirven para todos los diseños.
Te invito a que compartas el artículo en tus redes sociales y que respondas a las siguientes preguntas en los comentarios:
- ¿Qué importancia le das a la armonía de color en el diseño web?
- ¿Prefieres que haya contraste entre los colores de la web o prefieres diseños monocromáticos?
