▷ Cómo elegir los colores para tu web

Apple Podcasts | Google Podcasts | Spotify | Pandora | RSS

Hoy vamos hablar de cómo elegir los colores a la hora de diseñar una web, pero antes un poco de autobombo!!!:

Si te apuntas a mi lista de correo, además de recibir sólo contenido relevante del mundo del diseño web (por ejemplo si google cambia algo importante) te voy a regalar estos 4 ebooks de marketing digital:

Convierte tu empresa en un imán para clientes
Contenidos que enamoran
Cómo elaborar un branding
10 consejos de email marketing

Apúntate ahora mismo en www.pampua.es/regalo Venga, dale al pause y entra en pampua.es/regalo que yo te espero aquí…

Pues nada, ahora que ya te has apuntado, vamos con el tema de la semana:

Cómo elegir los colores para tu web

Lo primero que deberías hacer es definir el color primario en el que se va a basar tu comunicación, como sabrás, el color crea y aporta sensaciones así que ten muy en cuenta cómo los perciben.

Te recomiendo que te informes sobre la psicología del color, pero ten en cuenta que está sujeta en parte al entorno cultural, en cada continente hay colores que tienen significados o usos diferentes. Vamos a hacer un breve repaso de las sensaciones que aportan los colores principales:

Rojo:

Es el color de todo lo relacionado con las pasiones, tanto las buenas como las malas, el amor, el odio.
Se asocia con la guerra y la sangre, los bajos instintos.
Un color muy masculino, es el color de la actividad, de la fuerza, de los limites, de la agresividad, cosas con las que se relaciona a este sexo.
Color de la seducción, de la sexualidad y de lo erótico, así como de todo lo inmoral.
El rojo es el color de las emociones más viscerales, es el color del amor y de la pasión, así como es el color de la ira, también es el color de lo que está prohibido.
Es un color que llama mucho nuestra atención, incluso en la naturaleza tiende a llamar la atención, hay animales como la rana roja o rana flecha que con su color rojo nos indica lo peligrosa que es, es como si dijera ¡No toques!
El rojo es el color de la suerte para los chinos.

Azul:

Es el color de la tranquilidad y la productividad, es el color de la constancia y de la confianza.
Normalmente se relaciona con la tranquilidad y el sosiego, con lo interminable y constante, son las sensaciones que atribuimos al mar y al cielo ambos poseen este color, el cielo es constante y llega allí a donde alcance nuestra visión, y lo mismo pasa con el mar (que refleja el cielo).
Es por esto que está ampliamente extendido en el mundo corporativo ya que como hemos dicho se relaciona con la productividad y la confianza, que producen las cosas estables.
También se relaciona con el frío y el frescor, no en vano es una de los llamados colores fríos.

Amarillo:

Es el color de la rebeldía y del cambio, esta relacionado con la juventud por su vitalidad, es un color usado por los más mayores, para reflejar justamente eso juventud y vitalidad.
Es el color del entendimiento y de la iluminación, ya que el sol, nuestro astro rey lo percibimos como de color amarillo, e ilumina cada rincón, la luz a pesar de no tener color la representamos con el amarillo.
Se asocia con lo positivo y lo amable, por poner un ejemplo relacionado con esto, los emoticonos y smileys qué tanto nos gusta usar en el WhatsApp y en chats son amarillos .
También es el color de la inseguridad, ya que cambia completamente: con una gotita de rojo se convierte en naranja, con una gotita de azul se torna verdoso, tiende a confundirse con el blanco y el negro le resta la vida, es el color que junto con el gris, más rápido pierde su identidad.

Violeta-morado-púrpura:

Color de todo lo relacionado con la sensualidad, lo elegante, lo misterioso, y de lo espiritual, está formado por rojo y azul.
Es el color del ocultismo, de lo mágico y cómo no, de lo vanidoso.
Representa la templanza, la lucidez y la reflexión.
Se asocia a la unión de lo masculino y lo femenino, la unión de los contrarios, por esto se usa ampliamente para representar tanto el movimiento gay como los derechos feministas.
Representa la elegancia, el poder y el más alto status social, antiguamente era un color difícil de reproducir, se podía tardar meses en crear una vestimenta con este color, por lo que muy pocos se podían permitir llevarlo debido a su alto costo, y no se podía llevar si no pertenecías a la casta correspondiente, bajo pena de muerte, un ejemplo sería la capa morada que antiguamente los papas llevaban ya que era el color apropiado para servir al mayor de los soberanos.
Es el color de lo atrevido del desenfreno y la lujuria pecaminosa.
Un color bastante ambiguo ya que representa tanto a la lujuria como al fervor religioso, al sexo desenfrenado como a la cuaresma.
Es un color también relacionado con el poder y los poderosos.

Verde:

Es un color que evoca directamente a la naturaleza, está relacionado con la esperanza y con la buena suerte en nuestra cultura.
El color de los amantes de la naturaleza, de la ecología, del reciclaje y del ciclo de la vida, de la primavera.
Es el color del renacer y de la fertilidad.
Es un color claramente neutral entre el cálido rojo y el frío azul.
El color verde nos reconecta con nuestro interior es el color que buscamos por instinto en cuanto estamos deprimidos, la esperanza, es el color de nuestros orígenes.
Es el calmante de las emociones, se usa mucho en la salud y el bienestar por su efecto calmante, reconstituyente, suave y fresco.
Es el color del dinero en algunos casos de la envidia por su relación con este, también es el color de la pereza.
En definitiva el verde es un color saludable.

Marrón:

Es el color que menos atrae a todo el mundo y se usa más que otra cosa como color neutro o de paso.
El marrón es el color de las cosas sólidas, el suelo, los troncos de los árboles.
Es un color ampliamente relacionado con la naturaleza junto con el verde.
Es el color de la tierra por lo que da sensación de estructura, apoyo y sostén.
Color que asegura lo material, relacionado con la acumulación de bienes materiales.
Es el color de la honestidad , de lo sincero, de lo genuino y de lo auténtico.
También se asocia con aquellos que tienen los pies bien plantados sobre la tierra.
Normalmente es el color de los alimentos cocinados y se relaciona con el sabor fuerte.
Su punto negativo, es el color de la caca y la suciedad, de todo lo terreno a nivel espiritual.

Naranja:

Es el color del amanecer, del resurgir o renacer, está relacionado con la alegría y la felicidad, se tiende a decir que las personas que lo usan gozan de una vida social intensa y son amantes de la diversión.
El amanecer lo representamos en naranja a pesar de que tenga tonos claramente rojizos.
El naranja es una color alegre no en vano hace las delicias de muchos a la hora de decorar en fiestas.
El color azul es su complementario, el color de las constantes , de la calma, de lo firme y lo serio, mientras que el naranja es justo lo contrario, alegría, diversión y jolgorio,

Blanco:

El Blanco es un color ampliamente relacionado con la pureza, en algunas culturas simboliza la ausencia de todo y en otras por el contrario es la suma de todo.
Un color de los que más se usa pero de los que menos se menciona ya que es el favorito de pocos, no hay mucha gente que te diga que su color favorito es el blanco.
Es el color de lo positivo así como de todo lo afirmativo
Está altamente relacionado con la inocencia, así como el rosa, pero el blanco es debido a su representación de la pureza y de la virginidad, no en vano las novias visten de blanco.
Aunque nadie lo sepa también tiene connotaciones negativas, tales como, la esterilidad, la frialdad.
Asimismo es también el color con el que se representa el silencio.
El invierno es también representado con el color blanco, ya que la nieve es blanca y a pesar de que no en todo los sitios no nieva en invierno es cómo tendemos a representarlo.
Es el color del bien.

Negro:

El color de la oscuridad, de la maldad y de la muerte.
Le pasa igual que al blanco para muchos es la ausencia de color mientras que para otros es la suma de todos, evidentemente dependerá del tipo de color que usemos sea pigmento o luz.
Es el color por excelencia con el que se representa todo lo negativo.
También es el color de la elegancia, la nobleza y del poder.
Es el color del misterio y de los bajos instintos, de lo desconocido y de la nada.
También se asocia con lo impuro, de lo insano, de lo decrépito.
En general es el color del mal.

Gris:

El gris es uno de los colores más ambiguos que existe ya que está a caballo entre el negro y el blanco, por lo que no es ni uno ni otro, para muchos es el color de la indecisión.
Es el color de la mediocridad, indiferencia y del conformismo, ya que no es cálido ni es frío, simplemente no sabe dónde está, o simplemente le resulta indiferente.
Para muchos representa la tristeza ya que su ausencia vital es abrumadora.
Lo identifican con la falta de vitalidad y la ausencia de vida, hace que colores como el naranja o el amarillo luzcan mucho más vitales o alegres de lo que por sí son cuando están a su lado.
También es ampliamente relacionado con la experiencia ya que es el color de las canas y de lo viejo.

Rosa:

El rosa es el color de lo femenino y de la sensualidad,
También representa la inocencia.
Un color dulce, delicado, tierno y suave

Ahora que ya tienes claro cuál va a ser el color dominante en tu web (y en tu logo también debería serlo) toca crear una paleta de colores que combinen, que queden bien entre ellos.

Existen multitud de herramientas para crear paletas de colores para la web, aquí te dejo unas cuantas:

Coolors Excelente generador de paletas de color que cuenta incluso con app para iOS y Android
Adobe Color CC Te permite crear armonías partiendo de un color base
Colour Lovers Es una especie de red social de paletas de color. Puedes compartir y votar.
Color Hunt Te permite hojear fácilmente un montón de paletas de color y guardarlas en favoritos.
Color by Hailpixel Con una interfaz minimalista te permite crear paletas de color de forma sencilla.
Colour Code La ventaja de esta herramienta es que permite exportar fácilmente las paletas de color en formate SCSS, LESS y PNG. Además el código hexadecimal del color está presente en todo momento.
Paletton Un generador de paletas y armonías de color muy completo
Cohesive Colors Me encanta esta herramienta porque te permite unificar los tonos de los colores de una web. Muy recomendable.

Hay muchas más, pero con todas estas creo que tendrás suficiente.

Cuidado con cometer errores con lo colores de la web

Hay una serie de errores de diseño relacionados con el color que me encuentro en los blogs y logos de mucha gente que practican el noble arte DIY y que te quiero comentar ya que tienen fácil solución.

Poco Contraste entre el texto y el fondo:

Este es el error que me encuentro con más frecuencia.

Puede ser algo decisivo para tus conversiones ya que sí el texto se confunde con el fondo apaga y vámonos.

Tienes que tener en cuenta que hay colores que no son compatibles, ya que unos literalmente se comen a otros, como puede ser el caso del amarillo y el blanco.

Esto también puede pasar al poner tu texto encima de las fotos.

Las fotos no tienen un solo color tienen varios, supongamos que usas un blanco para tu texto, tienes que tener cuidado en que zona de la foto lo pones, tendrás que evitar las zonas claras ya que tu texto se confundirá con el fondo.

Ten cuidado con el responsive en la web, ya que en una foto al modificar el tamaño puede que lo que inicialmente no fuera un problema acabe siéndolo, ya que el texto puede modificar su posición con respecto a la foto puede acabar sobre un color que afecte a su legibilidad.

Una solución a este problema es poner una pastilla de color entre la foto y el texto, por ejemplo si usas un color de texto blanco, puedes usar una pastilla de color negro (o negro con transparencia) entre el texto y la foto para aumentar el contraste.

También puedes superponer un color sobre toda la foto para aumentar el contraste, y que tu texto se lea.

Call to action con poco contraste:

Un buen diseño web trata de guiar a tus visitante para que hagan lo que tú quieras.

Es parecido a cuando vas a IKEA, te preparan el camino para que pierdas la noción del tiempo y el espacio y te chupes todo el recorrido, sin darte cuenta pasas por todas las secciones.

Esto es lo que tienes que conseguir en tu web, guiar a tus visitas de forma que interactúen con tu web de la forma que tu quieres.

Y aquí es donde entra el call to action o llamada a la acción.

Si tu call to action tiene el mismo color que el resto de los elementos de la web no destacará, no llamará la atención por lo que no habrá conversión.

Esto también puede pasar cuando estas usando un color que no contrasta lo suficiente con el resto de elementos, y pasa desapercibido, por lo que no conseguirás que tus visitas hagan click.

Elegir colores que no combinan

Otro error muy habitual que me encuentro es elegir los colores para tu web sin tener en cuenta las reglas básicas de combinación de colores.

Cuida también las imágenes

Es muy recomendable que las imágenes que utilices en tu web también tengan la misma paleta de colores que hayas elegido para el resto de la web: títulos, enlaces, botones, etc.

Una forma de unificar las imágenes que uses para el blog es ponerles una capa de tu color corporativo al 50% de opacidad por encima. De esta manera todas tendrán el mismo tono.

Truco para nota: usa un sólo color para ser recordado

Esta técnica requiere más esfuerzo, pero es la que mejores resultados va a cosechar en cuanto a conversiones y fidelización de tus usuarios.

Consiste en usar únicamente el color de tu logotipo (que sólo tendría que tener uno) en todos los elementos que quieras destacar de tu web: títulos, enlaces, botones, etc. Y también en las imágenes, es decir, las imágenes deberían de ser vectoriales y con tonos neutros, excepto por el elemento principal de la imágenes que sería de tu color corporativo, o sus matices (con más o menos porcentaje de blanco).

EL PODCAST DE LA SEMANA

Hoy quiero recomendaros Venta Inteligente dirigido y presentado por el gran Carlos Sogorb, un monstruo de las técnicas de venta.

Son episodios de unos 10-20 min de duración hablando de temas muy interesantes para todos los que somos autónomos y vivimos de vender nuestros servicios profesionales o si trabajas en el departamento comercial de alguna empresa. Voy a hablar con él a ver si podemos cuadrar una entrevista para que nos comente la importancia de un buen diseño web en el proceso de venta.

Te recomiendo que te suscribas, búscalo en iTunes, iVoox, Spotify, etc. Como “Venta inteligente”

Y esto ha sido todo por hoy, si ya conocías cómo elegir colores para tu web y has echado algo en falta, cuéntamelo! O si te ha quedado alguna duda o te gustaría que tratase algún tema en concreto pásate por pampua.es y déjame un mensaje; estaré encantado de comentarlo contigo.

O si lo prefieres en los comentarios de iVoox, o por telegram o twitter como @pampua, o en facebook.com/pampua

Si te ha gustado este episodio compártelo al menos con una persona a la que pueda resultarle interesante. Por whatsapp, por mail, por Facebook, twitter o incluso por SMS, como quieras, pero compártelo! Recuerda que puedes escucharlo y suscribirte en iTunes, iVoox, Spotify, Youtube y desde la web de pampua.es/podcast.

Y por último estaré inmensamente agradecido si me dejas una reseña de 5 estrellas en iTunes o un me gusta y un comentario en iVoox. Puedes ver cómo dejar una reseña en www.pampua.es/resena

El jueves que viene cumplimos 1 año de podcast. Lo celebraremos con la entrevista del mes hablando con Josevi Baeza, para que nos cuente cómo decidió convertirse en autónomo y la importancia del diseño web y el marketing online en redes sociales en su negocio.

Muchísimas gracias por escuchar hasta el final, por comentar, por tus “Me gusta” y reseñas. Nos escuchamos la semana que viene, llueva, nieve o truene!