¿Cómo elegir la Paleta de Colores Adecuada para mi Proyecto Web?

como elegir paleta colores web

Índice

Índice de Contenidos

Arquitectura web o tipografía (tipo y tamaño) son temas estratégicos a la hora de trabajar en un proyecto web, porque es bien sabido cómo estos aspectos influyen en la usabilidad y en la respuesta del navegante. Pero quizás hayas pasado por alto un aspecto que influye poderosamente en la interacción del usuario con la web; nos estamos refiriendo a la paleta de colores a emplear para tener éxito. Sí, definitivamente, la gama de colores que utilizamos es un aspecto ampliamente estudiado y directamente relacionado con las acciones que realizan los visitantes en el site.

La página web es una escaparate y un reflejo de mi propio proyecto o negocio. Una cuidada selección de todos los elementos que la componen va a hacer que alcance altas tasas de conversión hacia el objetivo marcado. Por el contrario, cualquier decisión mal tomada, lleva a una web al abismo del tráfico insuficiente, bajos CTRs o un alto índice de rebote. ¿Qué podemos esperar cuando no satisfacemos las necesidades del usuario?

La psicología del color aplicada al diseño web

En 1810, el dramaturgo y pensador Johann Wolfgang von Goethe publicaba el libro Teoría de los colores; dicho tratado revolucionó a la comunidad científica de la época por lo novedoso de sus postulados. Posteriormente, diferentes autores han trabajado en esta línea llegando a interesantes conclusiones, siendo destacables los estudios de Eva Heller.

Heller, desarrolló toda una teoría sobre cómo inciden los colores en las decisiones y sentimientos las personas. Así, durante años, encuestó a una amplia muestra de sujetos, determinando lo que cada gama de colores evoca; diferentes colores provocan en nosotros serie de sentimientos e incluso nos llevan a tomar decisiones.

La psicología del color desarrollada por Eva Heller bebe de fuentes tan diversas como dispares: la psicología de la motivación y emoción, el diseño de interiores, las terapias alternativas o la moda, para ofrecernos una amplia descripción de qué sensaciones desencadena cada paleta cromática. A saber:

Gama de azules

Los colores azules, parecen provocar sentimientos positivos; todo es honestidad, confianza, compromiso y seriedad cuando predomina esta gama. ¿Es casual que plataformas que pretenden ganarse nuestra confianza utilicen como color corporativo el azul? La respuesta es no, el color azul provoca armonía y seguridad.

Los colores morados o verdes

La tranquilidad aparece con la gama de colores verdes, lo natural se apodera de nosotros y nos abandonamos a relajarnos. Por su parte, morados y violetas son símbolo de sofisticación, alta calidad y sutileza. Estos últimos son colores con resultados visuales muy interesantes y poco utilizados en páginas web.

La paleta cromática de rojos, naranjas y amarillos

Los colores de este tipo son una clara llamada a la acción. Gigantes del e-commerce (Amazon, Aliexpress, PcComponentes…) usan estas combinaciones de colores sobre todo en las zonas que hay que resaltar por algún motivo: botones, zona del carrito o productos más vendidos.

Además del call to action, estos tonos llevan a actuar de manera espontánea, los impulsos toman las riendas y transmiten alegría o ganas de vivir.

El rosa

Tradicionalmente relacionado con todo lo femenino, lo que responde más bien a una cuestión cultural. Por ello, frente al color rosa es inevitable pensar en delicadeza, amor o sueños.

Colores blancos o negros

Como ya sabemos, estas dos caras de una misma moneda no son colores en sí mismos. Concretamente, el blanco es la ausencia de color y el negro la mezcla de todos ellos. Si bien provocan sentimientos opuestos, en el diseño web se usan complementariamente: blanco para provocar limpieza y negro para resaltar sutilmente información. Ni que decir tiene, que conviene trabajar las zonas de texto (tipo entrada de blog), con la tradicional superposición de negro sobre blanco. Y un apunte: totalmente prohibido usar el negro como fondo en un área extensa.

Elegir paleta de colores adecuada

Las implicaciones visuales de las paletas de colores

A la hora de elegir una combinación de colores, no todo vale, existen una serie de esquemas de colores; para entenderlo, vamos a fijarnos en el círculo cromático. Existen unas combinaciones que se establecen la Teoría de los colores:

Monocromática

El color que se elige es uno solo y se van trabajando sus matices. Cabe señalar que jugando con la saturación de un mismo color, se consiguen efectos espectaculares por lo que la elección de este esquema de color, lejos de resultar aburrida, es muy recomendable.

Complementaria

En este caso, la combinación está basada en el uso de colores opuestos en la rueda cromática. Se suele utilizar un color cálido (tipo rojo o naranja) para coordinar con un color frío (azul, verde…). El contraste de color fatiga un tanto al ojo humano. Mi consejo es que huyas de este tipo de combinaciones.

Triangular

En esta elección, se utilizan tres colores distanciados en la rueda y como su propio nombre indica, elegidos de modo triangular. Resulta también poco recomendable por la estridencia de la mezcla de tonos y el efecto es similar a cuando elegimos colores complementarios.

Análoga

Empleamos colores consecutivos en el círculo cromático. Se crea una armonía y resulta muy atractivo visualmente independientemente de los tonos elegidos.

En conclusión, para el diseño de una página web, es mejor que se utilicen esquemas de colores o que se apueste por colores monocromáticos o bien análogos, por ser los que menos estridentes resultan. Este tipo de esquemas de color, no contrasta ni genera cansancio en el visitante, por lo que, contando con un contenido interesante que satisfaga la intención de búsqueda del usuario, el tiempo medio de visita será alto.

Tendencias a la hora de elegir el color de un site

La moda también arrasa también en lo que a diseño de páginas web se refiere. Cada temporada se establecen una serie de pautas que, si bien no tienen porqué seguirse al pie de la letra, suelen funcionar muy bien de cara a los usuarios.

Por ejemplo, en 2019 priman los colores brillantes, los tonos más vibrantes saltan de la paleta para inundar los diferente sitios del “world wide web”, aunque como ya he explicado es importante no saturar la retina del visitante, por lo que lo mejor es combinarlos con tonos neutros.

No todas las páginas son iguales: el color según tu sitio web

Aunque ya te he dado algunos apuntes sobre qué colores utilizar según sea el objetivo del proyecto web que deseas emprender, en este apartado concretaremos qué gama de colores deben ser utilizados según el tipo de web porque, como habrás imaginado, no es lo mismo trabajar en una tienda online que en un blog corporativo.

Qué paleta cromática usar según mi proyecto web

Lo primero que hay que pensar en todo momento es cómo captar la atención del visitante; una vez tenemos esta idea clara, veremos que cada tipo de página web tiene unas particularidades que hay que tener en cuenta para elegir una paleta cromática.

Si voy a trabajar un proyecto web de una página corporativa, prefiero usar colores que vayan en consonancia con la imagen de marca de la empresa. En este caso, el equipo de marketing orienta hacia el tipo de gama cromática a utilizar  en la página web.

Un consejo, cuánto más conozcas la organización, más fácil te será encontrar una paleta acorde a lo que la compañía proyecta. Eso sí, dado que en este caso será una sitio con gran cantidad de texto, se recomienda siempre respetar la regla de “negro sobre blanco”. Encabezados, menús, header y footer, serían resaltados con los colores de la paleta elegida.

Por otro lado, en el caso de estar trabajando en un e-commerce, también es importante fijarse en los colores que la marca ya incorpora y, de acuerdo con esto, seleccionar el esquema de color que vamos a usar. Conviene que el contenido importante vaya en color negro o similar (un color sólido en cualquier caso). Los diferentes botones de llamada a la acción o zonas como “carrito” o “login” deben también resaltarse.

En los blogs, debo trabajar de un modo similar a las webs corporativas. Las diferentes entradas deben estar escritas preferentemente sobre un fondo blanco y con tipografía negra; los menús resaltan siempre y un golpe maestro: intenta que las fotografías tengo un halo similar al color que predomina en la web.

Por qué necesitas un generador de paleta de colores

Para elegir la paleta de colores perfecta, lo ideal es ayudarte de una herramienta que te facilite la tarea de compaginar un color y otro, para conseguir el resultado que deseas. Como ya sabrás, no todas las herramientas son iguales y quiero recomendarte las cinco más usadas en diseño web por lo intuitivo de la interfaz, posibilidades que ofrecen y calidad de la versión gratuita.

Los 7 mejores generadores de paleta de colores

Paletton

Una herramienta de generación de paletas muy completa, fácil de usar por lo intuitiva que resulta y, además, gratuita. Básicamente, las paletas de colores se crean en base a un color principal que el usuario elige. En una fase posterior, Paletton te va sugiriendo tonos de la misma gama que combinan y se complementan.

Color Wheel de Adobe

No puede faltar en esta lista un producto de Adobe, los especialistas por excelencia en diseño web e imagen digital. Con la herramienta que proponen, podrás elegir un color y seleccionar el tipo de regla cromática quieres seguir (análogos, monocromáticos, triada, complementarios, compuestos, tonos y personalizados).

Color Wheel entonces te ofrecerá una serie de opciones para que elijas la que prefieres. Además, existe una opción donde pueden consultarse paletas que otros usuarios han creado.

Coolors

Muy similar a la anterior, aunque un poco más simple de usar. Coolors te permite crear hasta 5 colores por paleta y, además, también incluye un apartado para inspirarte mediante gamas cromáticas archivadas.

HTML color codes

Es una de las herramientas de generación de paletas de color más completas que existen para trabajar los colores HTML, HEX o HSL a golpe de un simple click. Aporta dentro de la propia plataforma diferentes tutoriales, para que el usuario encuentre siempre respuesta a sus dudas. Con HTML color codes te vas a asegurar encontrar el color que estabas buscando.

Palettr 

Incluyo esta herramienta por lo original que resulta. ¿Trabajando para un proyecto de un nicho en concreto? ¿Quieres saber cuáles son los colores más usados en ese campo? Palettr te ayuda.

Busca el tema que te interesa en el espacio de la interfaz habilitado para ello y Palettr te sugiere toda una paleta cromática a trabajar para el tema en concreto.

COLURSLovers

Puede servir como fuente de inspiración y como modo de testear un proyecto, ya que a la vez que se elige una paleta en concreto, la comunidad va votando la popularidad de la misma.

ColorZilla

Se trata de una extensión de Chrome o Firefox que permite extraer el código de color de una imagen con un simple click. Posteriormente permite llevarnos este código y pegarlo en la herramienta de edición de imagen. Es muy útil cuando queremos que todas las imágenes de una web, respiren el mismo aire.

La “enorme” guía de Nick Kolenda sobre la Psicología del Color

Aunque no se trata de una herramienta para trabajar el color como tal, me gustaría darte a conocer también la guía que el psicólogo Nick Kolenda nos ofrece sobre las implicaciones del color en marketing. 

Se trata de un interesante recurso gratuito, dónde puede encontrarse mucha y muy útil información de la Psicología del Color, ofrecida por un experto en percepción y comportamiento del consumidor.

¿Determina la paleta cromática que elijo el éxito de un site?

¿Influye el color realmente en la conducta? Lejos de tomar esta idea como un axioma, lo que sí debe tenerse claro es que, ya sea por estética, usabilidad o por consonancia con la imagen de marca, la elección de la paleta cromática a usar en un proyecto web, debe ser una decisión sólida y fundamentada.

Esta elección va a encumbrar al proyecto web y puede hacer llevarlo a un éxito seguro. No obstante, confía siempre en tu intuición y tu sentido de la estética. Por último, un consejo: prepara siempre varias alternativas de esquemas de color para poder comparar efectos y resultados finales.

 

¿Necesitas ayuda?