Antes que desarrollador web, fui diseñador gráfico, así que soy muy consciente de la importancia que tiene el color en cualquier diseño o desarrollo. Elegir la combinación de colores perfecta no solo mejora estéticamente tu web, si no que incluso puede incrementar tus ventas o tus conversiones.

Y todo gracias a la psicología del color, que también es aplicable a las webs.

Si ya has aprendido a instalar WordPress en tu hosting, puede que ahora el tema de qué colores usar en tu web te está trayendo más de un dolor de cabeza. Así que voy a darte algunos consejos y a mostrarte algunas herramientas para que consigas la combinación perfecta de colores para tu web.

La psicología del color

Quien más y quien menos sabe ya que los colores despiertan en los personas diferentes reacciones y emociones.

Las empresas mas grandes no pestañean a la hora de gastarse miles (o millones) de euros en busca de una identidad de marca adecuada para su empresa y su target. Y no solo en el logo. Detrás del color de sus productos, sus envases, o su web, hay cientos de horas de estudios y análisis.

Y es que los colores que uses en tu web van a formar parte de tu imagen de marca, y no vale con poner tu color favorito. Necesitas usar unos colores que generen una respuesta o unos sentimientos favorables en tus potenciales clientes.

Así que dependiendo de lo que quieras transmitir, deberás usar unos colores u otros. Piensa en tu marca, en tu público, y en lo que quieres decirles, y obtendrás el color que debes usar (o al menos, podrás descartar unos cuantos).

Como estudios sobre el color se han hecho ya cientos de miles, te voy a mostrar esta excelente infografía de blog.red-website-design.co.uk para que veas claro el significado y las reacciones (aunque sean a nivel inconsciente) que despiertan en nosotros los diferentes colores.

Viendo lo que significa cada color entenderás porqué ciertas marcas se han decantado por esos colores en concreto.

Resumiendo un poco:

• Rojo: No solo es el color del amor, también es el color de la fuerza o el peligro. Sin duda un color muy enérgico.
• Naranja: Un color muy alegre, que transmite entusiasmo, éxito, felicidad y creatividad.
• Amarillo: El color del verano, pero también relacionado con la inteligencia y la felicidad.
• Verde: El color de lo ecólogico y de la naturaleza, pero también de otros elementos muy diferentes como la salud o el dinero.
• Azul: Un color agradable y tranquilo que le gusta a todo el mundo, quizás por eso lo usan casi todas las redes sociales. Relacionado también con el mar y el aire.
• Morado: El color del misterio, pero también de la sofisticación, la riqueza o la ambición.
• Rosa: El color rosa se sigue relacionando con temáticas femeninas, románticas e inocentes.
• Negro: El color del poder y el lujo (y es que las tarjetas Black, son black por algo…).

A tener en cuenta

Si ya tienes una marca, y estás usando unos colores determinados, lo lógico es que la web también use los mismos colores.

Si aún no tienes imagen de marca y estás en la búsqueda de la paleta de colores perfecta, no solo tienes que tener en cuenta los significados o las sensaciones que los colores transmiten. También tienes que tener en cuenta el contexto en el que los va a usar.

Por mucha seriedad que quieras transmitir, no vas a usar colores negros en un parque infantil, del mismo modo que no usarías los colores del arcoiris en una funeraria.

Y tienes que tener en cuenta también el formato. Que una combinación de colores quede bien en un flyer o una camiseta, no significa que vaya a quedar igual de bien en una web. Piensa en los botones, imágenes o vídeos que vas a incluir en tus páginas, y de qué forma te gustaría que se mostrasen.

Un flyer en amarillo y verde puede quedar resultón, pero a lo mejor no es lo más conveniente que toda tu web sea verde con un fondo amarillo.

Cuantos colores usar en tu web

Tras echar un vistazo a la infografía y teniendo en cuenta estos últimos consejos, seguramente ya tienes en mente un par de colores para tu web.

Yo te recomendaría justo eso, que sean 2 colores principales para las llamada la acción. Si usas solo un color va a ser complicado que logres destacar elementos importantes de la web, como los botones de compra o los formularios.

Nota: Voy a dar por sentado que como fondo vas a usar un par de tonos entre blancos y grises, por el bien de tu web espero no equivocarme.

Y si usas 4, 5 o más, tu web se va a convertir en un batiburrillo de colores, en el que te va a ser imposible hace destacar nada y vas a hacer que tus visitas salgan de tu web con dolor de cabeza y odiándote mucho.

Piensa que tu web no deja de ser un escaparate, como el de cualquier tienda, y tienes que captar la atención del espectador y dirigir su mirada y sus acciones a donde a ti te convenga, ya sea un botón de compra, un formulario de contacto, de suscripción, etc.

¿Y cómo se consigue esto?

Observa por ejemplo la web de Pingdom. Aunque su color principal es super llamativo, consiguen que la vista se te vaya a los botones verdes. Son sus llamadas a la acción. Es a donde quieren que vayas: la prueba gratuita de 14 días y el registro.

Creando la paleta de colores para tu web

Que en la web tengas uno o dos colores principales, no significa que ya únicamente puedas usar esos dos colores. Ahí es donde entran las paletas de colores.

¿Y si ya tengo mi color, para qué quiero una paleta? Te estarás preguntando…

Imagina que ya has pensado que tu color va a ser el verde. Lo vas a poner en los títulos de tu web y en los botones de los formularios. Ok. Pero, ¿qué tal si quieres añadir a ese botón un efecto al pasar el ratón por encima? ¿O si quieres destacar un elemento dentro del menú verde que acabas de crear?

O puede también que tu color sea un amarillo muy intenso, y necesitas poner un banner en amarillo pero no quieres que a tus visitas le exploten los ojos…

Pues para eso están las paletas de colores. Para que puedas elegir un color que se lleve bien con el verde, o un tono de amarillo más suave que no sea molesto a la vista.

Eso sí, hay que reconocer que no todo el mundo ha nacido con el don de saber combinar colores….

Por suerte tenemos Internet, y como en Internet hay de todo, pues también existen herramientas fantásticas para crear paletas de colores realmente bonitas.

Estas son mis favoritas, y no porque sean gratis 😛

Colourlovers

Una web donde los usuarios crean sus propias paletas, y el resto de la comunidad las ve y las puede añadir a sus favoritas. Es como una red social de colores y paletas.

Si a ti no se te da bien crearlas, puedes navegar por la web para buscar una que te guste. La web incluye un buscador por si quieres buscar una paleta con algún color en concreto.

Paletton

Esta herramienta fue de las primeras que usaba, y aunque ahora no es mi primera opción, sigo pasando por ella de vez en cuando.

Es la típica rueda que puedes ir girando para buscar colores similares, colores complementarios… También puedes añadir directamente el código hexadecimal de tu color y ver cuáles hacen juego con el.

Adobe Color CC

Si estamos hablando de colores, Adobe tenía que salir por algún lado. Y lo hace con esta herramienta, muy similar a la anterior, pero con un poco más de posiblidades a la hora de jugar con las tonalidades. O al menos, algo más intuitiva.

Photocopa

Si tienes una foto que te encanta por sus colores, y te gustaría usarlos en tu web pero acabas de dar con los tonos o la combinación exacta para tu web… pues esta herramienta es tu solución.

Photocopa, que forma parte de la web de Colourlovers, te permite subir una foto y automáticamente te va a sacar los colores más importantes de ella, creándote además varias paletas con combinaciones de ellos que tú mismo también puedes editar.

Ya sabes, si tienes una foto super guay, y más o menos con los tonos que quieras, prueba a subirla a Photocopa. Quizás te sorprenda y encuentres ahí tu paleta.

Coolors.co

Un generador de paletas que puede ser hasta divertido. Entras en la web y pulsando la barra espaciadora te va creando una paleta tras otra. Si hay un color en concreto que te gusta puedes bloquearlo y seguir generando paletas sin perderlo, o puedes hacer pequeños ajustes en el tono de un color que te guste pero que quieras cambiar un poco.

Con esta herramienta es todo un poco más aleatorio, pero oye, ¡mola!

Así que nada, espero haberte ayudado a elegir y combinar los colores perfectos para tu web, ya que como te he comentado, no es un tema para tomárselo a la ligera. En ellos puede que esté la clave de tu éxito.