Los colores forman parte de nuestra vida, de hecho a veces guían nuestras decisiones casi sin que nosotros nos demos cuenta. Cada uno de ellos transmite unos sentimientos, que pueden cambiar nuestra forma de actuar. Son muy poderosos, así que... ¿Estás preparad@ para usarlos en tu web?
A lo mejor hay por ahí algún “despistaillo” que no se ha dado cuenta de que los colores forman parte de nuestra vida. Tanto, que a veces son los encargados de transmitir emociones y conseguir que varíe nuestro estado de ánimo.
Cada color va unido a uno o varios sentimientos y viceversa, a cada uno de los sentimientos podemos aplicarle un color. Si hoy me levanto triste, el día está gris y me visto con ropa en tonos térreos, seguramente sea más difícil que el día vaya a mejor. Si por el contrario, cambio los tonos térreos de mi ropa por unos vivos, posiblemente poco a poco vaya encontrando algo de positivismo. Y ese pequeño gesto que hacemos a diario, lo podemos extrapolar a todos los ámbitos de la vida.
¿Qué significado tiene cada uno de los colores?
Que el cielo es azul y la hierba verde no es ningún descubrimiento. Si os digo "amor" todos vais a pensar en rojo, pero y ¿si os digo "cambio"? Seguro que muchos estaréis pensando en el naranja... Como decíamos, cada una de las emociones lleva asociado a un color por lo que a la hora de diseñar nuestra web, tenemos en cuenta lo que queremos transmitir, la elección del color adecuado nos puede ayudar a conseguirlo.
¿Hacemos un resumen de la psicología de los colores principales?
- Azul: Paz, tranquilidad, sosiego… Un color muy usado en el diseño porque todas las cualidades que transmite son positivas. Sin embargo es un mal color para llamar la atención porque no destaca.
- Verde: Más que un color es un sentimiento y una manera de ser. Suele estar unido al paso anterior que lleva al fin de un proceso, por lo que es muy usado en los botones que validan.
- Rojo: fuerza, pasión… Muy útil para llamar la atención, pero hay que usarlo en su justa medida pues podemos parecer agresivos.
- Naranja: El representante del cambio por excelencia, y como veremos a continuación el mejor para llamar la atención sobre algo.
- Amarillo: El color más ambiguo de todos, pasa de la alegría a la envidia con solo un cambio de tonalidad. Al ser tan inestable hay que tener cuidado cuando lo usamos en el diseño.
- Rosa: Es un color del que no se puede decir nada malo. Está muy unido en el diseño a lo infantil y lo femenino.
- Violeta: Un color arriesgado porque va unido a la extravagancia. Pero ya sabéis, el que no apuesta no gana!
- Negro: Color del lujo y la elegancia. Buen color para el diseño pues puede combinarse con todos los colores.
- Blanco: Color de la pureza y la sencillez, al igual que el negro combina con todos los colores.
- Gris: Aunque es un color casi sin carácter, es un buen complemento, pues quita algo de peso al color negro.
- Marrón: Si con algo podemos relacionar este color, sería a la calidez del hogar. En el diseño está muy unido a alimentos que tienen ese mismo color.
Combinación de colores en mi web: crea contraste
Cuando diseñamos nuestra imagen corporativa lo hacemos para todos los elementos de nuestra marca. Todo debe ir en perfecta concordancia y no puede estar diseñado a la ligera. Si nuestra marca va a ser fuerte tiene que comenzar desde el principio. Por esto hay algunos conceptos que es mejor que tengas claros 😉
¿Para quién destino mi web?
Lo primero que hemos de determinar antes de comenzar con el diseño de nuestra web, es el propósito de la misma. ¿Voy a prestar un servicio, consejos, información...? ¿De qué sexo o edad serán los visitantes de la misma? ¿De qué lugar geográfico?... Son algunas preguntas que debes hacerte antes de comenzar con el diseño.
Ya sabemos que los colores no afectan a todos por igual sino que van unidos al sexo o la edad, por lo que dependiendo de nuestro target podremos decidirnos por unos colores u otros.
Elige tus colores, esos que solo pueden ser tuyos.
Tienes que elegir los colores que casen contigo y cuando digo contigo me refiero con tu web y con lo que quieres conseguir con ella. Por ejemplo, si es una página de salud, unos colores recomendables serán el azul o verde, si por el contrario hablamos de lujo y exclusividad, mejor quédate con el negro. Si tu página está destinada a los niños, no olvides poner colores brillantes.
Una vez hayas decidido el color predominante para tu web, debes decidir la tonalidad del mismo. Si mon amie, "mi color es el rojo" no significa nada, hay una gran gama de colores rojo y ahora te toca decidir cuál es la tuya. No es lo mismo rojo sangre que granate, así que… animo!
Por último, combínalos!
Una vez hayas hecho tu elección y no estemos hablando de rojo sino de #c33020 es el momento de combinarlo. Como veremos en el siguiente apartado, hay muchos elementos en la web que exigen colores. A veces podemos usar nuestro color principal, pero en otros casos hemos de irnos hacia una combinación de ellos.
Hay muchas herramientas para combinarlos, te dejo alguna de ellas:
- Colours lovers : Una genial herramienta para encontrar combinaciones de colores. Puedes filtrar la búsqueda introduciendo palabras significativas del uso que vayas a darle a los colores.
- El circulo cromático : Con la ayuda del círculo cromático podemos conseguir combinaciones entre colores. Solo hay que saber cómo usarlo.
- Ui gradients : Aunque los ejemplos son de degradados es una buena herramienta para saber como combinan dos colores.
Elección de colores para los elementos web
Ya conocemos perfectamente que significan cada uno de los colores, por lo que debemos dar un paso más. Podemos determinar cuáles son los mejores colores a usar para cada uno de los elementos principales de la web.
Claramente, tus colores corporativos deben estar presentes en tu web, siendo el eje principal de la misma, pero hay varios elementos que aparecen en el diseño web, tales como botones, en los que debemos buscar una combinación entre nuestros colores corporativos y los más adecuados para la acción que queremos que realice nuestro usuario.
- Botón de llamada a la acción: El naranja es el color predilecto para las llamadas a la acción. Como hemos visto está muy unido al cambio, por lo que es el mejor color para convertir. Colores como el marrón o el gris, se sienten neutros y sin fuerza, por lo que no llaman la atención, y colores como el rojo se presentan demasiado agresivos. El naranja en el punto intermedio perfecto.
- Segunda llamada a la acción: a veces en tu web, además de una primera llamada a la acción, necesitamos de otras secundarias como pueden ser los botones de "leer más", "publicar comentario"... En algunos casos podemos mantener el color escogido, pero también podemos usar uno complementario al anterior y que vaya más en consonancia con nuestro color corporativo. Siempre que se cree contraste con estas llamadas a la acción , es un buen momento para introducir el color corporativo.
- Color de los links: a menudo usamos el color corporativo para links o títulos en nuestra página web, pero cuidado! Si tu color tiene fuerza y sobre todo un alto contraste, enhorabuena, puedes utilizarlo. En el caso de que esto no sea así, lo siento, pero debes buscar un diseño diferente para aplicar a los enlaces. Podemos subrayarlo o ponerle fondo pero siempre hay que tener en cuenta que no podemos perder la legibilidad del texto. Colores como el amarillo o el verde claro no suelen funcionar (aunque depende de la tonalidad)
- Fondo de la web: para el fondo de la web tenemos varias opciones, principalmente podemos usar una textura o patrón o un fondo plano. Sin embargo, antes de tomar una decisión debes saber esto: la mejor combinación entre texto y fondo, la que crea contraste y da una legibilidad más alta es la del texto en negro y el fondo en blanco. Eso es así, por mucho que nos duela. Los patrones molan, pero úsalos siempre como fondo en una web en la que el texto vaya sobre blanco, en un diseño de tarjetas por ejemplo.
De la misma manera, trabajar sobre fondos negros o oscuros no es una buena opción. La legibilidad del texto sobre fondos negros es peor y la vista tienda a cansarse con más facilidad. Si nuestros colores web son el blanco y el negro, podemos usar este ultimo en el footer o en el menú, lugares donde escribiremos menos palabras, que por ejemplo, como fondo para los artículos.
Conclusiones
Ya que los colores van unidos a nuestros sentimientos... usemos esto a nuestro favor! Como veis, si diseñamos pensando en los colores, conseguiremos que nuestra web sea más cercana a nuestro público y por lo tanto nos ayudará a conseguir nuestros objetivos.
Una vez sepamos el color que mejor encaja con nuestro público objetivo, solo nos queda definir con exactitud nuestro color principal y encontrar una gama de colores que combinen de forma armónica con él, teniendo siempre en mente la accesibilidad y legibilidad de nuestros contenidos.
Happy colours!