¡Ni se te ocurra elegir los colores para tu web sin antes leer esto!

¿Aún no te has dignado a elegir los colores para tu web ?  y todavía te preguntas…

1. ¿ Cómo coño haces para elegir los colores para tu web?
2. ¿Cuáles serían los más apropiados para mi logo?

o quizás eres de los que….

1. Usas los colores que vienen por defecto con tu tema, sin complicaciones.
2. Directamente usas los colores tal cuál te levantas por las mañanas

Sabes que todo esto no te beneficia en absoluto, más bien todo lo contrario, te perjudica y mucho.

Que vas a aprender en cómo elegir los colores para tu web y no cagarla

¿Porque debes tener en cuenta los colores?

• Más de un 80 por ciento del reconocimiento efectivo de tu marca tiene que ver con el color.
• Hay colores que facilitan la conversión y otros que incluso pueden llegar a frenarla.
• Te definen como un profesional en función de cómo los combinas
• Ayudan a establecer la forma en que tus clientes se mueven por tu página ya que favorecen el  énfasis.

No te preocupes estoy aquí para ayudarte a mejorar tu relación con el color, ayudarte a elegir los colores más apropiados para tu proyecto, y como no, para resolver esa pregunta que continuamente  te ronda ¿ Cómo elegir los colores para tu web ?

Cómo afectan los colores a las conversiones, y usarlos para que te ayuden.

Para mí es evidente que los colores afectan a las conversiones y a la credibilidad, tengo muy claro que muchos no aceptan esta realidad.

Los colores nos afectan por medio de las sensaciones que crean y en las que finalmente nos vemos atrapados.

Hay estudios que hablan de determinados colores afectan mejor o peor a las conversiones. Sinceramente creo que tienen toda la razón.

Los seres humanos somos animales de costumbres y de alguna manera estamos acostumbrados a que determinados colores nos aporten una sensación, basados en el entorno cultural, social y personal.

Por ponerte un ejemplo en occidente asociamos el color verde a la buena suerte mientras que por ejemplo los chinos asocian la buena suerte al color rojo.

Por lo que yo a este respecto creo que todo se basa en el contraste entre los colores concretos que tú uses.

Es decir por muy verde que pongas tu call to action, sí todos los colores que tiene alrededor se basan en distintas tonalidades de verde o algún color análogo a él,  este no va a tener el mismo efecto que pueda tener su color complementario, el rojo(por muy prohibitivo que parezca),  que va a hacer básicamente que tu call to action cante por bulerías.

El color ayuda y mucho a guiar a tus visitas y es una gran arma para crear énfasis a lo largo y ancho de tu web o cualquier pieza de comunicación visual que estés creando.

Relaciones básicas entre los colores , entiende cómo funciona el color

El color es casi como las matemáticas, aunque no lo creas, se basa en sumas y restas, la verdad es que no hace falta ser muy observador para darse cuenta.

De hecho vayas por donde vayas y mires a donde mires los colores siempre combinan de la misma manera.

Es por esto que te encuentras siempre las mismas combinaciones de colores, entiende estas combinaciones como paletas o mezclas de color win win

No voy a profundizar demasiado en este tema, ya que sólo quiero que sepas manejar el color y entiendas su importancia, de cara a crear tu logo, crear tu blog o para que lo tengas en cuenta a la hora de crear cualquier pieza de comunicación para tu negocio.

Todo esto empieza con los colores básicos o primarios:

Colores Primarios :

Los colores primarios son rojo, amarillo y azul a partir de estos nacen el resto de los colores, son colores que no pueden nacer de ninguna mezcla,  es por esto que se llaman colores primarios

Colores Secundarios:

Los colores secundarios nacen a partir de los primarios, mezclando en la misma proporción los colores primarios, por lo que:

• Rojo + amarillo obtendremos naranja.
• Amarillo + azul obtendremos verde.
• Rojo + azul obtendremos violeta.

Colores Terciarios:

Si mezclamos los colores secundarios con los primarios en la misma proporción, obtendremos los colores terciarios, desafortunadamente los colores resultantes no es que tengan unos nombres muy sexis por lo que cada cual los llama un poco como quiere:

• Rojo + naranja obtendremos un rojo-naranja.
• Amarillo + naranja obtendremos un amarillo-naranja.
• Amarillo + verde obtendremos un verde-amarillo.
• Verde + azul obtendremos un azul-verde.
• Azul + violeta obtendremos un azul-violeta.
• Violeta + rojo obtendremos un rojo-violeta.

Bueno con esto ya tendríamos una rueda de color básica

Una vez llegamos a este punto podemos diferenciar los colores en dos grandes grupos :

Colores cálidos: Estos colores se llaman cálidos porque nos recuerdan realidades o fenómenos naturales que hacen referencia al calor o son calientes, tales como:

• El sol.
• La sangre.
• El fuego.
• Etc.

Los colores cálidos son los que van desde el amarillo al magenta

Colores fríos: Estos colores nos recuerdan realidades frías como puedan ser:

• El hielo.
• La hierba.
• El mar.
• El cielo.
• Etc.

Los colores fríos son los que van desde el verde hasta el granate.

Propiedades de un color Para poder trabajar con el color necesitamos entender sus propiedades:

Matiz (Hue): El matiz es la propiedad que nos permite diferenciar un color, el matiz es sinónimo de color, por lo que otra manera de definirlo sería  el color en sí mismo.

Valor o tono: El valor o el tono de un color es el que define el grado de claridad u oscuridad del mismo.

Tinte:  Es cuando se mezcla el  valor puro o neutro de un color con blanco para aclararlo.

Sombra:  Hablamos de sombra cuando mezclamos el valor puro o neutro de un color  con negro para oscurecerlo.

Saturación: La saturación de un color se reduce mezclando el color con gris, es decir cuanto mas grisáceo es el tono de un color menos saturado esta, y cuanto menos gris tiene  y más brillante es, más saturado está, por lo que todos los colores del circulo cromático son tonos saturados.

Relación entre los colores o armonía

A partir de aquí se puede decir que empieza la matemática de las combinaciones de color efectivas, todo este rollo te va a servir para ponerte más fácil la elección de los colores y cómo combinarlos.

Esta es la chicha del asunto y es aquí donde hay que prestar especial atención, ya que es así como formaremos nuestras paletas de colores , jugando con estas relaciones.

Colores complementarios :

Los colores complementarios son los colores opuestos entre sí en la rueda cromática.

Esta relación entre los colores es de suma importancia, ya que es uno de los grados más alto de combinación entre los colores.

Para mi es equivalente al jing y el jang de los colores son colores tan opuestos que generan un equilibrio tan bestia que finalmente complementan a la perfección.

Los colores complementarios producen entre sí mucho contraste.

Colores análogos o armónicos:

Estos colores son los colores vecinos de un color, que se encuentran a ambos lados en la rueda cromática, esto te va a garantizar que los colores que elijas reflejan armonía y buena composición.

Colores análogos complementarios o adyacentes complementarios.

Estos son los colores análogos al complementario, es decir en el caso por ejemplo del amarillo, su color complementario es el violeta en este caso los colores análogos del violeta serían sus análogos complementarios.

Escala monocromática:

Esta relación entre los colores está formada por las sombras y tintes de un mismo color.

Realmente no hay profundidad de color , pero el contraste se produce con los valores claros medios y oscuros de un color.

En ocasiones nos sirve par complementar aún más el resto de armonías.

Colores primarios: 

Esta relación de color no es de las más usadas como triada, raramente se ven juntos estos colores (excepciones como el logo de superman ) donde más se usan es en productos infantiles.

Dos de ellos se combinan mucho en el mundo de la comida rápida (rojo + amarillo) y el automóvil

El rojo y el azul también se combinan bastante, empresas como american airlines la usan, también hay banderas de varios países que usan esta combinación, como pueden ser la de Estados Unidos o Inglaterra, y está muy vinculada al mundo de la traducción, ya que es usada por numerosas marcas de diccionarios de idiomas.

Colores secundarios

Los colores secundarios tienen muchisimo en comun ya que cada dos comparten el azul , dos el rojo , y dos el amarillo, esto provoca que combinen fácilmente entre ellos.

Entre los tres crean un acorde muy suave y armonioso, los tres son colores altamente vinculados al sector de la realización personal, lo que los hace excelentes candidatos para todo lo que tenga que ver con coaches, autorrealización y espiritualidad, es decir que son colores muy vinculados al bienestar.

INfo extra sobre mover las relaciones por la rueda cromática

Cómo crear una paleta de colores para tu web y no morir en el intento.

No podía explicarte de forma efectiva cómo crear una paleta de colores apropiada para tu logo, tu web , tus publicaciones etc sin pasar por todo haber explicado las relaciones entre los colores

Empieza por definir el color primario en el que se va a basar tu comunicación, como has podido comprobar el color crea y aporta sensaciones así que ten muy en cuenta como los perciben

Es Importante definir los colores que vas a usar en tu web.

Para definir una paleta que funcione te recomiendo veas el video que he creado y que añado a continuacion:

Modos de Color

Color RGB:  este es modo de color sustractivo es decir a medida que restamos determinados pigmentos, obtenemos diferentes tonalidades.

Este es el modo de color que nos interesa ya que es el que usan las pantallas de nuestros ordenadores y televisiones.

Color CMYK:  este es un modo de color aditivo es el que básicamente se usa en el mundo real más bien en el físico , un color aditivo es aquel que  se pasa en sumar pigmentos para obtener un determinado color, este es el color que se usa en los materiales que se mandan a imprenta.

Herramientas de color online

Paletton:

Una herramienta online con la que puedes trabajar todo lo que hemos explicado en este post, y además podrás crear tus propias armonías y paletas de colores.

Se basa en una rueda de color en la que te puedes mover entre los diferentes colores, sus tintas y sus luces, de forma que puedas experimentar tus propias combinaciones y desarrollar tus propias paletas.

Incluye la posibilidad de comprobara triadas, tetra(4 colores), complementarios, análogos y personalizados.

ir a paletton

Adobe Color

Adobe no podia ser menos y también nos ha preparado su propia rueda cromática sobre la que probar nuestras combinaciones de color.

Lo mejor de la herramienta es que está en español.

Incluye la posibilidad de crear triadas, complementarios, análogos, monocromáticos, compuestos y personalizados.

Aparte puedes acceder a una librería de paletas compartidas por los usuarios de la herramienta o si tienes una cuenta de adobe puedes guardar las tuyas propias.

ColorDot:

Una interesante herramienta, para seleccionar colores, en esta web puedes crear paletas de forma muy rápida simplemente haciendo click sobre la ventana del navegador.

Cambiaras el matiz o color moviendo el cursor por la ventana de izquierda a derecha, y podrás variar el valor del matiz de arriba abajo en función de si lo quieres más claro o más oscuro.

Cuantos más clicks más colores tendrá tu paleta, eso sí no es una herramienta que te permita controlar la armonía.

ir a colordot

Herramientas de color para tu navegador

Vamos a ver algunas extensiones para tu navegador y alguna que ya vienen por defecto en él

Colorzilla:

Esta extensión te permitirá seleccionar cualquier color dentro de una página, con solo seleccionar la herramienta podrás hacer click sobre una foto, texto o elemento de cualquier web y te devolverá el color de forma instantánea.

La herramienta te devuelve el color en varios formatos tales como: Hexadecimal , RGB

La extensión la puedes instalar tanto en Chrome como en Firefox, pero debido a algunos temas relacionados con la privacidad en Chrome no funciona correctamente, por lo que sólo te será útil si usas firefox.

Para mi ha sido una herramienta súper útil durante los últimos años hasta que decidí pasarme a Chrome.

Ir a la web de colorzilla

Color Sphere:

Una extensión para Chrome que te permite trabajar con un circulo cromático y ver o modificar rápidamente las relaciones de armonía entre los colores tales como: Color complementarios, colores análogos, análogos complementarios etc.

Es bastante fácil de usar dada su simpleza y te devuelve los códigos de color en formato hexadecimal de forma que los puedes copiar y pegar para posteriormente usarlos en tu web o en tu editor de gráficos favorito.

ver la extensión Color Sphere

Psicologia del color, cómo usarla para que el color te ayude a aumentar las conversiones.

La psicología del color está sujeta en parte al entorno cultural, en cada continente hay colores que tienen significados o usos diferentes

Rojo :

• Es el color de todo lo relacionado con las pasiones, tanto las buenas como las malas, el amor, el odio.
• Es el color de 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.
• Es un color que 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.
• Es el color de lo positivo y lo amable, por poner un ejemplo relacionado con esto, los emoticonos y smileys que tanto nos gusta usar en el Whats App 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-purpura:

• 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 como no de lo vanidoso.
• Representa la templanza, la lucidez y la reflexión
• Representa 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.
• Es el color de aquellos que tienen los pies bien plantados sobre la tierra
• es el color de los alimentos cocinados y se relaciona con el sabor fuerte
• Su punto negativo, es el color de la caca, de la mierda 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 como tendemos a representarlo.
• Es el color del bien.

Negro:

• El color de la obscuridad,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.
• Es el color de lo impuro, de lo insano, de lo decrépito.
• 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

Errores más comunes con el color y cómo solucionarlos

Hay una serie de errores  de diseño en cuanto a diseño relacionados con el color se refiere 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 si 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:

En general el diseño se trata de guiar a tu visitante para que haga lo que tu 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á 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 los colores para tu web sin tener en cuenta las reglas que te he explicado arriba ni seguir correctamente las reglas de la combinación

¿Crees que me he dejado algún error común acerca del color? ¿o quieres aportar algo más a este post sobre el color?

Te espero en los comentarios, eres libre de opinar

Un fuerte abrazo!!!!