Cómo escoger y combinar los colores en tu página web

Este es un post que hacía tiempo que tenía ganas de escribir, pues trata uno de los pilares del diseño en general y del diseño web en particular, junto a las tipografías.

Aunque esta temática puede dar para mucho y podría enrollarme como las persianas hasta que deseases meterme en un tanque con pirañas, voy a intentar no ponerme demasiado técnico ni pejiguero, pues de lo que trata este artículo es de que entiendas cómo sacar partido a los colores en tu página web, no de que te conviertas en el Leo Messi de los colorines y que cada vez que vayas a Primark te vuelvas loc@ para escoger unos calcetines.

Venga, coge unos Chasquis, que vamos a ello… 😉

Fases para diseñar una web

La importancia del color en tu página web

En los anales (no los de Nacho Vidal) de la historia de Internet, existe una enorme evolución en el uso de los colores para el diseño web.

Al principio, las páginas web eran ridículamente horteras y casi todo el mundo utilizaba tropecientos colores con el mismo gusto de una poligonera escogiendo su vestido de novia.

Eso también era debido a las limitaciones existentes, tanto por las posibilidades de uso del color con código HTML (antes incluso de la aparición de los estilos CSS) como por la calidad de los monitores de tubo que teníamos todos en aquellos años de nacimiento de la red de redes.

¡Qué tiempos aquellos con buscadores como Altavista y Ozú, de conectarnos a la red dejando el teléfono inoperativo o sin Redes Sociales!

Hoy en día la cosa cambia mucho y disponemos de un montón de opciones a la hora de utilizar la gama cromática en nuestra web, así que no tenemos excusas si lo hacemos mal.

Gracias al círculo cromático -que más abajo te explicaré- y a herramientas existentes en Internet para buscar inspiración, tenemos mucho avanzado.

Sé consciente de que en el uso de los colores que hagas en tu web estará gran parte de la diferencia entre conseguir tus objetivos o no conseguirlos, por lo que es súper importante que te tomes tu tiempo a seleccionar bien los colores.

Los 3 errores más comunes a la hora de escoger los colores de tu web

Cuando nos ponemos manos a la obra a crear una página web en WordPress, es posible que caigamos en ciertos errores.

Y como algunas cagadas épicas suelen estar asociadas al uso de los colores, antes de hablarte de cómo escogerlos, quiero destacarte 3 de los más flagrantes que debes evitar antes de dar ese paso:

Escoger los colores al azar

A mí me gusta mucho el color negro. Y el azul… Y el morado… ¿Crees que simplemente porque me gustan estos colores ya quedarán bien en mi web? Puede que sí. O puede que no.

Por eso no debemos dejarnos llevar por escoger los colores de cualquier manera o por nuestros simples gustos.

Usar muchos colores

Cuando comenzamos la tarea de elegir la gama cromática que utilizaremos en nuestra página web, podemos vernos abrumados por tantas opciones.

No vengas demasiado arriba y te pongas en modo flipao tras fumarse un porrito porque es mejor no pasarse a la hora de escoger la cantidad de colores para tu página web: con 3 colores deberías tener más que suficiente.

Combinar mal los colores

Otro de los errores que más abunda por este mundo digital de nuestro señor es el de utilizar una combinación de colores desacertada.

Los típicos fallos que se suelen cometer en este aspecto son los de escoger colores que no se corresponden bien en la rueda de color y/o escoger colores que no contrastan bien unos sobre otros.

Modos de color existentes

Antes de meternos en harina en el tema de cómo escoger bien los colores para tu página web, debes tener algunos conceptos bien claros sobre los colores, no vaya a ser que te lleves alguna sorpresita y no sepas porqué el color que estabas utilizando en Photoshop para un icono luego se ve como el Ecce Homo al subirlo a tu web.

Por eso es muy importante conocer y diferenciar los diferentes modos de color que existen internacionalmente.

Lo más importante que debes saber a la hora de trabajar con colores es que hay modos de color para utilizar con luz (monitores, escáneres, cámaras, proyectores, televisión, móviles…) y modos de color para utilizar con tintas (impresoras, imprentas, máquinas de revelado de fotografías…)

Aunque existen unos cuantos modos de color adicionales, como son el HSB o el LAB, aquí solo te voy a enseñar los más importantes que debes tener en mente para no liarte:

RGB

Este modo de color es el modo estandarizado para cualquier dispositivo que utilice luz. Es un modelo que mezcla tres canales: Red (R), Green (G), Blue (B), o sea Rojo, Verde y Azul.

Con estos tres colores base se componen todos los demás en base a la adición o suma de sus luces emitidas.

Cada uno de los canales RGB tiene unos valores que van de 0 a 255.

Por ejemplo, el color negro se representa (0, 0, 0), es decir, ausencia total de luz en los tres canales. Por otro lado, el color blanco se representaría con (255, 255, 255). El resto de colores se iría representando añadiendo o quitando cantidad numérica en cada canal.

CMYK

El color CMYK es el modo internacional utilizado para tintas: Cyan (C), Magenta (M), Yellow (Y) y Black (K). Traducido al español: cian, magenta, amarillo y negro.

Si el modo RGB se basaba en la suma (colores aditivos) de colores, éste se basa en la resta (colores sustractivos).

Lo que hace básicamente es que, partiendo del blanco (suma de todos los colores), se va quitando color mediante el añadido de tintas basadas en cían, magenta y amarillo.

Así como los colores RGB van del 0 al 255, los colores CMYK se añaden por porcentaje del 0 al 100%.

El 100% de cada uno de los colores Cian, Magenta y Amarillo debería dar como resultado el color negro. Sin embargo, como el negro resultante de la suma no es negro puro, este modo se complementa con la tinta negra (K).

HEX

HEX es la abreviatura de Hexadecimal.

El modo de color hexadecimal es el más utilizado en el diseño de páginas web, aunque el RGB también se utiliza mucho; de hecho, los colores hexadecimales están basados en el modo RGB.

Es un modo de color basado en códigos de números y letras.

Si quieres saber más sobre este modo de color, echa un vistazo a esto.

Gamas de colores

Los colores se agrupan en dos gamas según su temperatura, algo que debería ser tu punto de partida a la hora de ir filtrando los colores que necesita tu negocio.

Las gamas generales de colores por los que podremos optar a modo general: cálida y fría.

Gama cálida

La gama cálida de colores está formada por colores que van desde el magenta hasta el amarillo verdoso en el círculo cromático. Estos tonos son ideales para llamar la atención del visitante; eso sí, no te vengas demasiado arriba y utilízalos con cuidadín.

Gama fría

Los colores fríos van del azul al lila, morado… Esta gama es utilizada con frecuencia por negocios que quieren representar seriedad y sobriedad, pues transmiten calma.

Qué es el círculo cromático y cómo utilizarlo

Para poder entender cómo se comportan los colores entre sí y para sacarles el mayor partido posible, es importante conocer el elemento que da sentido a todo: el círculo cromático.

El círculo cromático o rueda de color se compone de 12 colores principales:

Colores primarios

Los colores primarios son el rojo, amarillo y azul.

Colores secundarios

Estos colores son el verde, morado y naranja, los cuales se consiguen mezclando entre sí los colores primarios a partes iguales.

Colores terciarios

Son colores intermedios que se consiguen mezclando primarios con secundarios a partes iguales.

A la hora de seleccionar los colores de tu web utilizando la rueda de color, hay dos maneras principales de hacerlo para no equivocarte e ir sobre seguro: escogiendo colores complementarios o análogos (existen otras formas, pero estas son las más recomendadas si no eres un experto en temas de diseño):

Colores complementarios

Los colores complementarios están situados en el lugar totalmente opuesto en el círculo cromático y son totalmente diferentes.

Colores análogos

Son colores que están pegados los unos a los otros en la rueda de color y «se llevan bien».

Psicología de los colores

Los colores tienen una gran influencia en todo. Además de influir en nuestros sentimientos y estados de ánimo, los colores también provocan acciones.

La psicología del color puede ayudar a hacer tu marca más fuerte, llevar a los visitantes a páginas o acciones concretas dentro de tu web y a vender más.

A continuación te muestro qué podrá aportar cada color a tu página web:

Rojo

El color rojo se asocia con la energía, emoción, pasión, amor o acción. También puede despertar sentimientos negativos como violencia, agresividad, fuego o peligro.

  • Cuándo utilizarlo:  el rojo es un color asociado a realizar acciones. Es muy apto para páginas de restaurantes de comida rápida, barberías o gimnasios.
  • Cuándo no utilizarlo: el rojo es un color del que no se debe abusar. No se suele utilizar en páginas relacionadas del tipo abogados, gestorías, salud o naturaleza.

Azul

El azul se asocia con salud, profesionalidad, eficacia, calidad, seriedad, sabiduría, lealtad, fuerza, confianza o seguridad.

  • Cuándo utilizarlo: el azul suele vincularse a grandes negocios, como bancos, compañías eléctricas o servicios públicos por ser un color neutro en cuanto a las sensaciones que provoca y se asocia con la confianza y profesionalidad. Muy apto para temas de medicina y salud, tecnología, ciencia, política o servicios. El azul oscuro se asocia a negocios como abogados o consultorías.
  • Cuándo no utilizarlo: el azul se encuentra en el lugar opuesto al rojo en lo que a psicología se refiere, por lo que no es bueno utilizarlo en negocios que quieran transmitir energía, acción o pasión.

Amarillo

Yo siempre recuerdo un Seat Ibiza amarillo que se paseaba por mi pueblo hace años… No pasaba desapercibido para nadie. Y eso es porque es quizá el color más llamativo entre los colores principales de la rueda de color

Se asocia con felicidad, vitalidad, alegría, optimismo o competitividad. En términos negativos, el amarillo se asocia con el fraude, lo chabacano o la vulgaridad.

  • Cuándo utilizarlo: usa el amarillo fuerte (no demasiado) para animar a tus visitas o crear una sensación de felicidad. Usa tonos más suaves de amarillo para brindar una sensación de felicidad más calmada. El amarillo puede dar muy buenos resultados para los botones de llamada a la acción.
  • Cuándo no utilizarlo: el amarillo es un color que, usado en exceso, puede resultar cansino. Puede saturar nuestra vista, así que no te pases con él.

Verde

El verde se asocia con salud, bienestar, tranquilidad, tierra, naturaleza y medio ambiente, dinero, frescura, generosidad, fertilidad, buena suerte o paz.

  • Cuándo utilizarlo: el verde es un color muy bueno para la vista y para generar un efecto relajante o de tranquilidad. Es un color muy utilizado en webs de salud, como clínicas, dentistas, fisioterapeutas y también relacionadas con la naturaleza o centros de belleza.
  • Cuándo no utilizarlo: es poco apropiado para negocios asociados a tecnología, automoción o productos de lujo.

Naranja

El naranja se asocia con confianza, éxito, diversión, valor, ambición, emoción, felicidad, energía o entusiasmo.

  • Cuándo utilizarlo: el color naranja es una buena opción para negocios de automoción, tecnología o entretenimiento.
  • Cuándo no utilizarlo: el naranja es un color secundario que no es ni muy suave ni demasiado agresivo a la vista, pero hay que tener cuidado con abusar de él.

Morado

El morado se utiliza para transmitir ambición, creatividad, imaginación, autoridad, sofisticación, poder, lujo, misterio, sabiduría y respeto. También se asocia mucho con la mujer y con la espiritualidad.

  • Cuándo utilizarlo: los morados oscuros dan sensación de lujo y realeza; los tonos más claros transmiten amor y romanticismo. El morado también es muy bueno para productos de belleza, masajistas, astrología o terapias alternativas.
  • Cuándo no utilizarlo: cuidado con abusar del color morado, pues puede hacer que tu web luzca algo triste o aburrida. No es un color muy bueno para llamar la atención y, al encontrarse entre el rojo y el azul, no acaba de transmitir ni la psicología de uno ni del otro, resultando algo confuso.

Marrón

El marrón es un color de la gama cálida que podemos vincular con la tierra, la naturaleza o los animales. También evoca sensaciones como confianza y seguridad.

  • Cuándo utilizarlo: el marrón puede asociarse a ciertos alimentos como cereales, café, chocolate, cacao y otros productos naturales.
  • Cuándo no utilizarlo: cuando pensamos en el marrón nos vienen a la cabeza sentimientos tristes, sosos y aburridos. También puede asociarse a algo poco claro. No es un color muy apto para llamadas a la acción.

Rosa

El rosa puede representar romanticismo, feminismo, amor o inocencia.

  • Cuándo utilizarlo: perfecto para productos o páginas para mujeres. También lo podemos asociar a productos infantiles, de belleza o relacionados con eventos como bodas, bautizos, etc.
  • Cuándo no utilizarlo: dependiendo de la saturación y el tono de rosa, puede ser demasiado llamativo a la vista o transmitir demasiada calma.

Blanco

El color blanco podemos decir que vale para todo. Es el color base por excelencia para cualquier web, por lo que si queremos transmitir limpieza, claridad o pureza, debemos usar el blanco como color fundamental.

  • Cuándo utilizarlo: el blanco es un color muy recurrente para webs de salud. También puede emplearse para productos de lujo combinado con colores dorados, plateados y ocres.
  • Cuándo no utilizarlo: como te decía, el blanco vale para todo, así que no existe ninguna pauta clara para no utilizarlo. Lo único que sí te recomiendo es no abusar de él para textos de párrafo sobre fondos de color, pues la lectura no resulta agradable.

Negro

El negro es un color que asociamos con clase, calidad, seriedad, elegancia, profesionalidad, sofisticación, autoridad, poder o formalidad. En términos negativos puede asociarse a la muerte, el mal, lo misterioso o algo prohibido.

  • Cuándo utilizarlo: el negro puede combinarse con cualquier otro color, pero dependiendo de la cantidad de negro que usemos o si se utiliza como fondo general en una web, puede dar un aspecto más elegante, más sobrio o incluso más agresivo y moderno a una web. Muy bueno para productos sofisticados, gimnasios, productos para ciertos colectivos (moteros, amantes de la música heavie…), barberías, negocios de tatuajes…
  • Cuándo no utilizarlo: el negro, salvo que sea para una web de una temática muy específica, hay que utilizarlo con moderación, pues puede generar sensaciones negativas.

Qué sensación quieres que transmita tu web

Ahora que conoces la teoría del color y las mejores prácticas, párate un rato a pensar qué sensaciones quieres que genere tu negocio.

Lo que importa aquí es lo que quieres transmitir y qué quieres conseguir con tu página web. Dependiendo de esto, deberías tirar por un lado o por otro.

Además, otro de los aspectos que más va a pesar a la hora de decidirte va a ser la actividad a la que te dediques, pues no es lo mismo tener una gestoría que un sex shop, ¡a que no!

Los 3 colores principales que debería tener tu página web

Como ya has leído en el apartado anterior sobre algunos errores de diseño web que comete mucha gente, te recomiendo que para empezar utilices únicamente 3 colores en tu web.

Pero, ¿esos colores debes utilizarlos sin ton ni son y mezclándolos entre ellos sin sentido?

¡Vaya preguntita, Edu!

Pues evidentemente NO.

Es muy importante que escojas dos colores generales y uno para las llamadas a la acción (acento) y detalles destacados.

De los dos colores generales, selecciona uno como primario para que sea el color principal sobre el que vas a basar tu diseño y el otro como secundario, que hará el papel de color de apoyo.

Ejemplo con colores complementarios:

  • Color primario: azul petróleo.
  • Color secundario: azul celeste.
  • Color de acento: amarillo ocre.

¡Ves!, los dos azules funcionan muy bien juntos y el ocre le da el toque de acción.

Adobe Color CC: la herramienta total para crear tu gama de colores

Ahora que ya conoces bastante teoría, vamos a la práctica.

Aunque existen en la red un buen puñado de herramientas para volvernos turuletos a la hora de inspirarnos para elegir los colores de nuestra web, hay una que es la más conocida, utilizada y completa: Adobe Color CC.

Adobe es una empresa bien conocida en el mundo del diseño, ya que Photoshop, Illustrator, Acrobat y otras cuantas herramientas conocidas, son de su propiedad.

Veamos los apartados más destacados de Adobe Color CC:

Crear > Rueda cromática

En este apartado te encontrarás con un círculo cromático y diferentes reglas de armonía del color para buscar tu paleta de colores.

Aunque podrás encontrar hasta 10 reglas de armonía diferentes (¡locura!) para crear tu paleta de colores en Adobe Color CC, yo te voy a hablar de las más utilizadas para que no te agobies:

Análogos

La paleta de colores que conseguirás utilizando esta regla está compuesta por colores similares al elegido y están pegados los unos a los otros en la rueda de color. Se pueden escoger hasta 5 colores, aunque con 3 tendrías suficiente.

Complementarios

Esta opción te permite encontrar colores que son compatibles entre sí. Están en el lugar opuesto en el círculo cromático, pero funcionan a la perfección juntos.

Triada

Aquí, la paleta de color está formada por tres colores opuestos en la rueda de color (aunque Adobe Color CC te da hasta 5 opciones), los cuales forman un triángulo. Están equidistantes entre sí pero funcionan muy bien juntos, pues siguen el patrón de colores complementarios.

Tonos

En esta regla, las variaciones de color se generan variando el tono de un único color base.

Crear > Extraer tema

En este apartado podrás crear una paleta de colores a partir de una imagen. Muy interesante.

Explorar

Aquí puedes inspirarte buscando ideas basadas en colores, estilos o palabras clave que tengan que ver con tu negocio, por ejemplo.

Otras herramientas para escoger la gama cromática de tu web

Además de Adobe Color CC, existen otras herramientas con las que crear tu paleta de colores e inspirarte. Te las dejo aquí por si quieres echarles un ojo:

Ejemplos de páginas web con un BUEN uso del color

Ahora te dejo algunos ejemplos de webs que han aplicado un buen uso del color:

Colores blancos, grises y dorados que transmiten formalidad y elegancia.

 

Buen uso de varios colores complementarios que dan sensación de frescura y alegría.

 

Web muy limpia con colores muy blancos y utilizando el rojo como color de acento para dirigir la atención.

 

Web muy clara y limpia. Color blanco y grises muy claros como base y toques de dorado para transmitir lujo y exclusividad.

 

Web con colores complementarios que sin embargo casan muy bien juntos.

Consejos a la hora de utilizar los colores en tu web

Y ya para terminar este megapost, voy a dejarte aquí unos consejillos que te vendrán de perlas para utilizar los colores en tu web como un pro:

  • Dedica tiempo a escoger bien tus colores. No te precipites y pide opinión a amigos y familiares.
  • Escoge los colores en base a la imagen corporativa de tu negocio y a tu tipo de cliente ideal.
  • Minimalismo. Menos es más.
  • No te creas Picasso y evita improvisaciones desastrosas. Ve a lo seguro.
  • Destaca solo lo destacable. Si quieres que cada botón, título, cuadro, etc. destaque, nada lo hará.
  • Utiliza colores que no cansen la vista, pues tus visitantes se irán.
  • La importancia de las llamadas a la acción: usa el color de acento a poder ser solo para los CTAs y algunos detalles.
  • El poder del color blanco: como ya te conté arriba, el blanco vale para casi todo. Juega con él para dar aire y claridad a tu web.
  • Para los textos de párrafo NO utilices colores raros o grises poco legibles. Utiliza el color #333 o #444, que no son negro puro pero van genial.
  • Utiliza diferentes tonos de grises como colores de apoyo para fondos de secciones o widgets.

Conclusión

Antes de ponerte a diseñar tu web, tómate en serio la tarea de escoger tus colores, pues una vez lo hagas, tu marca y las sensaciones que transmita dependerán en gran medida de estas decisiones.

No te vayas de innovador/a y guíate por la teoría del color, que para algo ha sido creada.

Y hasta aquí este súper, mega, ultra post en el que he sacado toda la artillería, como viene siendo habitual, para que no digas que no tienes información sobre los colorines que debes utilizar en tu flamante y deslumbrante página web.

Ahora ve a tus perfiles de redes sociales y lo compartes con el mundo… Porfaaaaaa!!! 😉

Hasta luego, cocodrilooooo!!!!!

¡Haz clic para puntuar esta entrada!
(Votos: 6 Promedio: 5)

6 comentarios en “Cómo escoger y combinar los colores en tu página web”

  1. He leido varias veces este post, y sigo consultandolo y haciendo anotaciones sobre el tema. La informacion aqui presentada es valiosa y recomendada sin reservas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  • Responsable: Eduardo Rubianes.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a FastComet INC que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.
Scroll al inicio

Las 9 fases cruciales para diseñar una web atractiva y efectiva.

pasos para diseñar una página web

Guía GRATUITA por entregas con la que aprenderás a diseñar una web profesional y a conseguir resultados reales para vivir de ella.