Paletas de color para diseño web

  • Lidia Ruiz
Mónica Villar – Máster Diseño Web y Desarrollo Front-end

En comunicación visual, el color manda y esto no lo decimos nosotros. Ha habido muchas cabezas pensantes haciendo estudios que muestran que una persona echa de media 90 segundos para tomar decisiones subconscientes acerca de un producto y que, entre el 62 y el 90% de las veces, esas decisiones están basadas sólo en el color. Viendo estos números, lo de elegir los colores para tu diseño web al tuntún podemos ir descartándolo, ¿no?

El color es la forma más directa y rápida de dar una buena primera impresión. Así que, vamos a echar un ratillo en pensar qué queremos transmitir y con qué colores podemos transmitirlo.

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

Lo que te vamos a contar aquí te sonará de las clases de plástica, educación artística o cómo le llamen ahora. Pero merece la pena que le demos un repaso:

Colores cálidos

Diseño web color paletas cómo elegir

Pueden darle un subidón de energía al usuario pero, si se usan solos, tienden a sobreestimular. Lo mejor es combinarlos con colores neutrales para encontrar un buen equilibrio.

  • Rojo: activo, emocional, apasionado, fuerza, amor, intensidad.
  • Rosa: dulce, romántico, juguetón, cálido, suave.
  • Naranja: entusiasta, cálido, amistad, éxito, determinación.
  • Amarillo: juvenil, energético, fresco, lleno de vida, optimista.

Colores fríos

Diseño web color paletas cómo elegir

Al tener un efecto calmante en los usuarios, son los colores más usados en páginas webs. Aquí ocurre lo mismo que con los cálidos: todo en su justa medida. Si te pasas con ellos, pueden darle a tu web una impresión impersonal y fría.

  • Verde: fresco, calmado, relajado, en paz, esperanzador, confiado.
  • Azul: calmado, confiado, integridad, claridad, lealtad, fiabilidad.
  • Morado: lujo, ambición, espiritualidad, glamour, poder, nostalgia.

Colores neutros

Diseño web color paletas tonos neutros negro beige

Estos son los que nos van a dar más juego porque van a ser nuestro comodín. Mezclados con los colores fríos y los cálidos, nos sirven para quitarle un poco de fuerza al color principal y conseguir el equilibrio que necesitamos en diseño web.

  • Gris: respeto, sabiduría, paciencia, longevidad, inteligencia, modernismo.
  • Negro: poderoso, atrevido, serio, elegante, lujoso, dramático, formal.
  • Marrón: amistad, tierra, casa, aire libre, simplicidad, credibilidad, resistencia.

Cómo elegir los colores para tu diseño web

Elige el color principal

Diseño-web-cómo-elegir-paleta-de-color-morado

Esto es fácil, búscalo en el logo de tu marca o en otros materiales aplicados a ella. Si tienes varias opciones, tira de la psicología del color para elegir el que más se acerque a lo que quieres transmitir.

Elige los colores o tonos secundarios

Diseño web color paletas cómo elegir tonos cálidos naranja

Puedes quedarte sólo con tu color principal y sacar diferentes tonalidades del mismo o buscarle unos amigos.

Si te quedas con un solo color, usa unos tonos más claros para las secciones de la web y el principal para los botones de CTA (Call To Action) para que destaquen más. La rueda cromática del Adobe Color te va a venir como agua de mayo para hacer esto.

Si vas a buscar colores secundarios, no olvides que el contraste es una buena opción para resaltar áreas específicas como los CTA, pero no para tenerlo en toda la web ya que dificultaría la lectura.

La regla del 60-30-10

diseño-web-paleta-color-60-30-10-regla

Esta regla es lo más simple que hay y nos va a servir para crear armonía si usamos diferentes colores. Si usas tres colores, deberían estar presentes de la siguiente forma: 60% el color principal, 30% el secundario y 10% el color de realce.

10 paletas de color en diseño web para copiar

Cómo-elegir-la-paleta-de-color-para-diseño-web

Como te has portado bien y te has leído todo el post, vamos a darte algunos ejemplos de webs con paletas de colores para que puedas elegir entre ellas si todavía no te atreves a tirarte a la piscina del color sin manguitos.

No las hemos elegido ahí a lo random, las diez paletas las hemos sacado de la lista de  Awwwards, los premios más prestigiosos de diseño web.

Como elegir paletas colores diseño web 01
Madeo
Como elegir paletas colores diseño web
Gusto IDS
Como elegir paletas colores diseño web
Elespacio
Como elegir paletas colores diseño web
SMFB
Como elegir paletas colores diseño web
Bert
Como elegir paletas colores diseño web
Details
Como elegir paletas colores diseño web
Grosse Lanterne
Como elegir paletas colores diseño web
Panic
Como elegir paletas colores diseño web
Bright Media
Como elegir paletas colores diseño web
Bryan James

Esperamos que con esto os suden menos las manos a la hora de elegir una paleta de color. Si queréis aprender cómo cargar, guardar y gestionar paletas de color en Illustrator, los minions de Sleepydays tienen un post que os va a venir muy bien. Tampoco os olvidéis de que por aquí tenemos un curso de prototipado web con Adobe XD totalmente gratis para que aprendas a usar la herramienta desde cero.

Dinos lo que piensas

Tu email no se mostrará ;)