Revista Comunicación

Cómo elegir los colores de tu web

Publicado el 03 abril 2019 por Borja @borjagiron

Elegir el color principal y los complementarios tanto en tu sitio web como en tus redes sociales no es una tarea sencilla, además ha de estar integrada en tu estrategia de marca, ya que es fundamental y parte esencial del viaje de esta.

Ejemplo gestión colores plantilla borjagiron GrowthpressEjemplo gestión colores plantilla borjagiron Growthpress Elegir plantillas WordPress con colores optimizados >>

Cada color tiene unas connotaciones y emite diferentes cosas:

  • Verde: naturaleza, crecimiento, frescura.
  • Rojo: Pasión, peligro, acción.
  • Blanco: inocencia, paz, pureza.
  • Negro: sofisticación, muerte, eternidad.
  • Morado: misterio, reflexión, fantasía.
  • Azul: Seguridad, confianza, serenidad
  • Amarillo: Calidez, alegría, estimulante.
  • Naranja: diversión, modernidad, vitalidad.

Pero no todo es tan sencillo, los colores han de estar alineados con lo que la marca quiere transmitir y se respalden en la personalidad de esta. Más allá de significados tan generalistas.

Entonces, ¿cómo elijo el color en mi estrategia de branding?, es simple, ¿qué quieres transmitir con tu marca, producto o servicio?, y lo más importante, ¿qué conecta mejor con tu público objetivo?.

Una vez respondidas estas preguntas, selecciona una gama de colores y sus complementarios y utilízala para ayudar a reconocer a tu marca.

colores rasgos personalidad marcaColores rasgos personalidad marca Si quieres saber qué es el branding y cómo realizar una estrategia te recomiendo que leas el post ¿Qué es el branding?.

En muchas ocasiones necesitarás testear, especialmente en tus llamadas a la acción. Comprueba qué colores funcionan mejor en las acciones de tus seguidores. Puedes usar por ejemplo Hotjar.

La imagen y el color revela mucha más información y en menos tiempo que leer o escuchar para procesar la misma información.

Según Lewandowski, “no se trata solo de los colores, son los recuerdos de lo que significan esos colores”.

Preferencias de color según género

colores-preferidos-hombresColores preferidos hombres colores-preferidos-mujeresColores preferidos mujeres

En conclusión:

El azul es el color preferido tanto por hombres como mujeres.

El color menos popular para los hombres es el marrón y el de las mujeres el naranja.

Estos son datos generales y un punto a tener en cuenta antes de comenzar, aunque no es aconsejable quedarse aquí y elegir el color y sus complementarios sin más.

El color, a cada persona le produce una serie de emociones pudiendo ser incluso contrarias, los resultados generalistas ayudan como punto de partida, pero es ahí donde empieza el trabajo de autoconocimiento y conocimiento de tus clientes potenciales.

Elegir plantillas WordPress con colores optimizados >>

La importancia del color en tu marca personal

Un estudio llamado “Impacto del color en la comercialización” destaca esta conclusión, hasta un 90% de las decisiones rápidas (en los primeros 90 segundos) sobre un producto y su posterior acción se producen gracias al color.

Las personas prefieren marcas reconocibles de inmediato, y en esto, el color tiene una importancia más que importante.

Los clientes reconocen al 80% una marca gracias al color, con lo cual, si no se elige bien y no representa el propósito de tu estrategia, esto puede llegar a confundir al usuario y dañar la percepción de la marca.

Gracias al color, generamos emociones que debemos de definir previamente en nuestra estrategia, estas son grandes motores de impulsos a la hora de generar acciones.

Cultivando una fuerte conexión emocional con tus clientes tendrás un largo camino recorrido para conseguir mayores ventas, interacción y sintonía con tus clientes.

Te recomiendo que leas el post  4 estrategias de marca personal para conocer algunos tips interesantes sobre como realizar tu estrategia de marca.

A la hora de elegir el color correcto es interesante saber cuál es la reacción del consumidor ideal.

La psicóloga Jennifer Aaker realizó un estudio sobre este tema y publicó un artículo llamado “Dimensiones de la personalidad de marca”, aquí expongo el gráfico explicativo aunque todo va mucho más allá:

¿Quieres crear un blog de Marca Personal y vivir de tu pasión? Te traigo el método definitivo “Triunfa con tu blog“:

  • Paso a paso con vídeos
  • Desde 0 hasta vivir de tu pasión
  • 100% garantizado

Crear blog de
Marca Personal

5 Dimensiones de personalidad de una marca

Sinceridad Emoción Competitividad Sofistificación Robusted

Realista
Familia, orientada, pequeña, pueblo. Atrevido
De moda Emocionante De confianza
Trabajo duro
Seguro Clase alta
Glamorosa
Buena apariencia Al aire libre
Masculino
occidental

Honesto
Sincero
Real Enérgico
Guay
Joven Inteligente
Técnico
Corporativo Encantador
Femenino
Suave Difícil
Fuerte

Saludable
Original Imaginativo
Único Exitoso
Líder
Confidente

Alegre
Sentimental
Amable Actualizado
Independiente
Contemporáneo

El círculo cromático

El círculo cromático o rueda de color es una representación de colores organizados según su relación cromática.

Los colores primarios se colocan equidistantes y luego se crea una relación de colores secundarios y terciarios entre estos.

Círculo cromático coloresCírculo cromático colores

Combinaciones de color para crear una marca personal

Entonces, después de conocer a mi audiencia, conocer mi marca y tener claro qué es lo que quiero transmitir, ahora viene la parte de combinar colores.

Muchos son los usuarios que prefieren paletas de color con tonos similares y utilizar los complementarios como llamadas a la acción, pero hay diferentes formas de combinar colores.

La repetición de una línea de color corporativa fortalece el reconocimiento y seguridad de los clientes en tu marca, los colores son parte de la marca, por ello es importante elegir bien la estrategia.

Para la selección de colores primarios y paleta de tu marca, las marcas suelen utilizar estos esquemas de color:

Colores monocromático complementario análogo triaánguloColores monocromático complementario análogo triaángulo

Monocromáticos, un color en muchos tonos. Se utilizan cuando te quieres enfocar en un esquema muy definido por una personalidad de marca, es muy de estrategias minimalistas, el desafío se trata en diferenciar las llamadas a la acción y que funcionen.

Análogos, pocos colores cerca el uno del otro en el círculo cromático. Estos tienen relaciones armoniosas, son apuestas seguras, pero como el anterior, es difícil destacar o llamar la atención.

Complementarios, colores opuestos en el círculo cromático, sacan lo mejor de cada color cuando están emparejados, son dinámicos y estimulantes.

Triángulos, son estables y ofrecen variedades estimulantes como los complementarios pero pueden llegar a confundir con cuál es el color predominante de la marca.

Generadores de paletas de color online gratis

Estas son algunas herramientas gratuitas para elegir la combinación de color perfecta para tu web o marca personal:

Coolors, aplicación muy intuitiva con una gran paleta de colores atractivos disponible además para iOS y Android.

coloursCoolors

Tutorial Coolors

Adobe Color CC, profesionalidad Adobe, con una gran cantidad de paletas y armonías de colores. Puedes acceder a través de tu cuenta de Adobe.

adobe color ccAdobe Color CC

Colour Lovers, una infinidad de paletas de color, intuitivo y práctico. Muy recomendable.

colourloversColourlovers

También propongo esta herramienta gratuita para saber qué paleta de color estas utilizando en Instagram, Colorkuler.

colorkulerColorkuler

Ejemplos de Combinaciones de colores para tu sitio web

Esta son algunas de las combinaciones de colores que están funcionado bastante bien en los sitios web, aquí adjunto algunas combinaciones con los códigos rgb:

Elegir plantillas WordPress con colores optimizados >>

#c5d5cb #9fa8a3 #e3e0cf #fff
paleta colorpaleta color

#c0dfd9 #e9ece5 #b3c2bf #3b3a36
paleta colorpaleta color

#edd9c0 #c9d8c5 #a8b6bf #7d4627
paleta colorpaleta color

#c9c9c9 #e3e3e3 #9ad3de #89bdd3
paleta-color-12paleta color

#dddfd4 #fae596 #3fb0ac #173e43
paleta color 13paleta color 13

#e8edf3 #e6cf8b #b56969 #22264b
paleta colorpaleta color

#feffff #98dafc #daad86 #312c32
paleta colorpaleta color

#1d2120 #5a5c51 #ba9077 #bcd5d1
paleta-colorpaleta color

#f0eceb #729f98 #283018 #aa863a
paleta-colorpaleta color

#dbe9d8 #c2d4d8 #f2efe8 #b0aac2
paleta-colorpaleta color

#e6af4b #e05038 #f2cbbc #334431
paleta colorpaleta color

#30231d #6a5750 #f6f1ed #b5a397
paleta colorpaleta color

#252839 #677077 #b5b5b7 #f2b632
paleta colorpaleta color

Ejemplos de webs con buenos y malos esquemas de colores

A continuación te dejo un vídeo con varios ejemplos de webs con buenos y malos esquemas de colores:

Conclusiones sobre los colores

Como conclusión, tengo que decir que elegir un color para tu blog o sitio web es una tarea muy importante a la vez que ha de ser meditada y llevada a cabo en base a una estrategia predefinida.

Elegir plantillas WordPress con colores optimizados >>

Todos tenemos un color en la mente cuando pensamos en ciertos valores que queremos transmitir, pero a esto hay que añadirle que debemos de saber que es lo qué perciben nuestros clientes y hacer una sintonía entre marca, producto, valores y clientes.

Si estás realizando un sitio web es fundamental mantener esos patrones marcados en tu estrategia de marca, en el caso de que sea una plantilla WordPress, algunas de estas permiten cambiar y combinar colores.

Esto a priori parece genial, pero recuerda: no toquetees por toquetear sin tener claras las pautas previamente marcadas con unos objetivos predefinidos.

Si no eres diseñador y solo miras el resultado que te guste a ti, es probable que no conectes con tu audiencia lo que podrías hacerlo siguiendo estos pasos antes mencionados.

Una vez dicho esto, espero que elijas los patrones de color que más se ajusten a tus necesidades y las de tu público, es hora de que generes esas emociones precedidas de la acción de tus visitantes.

Si quieres crear tu blog o web, aprovecha estas ofertas de hosting ahora:

  • Webempresa: con un 25% de descuento aquí
  • Raidboxes: con un 33% de descuento aquí
  • BlueHost: con un 50% de descuento aquí
  • SiteGround: con un 62% de descuento aquí

¡Quiero saber tu opinión!

¿Has tenido en cuenta todo esto a la hora de elegir los colores de tu web? ¿Tienes una combinación de colores muy buena?

¡Cuéntame en los comentarios!

La entrada Cómo elegir los colores de tu web se publicó primero en Borja Girón.


Volver a la Portada de Logo Paperblog