Los colores en tu web son más importantes de lo que pueda parecer. Influyen principalmente en la usabilidad, más concretamente en la claridad y visualización de los elementos y también en generar un mayor CTR en los call to actions que usemos. Todo esto tiene que ver con como percibimos los colores y el contraste generado.
El color principal de tu web enfocado a conversión
Tu color principal de marca debe quedar claro y estar
presente en tu web de una forma muy notoria, parte del branding es que tu marca
esté bien representada a través de sus elementos principales (color, mensajes,
logotipo, usos, tipografías, etc).
No obstante, se suele recomendar a nivel de CRO que no solo
esté un color visible o que tampoco tendamos a hacer una web muy black/White con
esa idea de limpieza que tanto ha calado a nivel de diseño que Apple instauró y
que muchas webs han querido trasladar para tratar de reflejar valores de minimalismo
e incluso “premium”.
Por eso, en pasos anteriores en una construcción de marca o rediseña de la misma, el color principal es fundamental. Normalmente deberíamos buscar cierta diferenciación en el mercado respecto a otros competidores con los que nos puedan asociar y realmente seamos muy diferentes. Pero además sería bueno que intentemos analizar estos puntos:
- Color que llame la atención
Un color que pueda generar algo de impacto siempre será positivo a la hora de llamar la atención.
- Que pueda ofrecer un buen contraste
El contraste es clave para la usabilidad y claridad de los contenidos. Así como su uso en diferentes formatos web o soportes publicitarios.
- Mis colores pueden evolucionar acorde a mis valores
Hemos visto evoluciones de logos y marcas, incluso de colores. Hay varios ejemplos como el paso de Samsung de azul a blanco buscando algo más premium, o Mcdonals que cambió el rojo de fondo por un verde para generar una mayor asociación con lo green y alejarse de competidores como Burguer King. También está el caso de Just eat, que fue rojo en un inicio y cambió a naranja para diferenciarse y destacar más.
Los colores secundarios, algo que debe existir
Normalmente después del color principal, debe haber colores secundarios. En web se usan mucho para los CTA, si toda tu web es de un color y el CTA está en otro, resaltará más, sencillo pero muy funcional. Al igual que para destacar banners intermedios, avisos o mensajes que pueden estar encuadrados en el color secundario, esto hace que el ojo humano vaya rápidamente a ver eso, ya que resalta y es la primera reacción que tenemos.
También puede haber otro color más, que se usa en menor medida (más de 3 ya sería muy poco armonioso y generaría caos). Este otro color puede estar para otros usos menos importantes y que puedan resaltar menos pero esté presente. También es común ver una variación del segundo color principal en otra tonalidad, por ejemplo, CTA en rojo fuerte y otro contenido de servicio encuadrado en rojo más apagado.
La función de principal de todo esto es jerarquizar
contenidos, es decir, mostrar al usuario que es más importante y que menos, de
esta forma estamos influenciando y recomendando que tienes que hacer en mi web,
orientado a conversión.
El significado de los colores para tu web
Todo debe tener coherencia, esto quiere decir que hay colores que ya tienen un cierto significado, entiendo por ejemplo que una web de color rojo, va a estar muy enfocado en ofertas y es que el rojo es color que predomina a la hora de poner una oferta.
Por eso, hay cosas que debemos tener en cuenta. Los mensajes positivos deben ir en colores de aprobación y no tan chillones, hablando de un verde por ejemplo. Los mensajes de impacto, oferta, etc podrán ir en un color rojo y así con el resto de colores.
La diferencia entre colores fuertes o colores más suaves, también tendrán que ir en consonancia de lo que queremos comunicar. Las cosas más importantes deben destacar más con colores y contraste de alto impacto y las cosas secundarias en colores más planos y más estéticos con el contenido.
La importancia del contraste para convertir
Que un color se vea más o menos va a depender del contraste, no es lo mismo amarillo sobre blanco que amarillo sobre negro, es obvio. De ahí que debo encontrar las mejores asociaciones con el color principal de mi marca, ya que luego será muy fácil integrarlo en todos los formatos.
La mayoría de colores sobre fondo negro potenciará el valor de los colores respecto al blanco. Luego hay otros principios del color importantes como que el contraste de colores primarios es más fuerte (azul, rojo y amarillo) y en colores secundarios pierde más fuerza por la pérdida de pureza de color.
Así como usar diferencia de luminosidad que hablábamos antes, si usamos un verde, el color principal puede ser un verde oscuro, por lo que el complementario debe ser un color verde claro y no intermedio para generar ese contraste.
También deberíamos valorar si el contraste es complementario, es decir, hay colores que tienen definido su color complementario y por decirlo así, “Pegan”, el ojo humano lo acepta positivamente y armoniosamente, sin embargo si no cogemos colores complementarios puede ser más caótico y feo hablando claro, aunque todo dependerá de la finalidad para que los usemos (si quiero transmitir locura o elegancia, caos o minimalismo, etc).
¿Tan importante son los colores para la conversión?
Sí, primero por una sencilla razón de percepción de calidad, una web bien formada cromáticamente será más agradable y se percibirá de mayor calidad.
Luego también por un tema de potenciar los cta y mensajes principales mediante el color, de nada sirve que tenga una gran diferenciación si no soy capaz de mostrarla adecuadamente al ojo.
Y por último, la asociación del color a tu marca y valores, todo sabemos marcas que vemos un color y nos recuerdan a esa marca y aunque estemos hablando de marcas en el top of mind, siempre debe ser uno de los objetivos a largo plazo.
