Paleta de Colores Web: cómo combinarlos y elegir los mejores

La elección de la paleta de colores de tu web es una de las decisiones más importantes y esenciales que hay que tomar antes de ponerse a trabajar en la web de un negocio.

Te adelanto que si piensas que todo vale en este sentido o que da igual elegir unos colores u otros, te estás equivocando y mucho.

En más de una ocasión he visto por internet sitios web de negocios en los que mi primer pensamiento ha sido el siguiente:

“Por favor, que alguien me saque los ojos ahora mismo para dejar de ver esta aberración».

Si a cualquier cliente potencial que visite tu web se le llega a pasar esa misma idea por la cabeza…simplemente ya no será un cliente potencial.

Se irá rápidamente de tu sitio sin ni siquiera mirar que puedes ofrecerle.

En otras palabras, tu web estará espantando posibles clientes. O lo que es lo mismo, estará haciendo justo lo contrario de lo que debe hacer, que es atraerlos.

Pero no te preocupes, que vamos a ponerle solución a esto rápidamente.

Para empezar, vamos a aclarar primero exactamente qué es esto de la paleta de colores web.

O, si lo prefieres, puedes dejar de leer ahora mismo este post y ver este contenido en formato vídeo.

¿Qué es una paleta de colores web?

Una paleta de colores web es el conjunto de colores que se van a utilizar para diseñar y desarrollar la web de un negocio.

Esta paleta de colores hay que seleccionarla antes de empezar a crear tu web, no sólo porque la misma supone la base visual de tu proyecto sino también porque seleccionar los colores web adecuados, como te he comentado antes, puede suponer un factor importante a la hora de atraer o espantar clientes con tu web.

Toda paleta de colores web parte de un color principal del que, a partir de él, se añaden a dicha paleta otros colores secundarios que pueden ser totalmente diferentes (en base a ciertas reglas de diseño basadas en el círculo cromático como pueden ser la de los colores complementarios, análogos o la tríada).

Otra posibilidad para elegir estos colores secundarios es optar por seleccionar variantes de ese mismo color en diferentes tonalidades (como pueden ser las reglas de diseño monocromáticas o por tonos).

Pero, aparte de estas reglas más técnicas a nivel de diseño, las cuáles te enseñaré con más detalle más adelante, la paleta de colores web también se decide en base a más factores que vamos a ir viendo a continuación.

¿Cuántos colores debe tener una página web?

Cualquier sitio web profesional que se precie no debería de tener más de 3 colores distintos en su paleta de colores.

Importante: cuando te digo que no debería tener más de 3 colores, hago referencia únicamente al color principal y los secundarios. Estos colores (principal y secundarios) se elegirán en base a diferentes factores que explicaré más adelante en este mismo artículo.

Obviamente, en tu paleta de colores también tendrás que incluir aparte de estos 3 colores, colores neutros (blancos, grises y negros) que pueden ser utilizados sin problema incluso en más de una tonalidad.

Estos colores neutros se pueden combinar con cualquier color elegido (de ahí su nombre) y no serían directamente colores de tu paleta de colores web como tal, por lo que por ello no se cuentan en el total de cuántos colores debería tener una página web profesional.

Por ejemplo, mi paleta de color se basa en dos colores (azul y amarillo). Para ambos colores utilizo ciertos tonos monocromáticos que uso puntualmente según me interesa a nivel estratégico, pero en esencia son dos los colores que estoy utilizando.

¿Cuáles son los mejores colores para una página web?

La respuesta a esta pregunta es simple.

Depende.

¿De qué depende?

Pues también es muy simple: depende de tu negocio, depende de qué vendes y depende a quién se lo quieres vender.

Te pongo un ejemplo muy simple: ¿crees que los mejores colores para una página web que va enfocada a la venta de productos para niños serán los mismos mejores colores para una página web que vende servicios funerarios?

Vale, igual he sido muy extremo en el ejemplo, pero es para que veas claro que obviamente la respuesta es que NO.

Mientras que en el primer caso podemos elegir colores más alegres y variados, en el segundo lo más lógico es ir hacia colores un tanto más serios y formales. Incluso podríamos tirar únicamente al uso de colores neutros (blancos y negros por ejemplo).

Teniendo este ejemplo tan ilustrativo y extremo como base, ahora ya sabes que los mejores colores para una página web varían en función del proyecto y no puede haber una respuesta universal para esta pregunta.

Pero vamos a ir más allá. Vamos a descubrir como seleccionar los mejores colores posibles para tu página web en tu caso concreto.

¿Cómo elegir los colores para un diseño web?

Ahora te voy a decir algo que seguramente no sepas y que está directamente relacionado con el ejemplo anterior.

Los colores para una web no sólo tienen una función estética.

Los colores de una web también tienen una función o connotación psicológica.

Esta otra función es la que provoca que al usuario que ve nuestra web se le despierten una serie de emociones u otras.

Y, por si tampoco lo sabes, despertar las emociones correctas en tu clientes es lo que puede marcar la diferencia entre venderles tu servicio o producto a través de tu web o no hacerlo.

Por lo que, para elegir los colores para la web de tu negocio que despierten las emociones correctas, debes conocer cómo se siente tu cliente.

¿Cómo puedes descubrir estos sentimientos?

Pues lo puedes lograr basándote precisamente en tu negocio como hemos mencionado antes:

1. Actividad a la que te dedicas.
2. Tipo de público al que te diriges.
3. Tipo de solución que vas a ofrecer a ese cliente (y cómo va a hacerlo sentir).
4. Emociones o sesgos psicológicos que deseas que tu cliente perciba en cuanto a tu marca, servicio o producto.

Todo lo anterior debería ser la base para elegir tu paleta de colores web.

De hecho, te digo más aún: la identidad visual de tu negocio (tu logotipo, tipografía de la marca, símbolo, etc.) también deberían estar basados en ello.

Pero, además, también deberías realizar una correcta combinación de los colores web seleccionados para que aquello no parezca una feria ni una broma de mal gusto.

Vamos a ver en profundidad ambos factores.

Psicología del color en los colores de una web

Como ya te he comentado en el punto anterior, el primer factor en el que deberías basarte para elegir tu paleta de colores web es el factor psicológico.

O lo que es lo mismo, responder a estas tres preguntas y, en base a ellas, elegir tu color principal (e incluso los secundarios, aunque para esto también hay que tener en cuenta los consejos sobre cómo combinar colores web que veremos en el próximo apartado):

• ¿Qué quiero que transmita mi marca?
• ¿Qué emociones siente mi cliente en estos momentos?
• ¿Qué emociones quiero despertar en mi cliente con mi solución?

Cuando la respuesta a estas preguntas la tengas clara, mira a continuación qué transmite cada uno de los colores principales que puedes elegir…y decide.

También te dejaré algunas imágenes con ejemplos reales de webs que he diseñado yo mismo para que veas algunas aplicaciones de estos colores en base a estas connotaciones psicológicas.

Psicología del color Blanco

El blanco es conocido como el color de la perfección.

Evoca conceptos tales como la pureza, la inocencia o la virginidad entre otros.

Es por ello que este color es perfecto que predomine en proyectos web relacionados con la caridad, la religión, la sanidad o productos relacionados con dichas actividades.

Por ejemplo, yo lo he utilizado como color predominante a la hora de crear una tienda online para la venta de vestidos de comunión, ya que es un tipo de producto que mezcla esos conceptos de pureza e inocencia con la religión.

Psicología del color Negro

Este color está relacionado con todo lo que tenga que ver con el misterio y la muerte.

Creo que este significado es bastante claro para todos, ya que cada vez que vamos al entierro de una persona (al menos aquí, en occidente) el color predominante de la ropa no es otro que precisamente el negro.

Sin embargo, es un color también relacionado con la elegancia y el orden.

Es por ello que es muy utilizado en sitios web tales como museos, portfolios fotográficos o moda tanto de hombre como de mujer.

Psicología del color Azul

El color azul es considerado como un color beneficioso tanto para el cuerpo como para la mente ya que simboliza, entre otras cosas, la fé, la sabiduría, la tranquilidad y la calma.

¿Quién no ha tenido esa sensación de tranquilidad y calma al estar mirando tumbado el cielo azul de un día soleado?.

En el ámbito comercial, es un color enfocado al género masculino con lo que es una buena elección si tus productos o servicios van enfocados especialmente a los hombres.

Del mismo modo también es un color muy relacionado con el sector tecnológico que transmite profesionalidad.

Psicología del color Rojo

Este es un color muy asociado con la intensidad a nivel emocional.

El poner imágenes o texto en este color provoca que las personas tomen decisiones rápidas durante su estancia en una página web.

Es por ello que es un color muy utilizado en publicidad.

Cuenta además con significados eróticos que provocan una comunicación visual sugerente en quien los ve. Los labios o uñas rojos en publicidad o sitios web son una buena prueba de ello.

Pero también hay que tener mucho cuidado con su uso, ya que también puede evocar peligro (sólo tienes que ver de qué color es la señal de tráfico de STOP).

Psicología del color Amarillo

Es el color del astro rey por excelencia y por ello representa su luz, la alegría, la felicidad y la energía.

El amarillo estimula la actividad mental , provoca sentimientos agradables  y es un claro reclamo de atención. Transmite alegría, calor, ternura, prudencia y bondad.

Incluso, también puede llegar a transmitir riqueza y prosperidad (es el color del oro).

Un color muy recomendable para promocionar productos para niños y para el ocio en general. Además, es muy utilizado en las tiendas ya que ayuda a captar la atención de los clientes.

Psicología del color Morado o Púrpura

Es una mezcla de azul y rojo y, por tanto, una mezcla entre estabilidad y energía.

Está relacionado con la realeza, el poder, el lujo y la sabiduría. También puede representar la magia y el misterio. Por ello es un color muy utilizado en sectores como el de la videncia o la astrología.

Del mismo modo, es un color muy apropiado si tus productos van dirigidos a mujeres y para niños en su fase justamente anterior a la adolescencia.

Psicología del color Verde

No hay duda alguna para nadie existente sobre la faz de la Tierra que el verde es el color de la naturaleza por antonomasia.

Está relacionado con la seguridad (¿por qué creéis que el color verde es el que nos da paso en los semáforos? ) y en tonos oscuros se relaciona con el dinero.

Este es un color que sugiere en nuestro subconsciente estabilidad y resistencia . Se considera ideal para promocionar productos relacionados con la jardinería, el turismo rural, productos ecológicos o actividades al aire libre.

Psicología del color Marrón

Al igual que el verde, el color marrón está muy asociado con la naturaleza. Ten en cuenta que esto es normal, ya que es un color predominante, por ejemplo, en la los troncos de los árboles o la propia tierra del suelo.

Precisamente también por este motivo es un color que se asocia al otoño, a la calidez y lo acogedor. Transmite también constancia, fiabilidad y reflexión.

Es un color tremendamente utilizado en sectores alimenticios, como pueden ser tiendas que venden productos relacionados con el café, el chocolate o carnes. Del mismo modo, puede ser utilizado en sectores derivados de la alimentación (como la la medicina basada en la nutrición).

Psicología del color Naranja

Combina la energía del color rojo y la felicidad del color amarillo.

Representa el entusiasmo, la energía, la creatividad, el estímulo o el éxito, así como una marca amigable, alegre y confiable.

Por ello, es un color altamente recomendable para proyectos relacionados con el emprendimiento. Del mismo modo, también se puede utilizar en proyectos que vayan dirigidos hacia el público adolescente y joven o que vayan enfocados a comunicarse con ellos.

Cómo combinar tu paleta de colores web

Vamos al segundo punto importante: la correcta combinación de los colores de tu web.

Por si te lo estás preguntando… No. No vale combinar los colores de cualquier manera.

A continuación voy a dejarte cuatro sencillas reglas sobre como puedes combinar correctamente los colores web utilizar en tu sitio web para que tu elección sea todo un éxito.

Avisarte que no hace falta que uses todos los consejos a la vez que aquí te voy a dar para realizar buenas paletas de color para tu web.

Puedes elegir sólo algunos de ellos o combinar dos de estos consejos en tu paleta en función de tus gustos o de la psicología del color que quieras aplicar.

Usar colores de la misma gama cromática.

Esto es, utilizar el mismo color pero en diferentes tonalidades. Por ejemplo, dentro de un color azul establecido como principal, hay azules más oscuro o azules más claros.

Usar colores opuestos complementarios

Es decir, en un círculo cromático serían dos colores que se encuentran exactamente en el lado opuesto y que provocan un buen contraste para destacar los contenidos (textos, imágenes etc.) que nosotros queramos.

Muy recomendable el uso de colores opuestos en las llamadas a la acción de tu sitio web, para que dichas llamadas a la acción destaquen.

Usar colores en tríada

El concepto es similar al de los colores complementarios, pero en este caso se buscan colores opuestos en tres puntos del círculo cromático en vez de en dos como ocurría con los colores complementarios.

No abusar de los colores.

Ya lo hemos dicho antes: un sitio web con muchos colores diferentes acabará saturando y aburriendo al usuario que visita nuestra página web, haciendo que la abandone.

Es recomendable que tu web no tenga más de 2-3 colores sumando color principal y complementarios.

Coherencia con tu imagen corporativa

Soy consciente de que este no es un consejo sobre combinación de colores como tal.

Sin embargo, me ha parecido importante destacarlo en cuanto a la elección de colores de una web.

El consejo parece bastante obvio, sí.

Pero te puedo asegurar que me he encontrado con clientes que querían hacer su web con colores totalmente diferentes a los que tenían en su imagen corporativa.

Tu web debe ser el escaparate de tu negocio al mundo. Por ello, debe estar directamente relacionada con la imagen de tu negocio.

Si tu identidad corporativa (logotipo, publicidad, etc.) está basada en un color verde, es absurdo que tu web quieras ponerla en azul ó en morado.

Si haces esto, la gente no va a saber si realmente está en la web del negocio que está buscando. Se verá raro porque faltará coherencia entre los colores de tu marca y los de tu web.

Lo que sí podrías hacer es aprovechar que vas a crear una nueva web para dar un cambio a tu imagen corporativa y utilizar en ambos la misma paleta de color. Esa sí sería una buena elección y en este caso sí tendría sentido cambiar los colores de ambas cosas.

Las 5 mejores Herramientas online para hacer paletas de colores web

Para terminar, voy a mencionarte algunas de las que considero las mejores herramientas online para crear paletas de colores web de forma automática, personalizada o inspirándose en otros elementos como puede ser una simple imagen.

Por supuesto, he hecho una selección de las herramientas online que yo mismo utilizo o he utilizado en el pasado para inspirarme o crear paletas de colores que cumplan todo lo mencionado anteriormente. Pero existen muchísimas más.

Adobe Color

Para seguir estas sencillas reglas de combinación de colores web de una manera fácil y más gráfica os facilito el enlace de Adobe Color.

En esta web realizada por los creadores de los fantásticos programas de diseño de Adobe (Photoshop, Illustrator, Indesign etc.) podrás realizar tus propias paletas de colores personalizadas a partir de un color que selecciones como principal.

Una vez hecha esta selección, Adobe Color te pone muy fácil que puedas seleccionar y aplicar las diferentes reglas cromáticas que hemos mencionado en este artículo (colores complementarios, tríada, tonos, monocromáticos, etc.).

También cuenta con secciones de «Explorar» y «Tendencias» con modelos de paletas de colores ya creadas que pueden ayudarte a tomar una buena decisión respecto a tu paleta de colores web.

Coolors

Coolors es otra herramienta online para crear paletas de colores web a tu gusto.

El funcionamiento es muy similar a Adobe Color: puedes generar tus propias paletas de color, explorar paletas de color ya creadas o incluso basarte en paletas de color generadas a partir de una imagen.

Sin embargo, a mi personalmente me gusta algo menos que Adobe Color porque no tienes forma de generar una paleta de forma automática siguiendo reglas básicas de la rueda cromática como son la tríada, los colores complementarios, etc. Únicamente puedes generar paletas de color de forma personalizada.

Color Hunt

Esta es una herramienta online para buscar inspiración en paletas de colores ya creadas.

Con Color Hunt puedes elegir un estilo de color (como por ejemplo, tonos pastel, retro, neón, vintage) y, a partir de esa elección, te mostrará paletas de color relacionadas con dicho estilo.

Del mismo modo, también puedes ver las paletas de color más populares del mes o del año para descubrir tendencias y guardar las que más te gusten en su apartado de «Colecciones».

Brand Colors

Brand Colors es una herramienta que te proporciona combinaciones de colores corporativos de marcas muy conocidas a nivel mundial.

Estas paletas pueden servirte como inspiración para crear la tuya propia basada en dichas paletas de estas grandes empresas.

Color Supply

Color Supply es otra buena herramienta para crear paletas de colores web basadas en la rueda cromática al igual que hacíamos con Adobe Color.

En su apartado de «Crear» te aparecerá dicha rueda cromática. Selecciona un color y, a partir de ahí, te muestra combinaciones basadas en colores complementarios, análogos, tríada, complementarios separados, etc.

Con esta última herramienta finaliza este artículo sobre cómo elegir correctamente una paleta de colores web perfecta para la web de tu negocio.

Si quieres hacer algún aporte sobre este tema o simplemente decirme algo sobre lo escrito en este artículo, te espero en la zona de comentarios.