Decide qué valores quieres transmitir, que sensaciones quieres provocar, a qué público objetivo te vas a dirigir y elige en consecuencia.

Si ya tienes un logotipo corporativo deberías ceñirte a sus colores para mantener la identidad visual de tu marca.

La elección de colores para el logotipo, al igual que los de tu web, debe estar basada en la psicología del color así que, en teoría, tu logotipo ya incluirá los colores que mejor encajen con tu marca.

Si por la razón que sea crees que el logotipo o sus colores no representan tus valores actuales, sería buena idea rediseñarlo y adaptarlo a tu nueva filosofía y mensaje.

Una vez rediseñado basa el esquema de color de tu página en él.

Cuántos colores utilizar en una web

Como te decía al principio, una de las causas principales de que una web no tenga un aspecto profesional es la utilización de demasiados colores.

Una web con muchos colores es confusa, pierde la coherencia y distrae al usuario evitando que se fije en los elementos más importantes.

En la siguiente foto ¿Hay alguna fruta que te llame la atención por encima del resto?

¿Y ahora?

Lo más probable es que en la primera foto no vieras ninguna fruta que destacara especialmente, y si lo había desde luego no era la uva verde de la segunda foto ¿no?

Pues este mismo concepto se aplica en tu web. Si llenas todo de colorines el usuario no sabrá en que fijarse. Si solo utilizas un color que resalte del resto su vista se irá ahí irremediablemente.

Piensa que en vez de ser una uva ese elemento destacado podría ser un botón de comprar, de suscripción, un banner de publicidad, una categoría destacada, un formulario de contacto, una tabla de precios, etc.

Cada página de tu web debería tener un único objetivo principal y por tanto ahí es donde deberías poner el punto diferente, que en este caso consigues con el color.

Fíjate en la web de Pingdom, esta es una tabla de precios que hay en su página de inicio ¿Dónde se te va la vista?

Ellos quieren venderte su servicio “Professional” y te llevan hacia él. Es el mismo concepto de la uva, si solo hay un color que resalte te fijarás en él. Ahora imagina que dicha tabla de precios fuera así:

¿Crees que conseguirían el mismo resultado?

Conclusión. Intenta utilizar la menor cantidad de colores posibles.

Como norma general te recomendaría uno o dos colores neutros, como pueden ser los grises, que te servirán para separar espacios y crear divisiones y luego uno o dos colores más llamativos para atraer la atención del usuario cuando lo consideres necesario. Puedes utilizar uno para los enlaces y otro para los botones y demás llamadas a la acción, por ejemplo.

Si te fijas en mi web todas las llamadas a la acción y elementos que quiero resaltar van en amarillo. El resto de la web va en blancos y grises.

Te dejo algún ejemplo más para que lo veas más claro.

Cómo combinar los colores

Ya sabes lo importante que es elegir unos colores adecuados, cuáles utilizar para transmitir unas sensaciones u otras y la cantidad recomendable para que sean efectivos. Ahora vamos a ver cómo combinarlos para que la web quede chula y mantenga la coherencia visual.

Te podría dar una chapa enorme sobre la teoría del color, el círculo cromático, los espacios de color, los colores primarios, secundarios, terciarios, etc. pero si no eres diseñador gráfico te voy a aburrir y además no necesitas tener tanta información.

Lo que sí necesitas saber es que:

1- Cuanto más saturados y brillantes sean los colores más llamativos serán, pero más cansarán la vista del usuario y más trabajo le costará mantener la atención. Prueba a mirar durante un rato estas paletas de color y compruébalo tú mismo. ¿Cuál te resulta más cómoda a la vista?

2- Los contrastes funcionan muy bien, en el tono, en la luminosidad y la saturación. Prueba a hacer combinaciones bien contrastadas:

3- Otra buena opción es utilizar una misma gama cromática con distintos niveles de saturación y luminosidad:

4- Debe haber un color predominante que deberías usar en una proporción de un 60%. Lo podrías utilizar en la cabecera, como fondo en las diferentes secciones, las landing pages, etc.

Otro secundario que utilizarías en un 30% más o menos (fondos de formularios, cajas de llamada a la acción, enlaces, etc.).

Por último deberías dejar un color, el más llamativo o potente, para el 10% restante que generalmente utilizarás para botones o elementos de alto valor estratégico.

La razón para utilizar el color más llamativo en una proporción tan baja es para que este no pierda efectividad. De esto ya hablamos en el segundo punto de la entrada con el ejemplo de la uva.

5- Debes ser consciente de que no eres diseñador y de que no te merece la pena ponerte a experimentar con los colores como si fueras Da Vinci. Elige una paleta de colores que te guste y cíñete a ella, seguramente el diseñador que la hizo tenía más conocimientos y mejor gusto que tú para estas cosas, así que confía en su criterio y cambia lo menos posible.

¿Y de dónde sacas tú paletas de colores ya preparadas y de buena calidad?

Eso lo vamos a ver en el siguiente punto.

Herramientas maravillosas para encontrar el esquema de color perfecto

No eres Dalí.

Si te pones a elegir los colores de tu web a mano esta se acabará pareciendo más a un cuadro de Picasso. Cuánto antes lo asumas mejor.

Por suerte hay herramientas gratuitas que harán este trabajo por ti. Otros usuarios ya han creado miles de combinaciones preciosas y bien equilibradas listas para utilizar, así que tú solo tendrás que elegir una que te guste y no estropearla con tu vena artística.

Hay muchas herramientas en Internet que te pueden venir bien, mis dos favoritas son Adobe Color CC y Pictaculous.

Adobe Color CC

Puedes explorar las combinaciones que han creado miles de usuarios, ordenarlas por fecha, ver las más populares, buscar por un término determinado, etc.

Ahí tienes todo lo que necesitas para encontrar el esquema de color de tu web.

Luego podrás guardar la url de esa paleta o incluso modificarla a tu gusto, pero toca lo menos posible, que la mayoría de las combinaciones que hay ahí ya están muy bien como están.

Pictaculous

Otra forma de encontrar una paleta de color es a partir de una fotografía. Puedes subir la imagen a Pictaculous y este te genera los códigos de color en formato hexadecimal.

Muy fácil de utilizar y muy eficaz. Puedes sacar ideas de las instalaciones de tu negocio, de tu entorno, de otras páginas web que te hayan gustado, etc.

Aquí tienes varios ejemplos de los resultados que se consiguen:

Te dejo un listado con más herramientas que te pueden interesar:

• Color Hunter.
• TinyEye Labs.
• Check my colours.
• Hail Pixel.
• Color Explorer.
• Shutterstock Labs.
• 0 to 255.

Tendencias en 2018-2019 para los colores de las páginas web

Como en todo lo relacionado con el diseño, en los colores también hay tendencias y modas. Hace unos años estaban en auge los colores intensos y los degradados muy marcados.

Ahora los tiros van por otro lado. Eso no quiere decir que no vayas a encontrar multitud de páginas muy bien diseñadas que contradicen estas tendencias, ni que tú no puedas hacer algo distinto.

Yo solo te muestro las líneas más actuales, tú decides si quieres seguirlas o no.

Colores planos con tonos suaves

Se busca la usabilidad y que el visitante se sienta cómodo navegando por nuestra web. Estos tonos transmiten calma y sobriedad, son una excelente elección para conseguir un aspecto cuidado y profesional.

Degradados suaves

Si los colores planos no van contigo quizá deberías probar con degradados muy suaves, le darán más textura y personalidad a tu web.

Utilizar una sola gama cromática

Utilizando tonos similares con diferentes grados de saturación y luminosidad conseguirás un resultado muy armónico y que potenciará notablemente tu identidad visual. Ten cuidado con esta técnica que no es fácil aplicarla con éxito.

Alto contraste

Para que funcione tienes que utilizar colores neutros o con poco impacto visual y un solo color llamativo que atraiga la atención. Los puntos de alto contraste son un imán para nuestros ojos mejorando muchísimo las conversiones.

Minimalismo

Adiós a las webs petadas de colores, botones, anuncios y demás elementos que nos distraen de lo esencial, el minimalismo hace que el usuario se fije en lo realmente importante.

Instrucciones, trucos y consideraciones imprescindibles

Ya tienes todos los ingredientes para hacer una buena elección de colores en tu web, así que solo nos queda ver un pequeño listado con algunas cuestiones muy importantes que debes tener en cuenta cuando trabajes con los colores de tu sitio:

• Sé consistente. Si ya tienes colores corporativos ajústate a ellos, si crees que dichos colores no encajan bien con tu marca plantéate hacer un rediseño, pero toda tu identidad visual tiene que ir en la misma línea. No puedes tener pintadas las paredes de la oficina en azul, el logotipo en verde, los coches de empresa en rojo y la web en morado.
• Olvídate de tus colores favoritos y piensa en qué quieres transmitir. Si estás leyendo esta entrada no es para que al final pongas en la web tu color preferido, sino para elegir el color o colores que mejores resultados te van a dar. Analiza qué sentimientos quieres despertar en tus visitantes/clientes y elige en base a ello.
• Si quieres que todo llame la atención, al final nada lo hará. Define un solo elemento por página que quieras resaltar y utiliza tu color más llamativo ahí, el resto de colores de la página no deben eclipsarlo.
• Cuanto más brillantes sean los colores antes se cansará el usuario, no abuses de ellos.
• El blanco es muy poderoso. Si tienes un fondo blanco con espacios muy amplios cualquier botón, caja, bloque o formulario que pongas con un color de alto contraste llamará poderosamente la atención. Si el fondo es oscuro y pones un elemento en blanco la vista se irá directa hacia él, el punto de claridad será como un faro en la noche.
• Utiliza una paleta muy básica. No más de tres o cuatro colores, en algunos casos hasta con dos es suficiente. Utiliza estos colores en todos los elementos de tu web y no introduzcas otros a mayores, así mantendrás la coherencia visual.

Para acabar te voy a dar una mala noticia, tus colores se verán diferentes en cada monitor

¿¿¿¿Qué???? ¿Cómo dices? Que después de leerme toda la entrada y tirarme horas mirando paletas de colores… ¿Estos no se van a ver en todos los ordenadores como yo los estoy viendo en el mío?

Pues sí, lamentablemente así es.

Cada monitor tiene sus ajustes de color y lo que tú estás viendo en el tuyo como el verde lima perfecto que te ha costado elegir tres días entre otros 4 candidatos similares, puede que en otro monitor sea un amarillo limón verdoso o un verde manzana.

Te cuento esto ahora para que no te flipes demasiado y pierdas días eligiendo el tono perfecto para tu web, porque los demás no lo van a ver igual que tú.

¿Significa esto que no deberías preocuparte por los colores de tu web?

En absoluto.

Da igual que la tonalidad cambie de unas pantallas a otras porque si has elegido tu paleta correctamente, sus colores combinan bien y los has aplicado como te he explicado, tu web será visualmente coherente y lucirá bien en todos los dispositivos.

Lo único que en cada aparato los colores se verán un poco más saturados, oscuros, cálidos, etc. Pero habrás conseguido un estilo armónico, bien definido y de aspecto profesional.

Más que eso no puedes hacer.