Cómo elegir y utilizar los colores en tu página web

Seguro que navegando por Internet te has encontrado con muchísimas páginas que tienen una apariencia poco profesional, incluso algunas llegan a ser un poco cutres.

También puede que hayas tenido esa sensación con tu propia web. Has comprado una plantilla chulísima y la has configurado lo mejor que has podido, pero el aspecto de tu sitio no transmite la profesionalidad que te gustaría.

Es normal, no eres diseñador web ni tienes conocimientos avanzados de diseño gráfico, así que es complicado que entiendas qué está fallando y más aún que seas capaz de arreglarlo por tu cuenta.

Los principales errores relacionados con el diseño que veo últimamente en las páginas web son:

  • Falta de calidad en las imágenes.
  • Falta de aire (pocos espacios en blanco, muchos contenidos amontonados).
  • Tipografías mal elegidas o combinadas.
  • Excesivo número de colores o combinaciones poco afortunadas.

Junta esos cuatro ingredientes y tendrás la respuesta al porqué del aspecto amateur de muchos sitios actuales.

En la entrada de hoy vamos a ver el tema de los colores, su importancia en el diseño web y cómo utilizarlos para conseguir que tu sitio tenga un aspecto radiante.

portada

La importancia de elegir el color adecuado

Cada color provoca en las personas unas sensaciones determinadas y está asociado a distintas emociones, por lo que éste influye de manera determinante en cómo se sienten y comportan los usuarios en tu web.

Acertar con la elección y cantidad de colores que utilizas en tu página es fundamental para que ésta refleje correctamente quién eres y cuál es la filosofía de tu negocio.

Piensa en la web de un spa. ¿Qué colores te vienen a la mente?

¿Y si piensas en una banda de Heavy Metal?

¿La clínica de un dentista?

Seguro que no te imaginas una web de un dentista con fondos negros y rojos, ni la del grupo de Heavy con tonos pastel.

A continuación te dejo una imagen con las emociones y conceptos que se asocian a cada color:

colores-web

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?

color-resaltado

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?

pingdom

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í:

pingdom2

¿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.

espn

 

weblounge

 

google

 

chris-ducker

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?

colores-intensos-vs-suaves

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

contrastados

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

misma-gama-cromatica

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.

porcentajes

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:

web-casas

snowboard

pictaculous-spa

oficina

otra-web

Look-Book

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

Tendencias en 2015 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.

colores-planos

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.

degradados-suaves

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.

verde

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.

contraste

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.

bicicleta

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.

Cómo elegir y utilizar los colores en tu página web
4.86 (97.14%) 21 votes

22 comentarios en “Cómo elegir y utilizar los colores en tu página web

  1. Buenos dias Arturo, quería saber si es posible cambiar los colores de mi Blogg, tengo un tema gratuito de los de wordpress, quiero ponerle una composicion de Adobe Color CC pero no se como hacerlo. Muchas gracias. Un Saludo Cordial

    • Hola Carlos,

      Por lo que veo utilizas el tema “The Box” que permite personalizar las cabeceras, los fondos y los colores, por lo que no tendrás problema en hacerlo.

      Los cambios tendrás que hacerlos desde el panel de control del tema.

      Un saludo.

  2. Genial artículo! A mí me viene en el momento indicado! Justo voy a pasarme a un tema de génesis, aún no sé cual, aunque quizá el de parallax sea buena opción, que veo que muchos tenéis metro pro… Aún tengo que pensarlo bien, y por supuesto elegir los colores será vital! Me aconsejas algún tema en especial? La homepage la haré para nuevos usuarios, tipo berto.
    En principio iba a usar TCB para hacerla pero no estoy seguro porque para añadir secciones hay que usar las landing pages, y por lo tanto al añadir el menú (tipo hamburguesa) en blanco, perderá consistencia con el resto de la web, así que igual lo haga con el editor normal, tú qué piensas?

    Un saludo y gracias 🙂

    • Hola Jorge,

      Me gusta Parallax, pero en esa linea prefiero Altitude: http://my.studiopress.com/themes/altitude/#demo-full

      Yo utilizo Metro Pro, pero por poco tiempo, ya está muy avanzado el diseño de mi nueva web así que antes de que acabe Septiembre habré abandonado mi plantilla actual. Estoy un poco cansado de verla por todas partes 🙂

      Si estás decidido a hacer una home tipo la de Berto, cosa que me parece muy bien (la mía va a ir también en esa linea) y vas a utilizar Altitude, por ejemplo, te resultará relativamente sencillo maquetarla con las propias herramientas del tema.

      Yo dejaría TCB para las páginas interiores.

      Los maquetadores visuales no se suelen llevar muy bien (en algunos casos son directamente incompatibles) con los temas de efecto parallax o que utilizan secciones por lo que no sé si sería una buena idea utilizarlo para maquetar la portada.

      Un saludo.

  3. Por cierto, se me olvidó mencionar que sobretodo el uso te TCB era para poder añadir el event manager y al pulsar en el botón de suscribirse que se abra el pop up, Perdona que te pregunte tanto, pero antes de ponerlo a instalar me vendría bien saber si sabes alguna manera de añadir este optin de dos pasos a la homepage.

    ¡Graciassss!

    • Hola Jorge,

      Te he mirado lo que me comentas y de manera directa y oficial no creo que pudieras hacerlo, la home de altitude se maqueta mediante widgets y ahí no puedes utilizar TCB.

      Lo que sí he conseguido es crear un lightbox, copiar el código que genera TCB y meterlo en un widget de texto, luego ese widget lo puedes ubicar donde quieras dentro de la home.

      Vamos, que poder se puede, pero dando vueltas y con truquillos.

      De todas formas esto lo he probado en plan rápido y no es una funcionalidad del plugin, así que a lo mejor vas a probarlo en tu web y no te funciona, vete tú a saber.

      Un saludo.

          • Ya he estado probando y en la frontpage, en los widgets, veo que copiando el código html desde TCB sí que funciona, siempre y cuando no le metamos un lightbox que se accione dando un click por ejemplo. Pero un formulario sí que deja meterlo directamente, al igual que vídeos (eso sí, se ve muy pequeñito y no se aplican muchas opciones de formato, así que he probado con Black Studio TinyMCE y ya se ve más grande el vídeo).

            También veo que el vídeo, al menos en formato full width no ocupa todo el ancho (le falta un poquitín y es un poco molesto), aunque sí es responsive, así que bueno, estas cosillas no son las ideales pero enredando un poco creo que podré tener un formulario decente, aunque preferiría el optin en dos pasos. Berto, si lees esto, ¿con qué plugin lo hacías tú?

            ¡Un saludo!

  4. ¡Genial post para no-diseñadores como yo, Arturo!

    Como ya sabes, el tema de los colores es un tema que tengo pendiente en mi nueva web y que no he abordado aún porque es un tema en el que me veo muy pez. Era algo en lo que necesito ponerme primero un poco las pilas antes de atreverme. Tu post es perfecto para empezar con ello 🙂

    ¡Un saludo!
    Berto

  5. Hay una aplicación gratuita y natural que no aparece en todas las personas por igual: el sentido común. No obstante esta aplicación por sí sola en manos de un no profesional puede producir resultados desastrosos. El sentido común (intelectual) hay que pasarlo al plano de la realidad y aquí es donde se rompe la idea de armonía. La aplicación gratuita natural de la que hablo es buena como punto de partida de lo que se quiere pero no es suficiente, la mayoría de las veces, para conseguir resultados sobresalientes o notables en el ámbito del diseño gráfico. Sentido común + sentido profesional = diseño singular. Sentido común + voluntarismo = gazpacho avinagrado web. El gazpacho avinagrado web es lo que suele salir cuando encargamos diseños gráficos, web o no, al sobrino, hija de la vecina, cuñado o primo.
    Y es que no hay mejor diseño que aquel que es sencillo y está cargado de sentido común. Pero ¿quién le pone el cascabel a ese gato? Normalmente un profesional.

    • Hola Julio,

      El problema es que aparte del sentido común se necesita tener buen gusto, conocimientos de diseño y unas mínimas nociones de la teoría del color.

      Eso o copiar una paleta de colores que haya hecho alguien con esas virtudes 😉

      Un saludo.

  6. Hola Arturo:

    Aquí estoy después de las vacaciones y medio de vuelta a la normalidad, no quería dejar pasar la semana sin pasarme por el blog y dejarte mi comentario.

    Me veo reflejada en mucho de lo que dices.

    ¿Recuerdas mi reacción cuando me presentaste el primer boceto de mi web, en tonos azules con los colores de mi anterior imagen?

    No me sentía nada identificada, me veía fría y poco cercana. Tú me conoces. ¿Transmitía mi verdadera imagen?

    Esos colores no reflejaban quién realmente soy, lo que sentía y quería transmitir.

    El cambio fue radical, me invitaste a tirarme a la piscina, me tiré de cabeza y fue la mejor decisión.

    No quería pasar esta oportunidad como seguidora, suscriptora, colaborador etc de agradecerte aquí en tu campamento base y públicamente el gran trabajo realizado. Los resultados a la vista están.

    GRACIAS! Arturo. 🙂

    Un fuerte abrazo!

    • Hola Yolanda,

      Pues claro que me acuerdo, en pocas páginas he tenido tan claro que el azul corporativo no representaba en absoluto el carácter del cliente.

      Te agradezco mucho tu comentario, aunque ya me has dicho mil veces lo contenta que estás con la web, aunque en el tema de los colores fuiste tú la que eligió y con mucho acierto 😉

      Muchas gracias a ti por pasarte.

      Un abrazo! 🙂

  7. Hola Arturo

    Buen articulo, pero es complejo hacer entran en razón a un cliente cuando se trata de usar los colores correctos en una web. De hecho aveces, cuando la inclemencia del tiempo no mejor con tantas recomendaciones que uno le da a un clientes, es mejor dejarlo ir y no matar un trabajo con mala calidad de diseño. Para nosotros es como hacernos un harakiri. De hecho hemos usado la psicología de los colores no ha dado buenos resultados. Que opinas de eso, como lo has pasado?

    Saludos!

Deja un comentario