Quizás no sea el artículo más original del mundo pero hoy toca hablar sobre cómo elegir colores web correctamente. En un blog sobre diseño web con WordPress no podemos dejarnos nada en el tintero. Y este tema es muy importante para que tu página parezca profesional. Si quieres saber cómo escoger bien los colores de tu web y qué herramientas utilizar, ¡sigue leyendo!
La psicología del color
Este es ese punto en el que te explico cantidad de teoría «aburrida» pero que si quieres entender el resto del artículo más vale que leas atentamente. ¡Tú mism@! ????
Para empezar debes saber que los colores comunican. Expresan valores, sentimientos y emociones. Por eso no puedes escoger un color simplemente porque te guste. Conviene saber qué expresa cada color si lo que quieres es transmitir bien los valores de tu negocio y tu marca. ¿Te imaginas que Kawasaki usara como color principal el color rosa? ¿Y Barbie el verde chillón?
Vamos a repasar en unas pinceladas qué simboliza cada color y para qué se suele usar.
Colores básicos: blanco y negro
Son quizás los colores en los que nadie piensa cuando está eligiendo los colores de su web. Pero date la oportunidad de que sean tus colores principales y tendrás una imagen diferente al resto, eso te lo aseguro.
Otro elemento importante que debes tener en cuenta es en relación a tu logotipo. Para que tu logo sea bueno, debe poder verse perfectamente en su versión en blanco y negro.
Blanco
El blanco no es igual a «no color». Cuando algo es blanco, es que tiene ese color, no es que no tenga colores. Representa la pureza y la elegancia. La gran ventaja del blanco es que puede combinarse con todos los colores. En diseño web se usa mucho en páginas simples, minimalistas, modernas y que quieren transmitir un aire premium.
Para quién es el blanco: lo relacionado con las novias (en el mundo occidental), la salud (doctores, enfermeras/os y dentistas visten de blanco) y la limpieza.
Negro
El negro es un color que tiene muchísimas aplicaciones y que curiosamente son bastante dispares. Se asocia a la muerte pero también a la elegancia, al poder y la formalidad. Es un color que a mi personalmente me encanta ya que me permite jugar con muchos otros colores.
Para quién es el negro: lujo, productos tecnológicos, procesos de luto y lo relacionado con el misterio o el ocultismo.
Colores primarios: azul, amarillo y rojo
Los colores primarios son aquellos colores que si los mezclas consigues cualquier otro color. Son los colores puros de la rueda cromática (tranquil@, más adelante explico qué es la rueda cromática).
Una curiosidad: los colores primarios no pueden ser interpretados subjetivamente, son iguales para todas las personas. Mola, ¿eh? ¡Compruébalo tú mism@!
Azul
El azul ha sido durante muchos años la niña bonita del diseño web. Casi todo lo que se le asocia es positivo: paz, tranquilidad, confianza, sosiego. No despierta ninguna emoción negativa. Pero precisamente el abuso de este color en Internet y en el branding hace que para muchas personas pase desapercibido. Es el color que más se usa entre el «top» de las marcas mundiales.
Para quién es el azul: prácticamente cualquier tipo de negocio puede beneficiarse de este color. En tonos pasteles y claros para infancia y religión. Sus tonalidades más brillantes para el deporte y los productos energéticos. Sus tonos más oscuros para negocios que tienen que transmitir estabilidad, fuerza y responsabilidad: abogacía, servicios financieros o seguridad.
Amarillo
El color amarillo es un color muy complicado pues deja de ser amarillo con cualquier variación o nueva tonalidad. Pero es un color muy interesante ya que está asociado a la energía de la juventud, al verano, al buen tiempo y a la alegría. ¡Es un color muy refrescante!
Para quién es el amarillo: lo relacionado con la infancia (unisex), el turismo, la venta de productos frescos y las agencias creativas. Si eres uno de ellos acertarás de pleno si usas el amarillo como color web principal.
Rojo
El color rojo, como el negro, posee muchos contrastes y contradicciones. Es el color de la pasión, la convicción y la fuerza. También se asocia a la maldad y al peligro. Es un color muy presente en la naturaleza y muchas veces significa veneno. Es un color intenso que debe usarse con moderación: en tonos brillantes expresa agresividad.
En diseño web no se suele usar como color principal dado que en Internet se asocia al peligro. Como diseñadora web lo utilizo poco y discretamente para resaltar algunos detalles.
Para quien es el color rojo: lo relacionado con el ámbito creativo y la publicidad, el sexo y el amor. Muchas empresas de emergencias y de seguridad lo usan mucho también (quizás demasiado).
Colores secundarios: verde, morado y naranja
Los colores secundarios son los que surgen de la mezcla de los colores primarios (azul, rojo y amarillo). Dependiendo de la cantidad de cada color primario obtendremos unas tonalidades u otras de los colores que quedan en medio en la rueda cromática (te recuerdo que lo explico más adelante). Los colores secundarios heredan parte de los valores de los colores que los componen.
Verde
El verde es el color del cual más variedades distinguimos los seres humanos. Esto es debido al hecho de que está presente en la naturaleza y evolutivamente es muy importante para nosotros. Es además el color de la esperanza y de la tranquilidad. Compuesto por el azul y el amarillo, el color verde transmite paz y calma (azul) pero con un punto de vitalidad (amarillo). Inspira los comienzos como cuando las plantas salen de la tierra.
Para quien es el verde: si tu público objetivo es joven, el verde puede ser un gran color. Si te dedicas al turismo rural, a algo ecológico o relacionado con la naturaleza, también será una buena opción.
Morado
El morado es otro ejemplo de color intenso por el cual uno no suele decantarse de buenas a primeras. Pero una vez empiezas a usarlo es muy fácil caer rendido a sus pies. Proviene del azul y el rojo, y se lleva lo mejor de cada casa: lujo, salud, romanticismo y realeza. Se suele asociar mucho a la creatividad y la imaginación, puesto que es un color muy peculiar y quien lo elige suele tener una personalidad abierta y juguetona.
Para quien es el morado: joyerías, hoteles y alquiler de coches de lujo y limusinas.
Naranja
El naranja se asocia al cambio, a la vitalidad y la alegría. Formado por los colores representativos de la energía (amarillo y rojo), el naranja dará un chute de vitaminas al elemento en el que lo pongas. También se asocia al otoño y a la tierra, a la vitalidad y a la salud. En términos de diseño web, quien no se atreve por el rojo a menudo opta por un naranja muy cercano a dicho color.
Para quien es el naranja: te interesa este color si trabajas con niños, con productos naturales o si tu negocio representa un verdadero cambio para tus clientes.
Cuántos colores poner en tu web
Esta no sería una buena entrada sobre cómo elegir colores web si no te dijera que la cosa es más fácil de lo que parece. La mayoría de herramientas para crear paletas de colores que veremos más adelante permiten tener unos 5 o 6 colores con los que jugar, pero no te agobies.
Si no tienes nociones de diseño mi consejo es que elijas dos o tres colores web como mucho, no más. La razón es simple: cuantos más pongas más te va a costar que todos casen bien unos con otros.
En cualquier caso ten en cuenta que sólo uno de los colores será el protagonista, el héroe. Los otros van a ser sus ayudantes, aquellos que estarán ahí cuando el protagonista ya esté haciendo cosas más importantes.
Consejos sobre el uso de los colores web
Color principal
Suele coincidir con el color principal de tu logotipo.
- Úsalo en el 80% de los elementos que tengan color en tu web como por ejemplo la cabecera, los botones, los enlaces y los fondos de las secciones.
- Si no quieres usarlo tanto como color plano, puedes degradarlo o integrarlo con imágenes.
- También puedes usar diferentes tonalidades del mismo color para crear una web más colorida pero que mantenga un mismo estilo cromático.
- Si quieres dar más dinamismo a la web, busca imágenes de fondo en las que sea el color principal aunque no sea el único.
Colores ayudantes
Escoge uno o dos colores más usando la rueda cromática y las herramientas adecuadas. Usa estos dos colores en el 20-30% de los elementos coloridos de tu web:
- Úsalos para los botones cuando el fondo del botón coincida con el color principal.
- Úsalos para los iconos y las imágenes cuando ya hayas usado demasiado el color principal.
- Puedes usarlos también para elementos menos importantes como los divisores o fondos de secciones.
- Si usas cajas de precios, haz que el principal sea el protagonista de la caja de precio que más te conviene vender y un color ayudante para el resto de cajas de precios. Si has usado correctamente el color principal, esto hará que esa caja destaque entre el resto.
Rueda cromática: la clave para elegir colores web
Ya llegamos al final de este artículo sobre cómo elegir colores web. Existen cantidad de herramientas para crear paletas de colores pero casi todas se basan en la rueda cromática.
La rueda cromática es una representación de todos los colores que existen. Te ayuda a pensar sobre el color y las diferentes tonalidades del mismo. La rueda cromática es una forma práctica de determinar si un par (o más) de colores se relacionan entre sí de forma armoniosa.
Cómo mezclar colores en la rueda es importante y contribuye a que los matices trabajen bien juntos. Para ello hay diferentes formas de escoger colores que se relacionan entre ellos. A continuación te listo las diferentes formas de escoger colores web con la rueda cromática y te pongo imágenes para las veas rápidamente:
- Monocromático: un color y las variaciones de ese color.
- Análogos: escoge tres colores uno junto al otro en el círculo cromático.
- Colores complementarios: se sitúan en lados opuestos en la rueda.
- Split de colores complementario: se utiliza un color y los dos colores adyacentes a su complementario.
- Dobles complementarios: es el más difícil de crear. Este concepto utiliza un color primario y complementa desde ambos lados del color opuesto en el círculo cromático.
- Triádicos: aquí hablamos de tres colores equidistantes en el círculo cromático.
Mis herramientas favoritas para crear paletas de colores
A continuación te pongo las herramientas que más utilizo como diseñadora web profesional para crear paletas de colores bonitas y profesionales.
Adobe Color
Anteriormente conocida como Kuler, esta herramienta de Adobe te permite crear combinaciones de colores basándote en todas las reglas cromáticas que te he explicado arriba. Lo que más me gusta de esta herramienta es que se integra perfectamente con todas las aplicaciones de Adobe. Esto me permite acceder rápidamente a todas tus paletas de colores desde Photoshop, Illustrator, etc.
Lo segundo que más valoro es que puedes explorar cantidad de paletas creadas por diseñadores (profesionales y amateurs). Tienes a tu disposición toneladas de inspiración. Además, puedes organizar tus paletas de colores web por bibliotecas y editar copias.
Si tuviera que escoger una sola herramienta para crear paletas, me quedaría con Adobe Color. Ya van 5 años creando webs a tiempo completo y he visto nacer, crecer y morir muchas herramientas para crear paletas de colores, pero Adobe Color siempre ha estado allí, a mi lado ????.
Pero como quiero que sepas de varias opciones, te voy a chivar otra herramienta que me ha salvado de algún apuro.
Design-seeds
Lo que me gusta de esta herramienta es que te permite explorar paletas de colores por estaciones del año, basándote en un solo color o simplemente buscando el producto que vendes. Me encanta ver cómo los colores de la naturaleza combinan tan bien entre ellos y nos sirven de inspiración y como herramienta de trabajo.
Admito que alguna ocasión me he pasado mucho rato viendo sus fotos y las paletas de colores relacionadas. Pero también que más de una vez he encontrado los colores de un proyecto entre sus propuestas.
Bonus de cómo elegir colores web
Guau! Me tienes impresionada! ¿Has aguantado hasta aquí? ¿En serio? Espero que no hayas bajado de golpe porque has visto la palabra «Bonus» en el resumen de la entrada. Bueno va, te creo y por eso te voy a hacer un regalito ????.
Éstas son unas paletas de colores creadas por mi para que te inspires. Porque a veces ni toda la teoría del mundo es suficiente y no queda más remedio que ver qué leches hacen los demás para inspirarse y dar en el clavo.
¿Quieres más paletas de colores? Pues tendrás que apuntarte a nuestro curso gratuito de WordPress y diseño web «Los 6 primeros pasos para que triunfes con tu web«. Te enviaré directamente a tu email un ebook en el que hablaremos sobre las claves del diseño web atractivo. En dicho ebook te daré más paletas de color.
Espero que este artículo sobre cómo elegir colores web te sea de ayuda en tu proyecto.
¿Tienes dudas? ¿Quieres comentarme algo?
Déjame tus pensamientos en la cajita de comentarios y los responderé encantada ????
8 comentarios en «Cómo elegir los colores de tu web [Guía + Herramientas]»
Hola Carolina, muy buen articulo el que brindas por acá. Que colores podrías sugerirme como abogada desde tu experiencia para uso en mis redes sociales, partiendo de algo nuevo, fresco, moderno, fuera de lo tradicional y que genere confianza, responsabilidad, elegancia, tranquilidad. Muchas Gracias!!!
Hola Naelys! Gracias por tu comentario 🙂
Si como valor principal quieres destacar que es algo nuevo y fuera de lo tradicional, optaría por una paleta con un color base púrpura. Tiene azul y rojo, que evocan seguridad y pasión. Además es un color elegante y femenino. Bien combinado puede generar paletas muy elegantes y sobrias.
Un saludo!
Me encanto el articulo! Me estoy emprendiendo en el negocio inmobiliario, y nose que colores elegir, quiero transmitir ante todo confianza y profesionalismo. Mi trabajo se destaca por mi seriedad y calidez en el trato con mis clientes. Es persona a persona, conectado los proyectos y sueños de las personas. Te agradecería algo de orientación. Saludos Elizabeth
Gracias Elizabeth! Pues para un negocio como el tuyo yo usaría color naranja (frescura, cambio) o el verde (renacimiento, calma). El azul también es una buena opción, pero investiga a tu competencia porque es un color muy utilizado para el branding en general y no querrás que te confundan con otras empresas similares 🙂
Un saludo guapa! Y muchos ánimos para esta etapa tan chula en la que estás 🙂
Qué artículo tan necesario Carolina!
Muchas veces se elige un color por gusto y no por un análisis previo. Y no sólo en diseño web. Hay que entender que el color también es comunicación.
La elección de uno u otro puede determinar cómo te va a percibir tu público y en este caso cómo se va a comportar en tu web. Por ejemplo el uso del contraste entre dos colores resaltará la llamada a la acción.
Como apunte, los colores primarios de luz que son los de las pantallas y las células de los ojos son el rojo, el verde y el azul. Magenta, azul y amarillo son los primarios en pigmentos, o en tinta para que nos entendamos.
No conocía Design-seeds. La he estado ojeando y me ha parecido una maravilla de página. Está perfectamente ordenada y con muchas posibilidades para elegir paletas. Me voy a llevar muchas horas viendo fotos ahí.
Lo dicho, muy completo el artículo.
Un saludo!
Hola Isa! Muchas gracias por tu comentario! 🙂
Tienes toda la razón: el color es algo sumamente importante en todo tipo de comunicación. Demasiadas veces, y es una opinión personal, me parece que no se le da el protagonismo que se merece. Y no sólo es importante por los valores comunicativos que transmite, también lo es a nivel de implicaciones técnicas (como ya introduces en tu comentario). Eso lo he dejado para otro post porque éste me estaba quedando muy largo 😛
¡Muchas gracias por tu aporte en cuanto a la diferencia entre colores de luz y de tinta! He modificado el post para que no haya lugar a confusión 🙂
Nos vemos por el blog! 😀
Buenos días, Carolina,
He leído tu artículo muy atentamente, y por lo que he visto el mejor color para un abogado es el azul. Estoy un poco liada porque estoy preparando un logo para un jurista y no se muy bien que color y figura le podría venir bien.
Muchísimas gracias por vuestra ayuda.
¡Hola Noelia! Gracias por tu comentario 😀
Pues el color azul es un muy buen color para un abogado. También lo podría ser el naranja, color del cambio, o el negro, siempre elegante y asociado a la formalidad. En cuanto a la figura, cuando no hay manera siempre intento ver muchos logos del mismo sector y cojo ideas de aquí y de allá hasta que algo hace ¡cling! en mi mente y aparecen ideas que encajan perfectamente con las necesidades comunicativas del cliente.
¡Ya nos contarás qué tal ha ido! Un saludo 🙂