Blog de Aula CM

Community Manager, Marketing de Contenidos, Blogs y SEO

herramientas-elegir-gama-colores-74.svg

15 Herramientas para elegir Gamas de Colores en Dise√Īo Gr√°fico y Web

La paleta de colores que usamos en el dise√Īo de una p√°gina web pueden convertirse en una parte fundamental para la experiencia del usuario. En la mayor√≠a de ocasiones ya tendremos alg√ļn color o gama de colores definidos por la imagen corporativa, pero es muy interesante utilizar otros colores que puedan ser compatibles y hacer que el dise√Īo de tu p√°gina llame la atenci√≥n de¬†los usuarios y sea envidiada por tu competencia.

Antes de comenzar con las herramientas que te ayudar√°n a elegir la mejor gama de colores para tu p√°gina web, es interesante conocer algo m√°s sobre los colores y factores que pueden influir en ellos. De esta forma, podr√°s elegir unos colores que acompa√Īen tanto en dise√Īo como en significado a lo que quieres transmitir.

 

Fusión perfiles FacebookPsicología del color

Conocer el significado que puede tener cada color en la mente humana puede ser muy interesante para elegir la mejor¬†paleta de colores posible. Adem√°s, este conocimiento te permite elegir una gama de colores que acompa√Īe y ayude a transmitir de forma fiel y correcta los atributos de la marca.

Blanco

El color blanco es uno de los m√°s usados en el dise√Īo web actual, ya que transmite al usuario una sensaci√≥n de pureza, frescura, limpieza y simplicidad. Adem√°s, si usas este color como fondo permitir√°s que el ojo del usuario descanse y perciba mejor las llamadas de acci√≥n.

Rojo

El rojo es un color que transmite a las personas sensaciones ligadas a la pasi√≥n, la impulsividad, deseo y fuerza. Por lo tanto es muy √ļtil para webs que vendan productos o traten temas relacionados con el amor o el deseo.

Naranja

El color naranja está ligado a sensaciones de calidez, creatividad, éxito y ánimo. Esto hace que sea un color muy interesante para crear páginas web personales o de negocios.

Amarillo

El amarillo suele estar relacionado con significados como: energía, diversión, alegría e innovación. Sin embargo, este es el color que más contradicciones genera entre los usuarios ya que puede llegar a generar una sensación de irritación.

Verde

El color verde suele estar ligado a sentimientos relacionados con la naturaleza, equilibrio, crecimiento o estabilidad. Es muy interesante su uso en una web porque ayuda a generar confianza en el usuario y que se sienta relajado.

Azul

El color azul suele ser un color muy utilizado a la hora de crear p√°ginas web de negocios, ya que transmite sentimientos como libertad, fidelidad, progreso, seriedad y lealtad.

Morado

El color morado puede ser muy interesante a la hora de crear una web ya que transmite sensaciones ligadas con la serenidad, elegancia, sensualidad y eclecticismo.

Rosa

El rosa puede proporcionar sensaciones muy buenas para los usuarios en una web, ya que va ligado a sentimientos de dulzura, delicadeza y amistad.

Gris

El gris es uno de los colores que menos sensaciones tiene ligadas, aunque se asocia con la paz y la tenacidad. Dependiendo de la cultura puede ser relacionado con la mediocridad o la indeterminación.

Negro

El color negro es uno de los m√°s usados a la hora de crear p√°ginas web, ya que proporciona sensaciones de poder, sobriedad, formalidad e, incluso, misterio.

 

 

Definir objetivos Plan de Contenidos Factores a tener en cuenta para elegir una gama de colores

 

Tu p√ļblico objetivo

De forma general para la elecci√≥n de la¬†paleta de colores se tiene que tener en cuenta al p√ļblico objetivo. De esta forma, cuando realizas la web utilizas en los elementos una gama de colores que llame su atenci√≥n.

Qué sensaciones quieres transmitir

Otro factor que puede influir en la elección de los colores de una web son las sensaciones que se quiere transmitir. El mensaje que queremos que llegue al usuario debe estar definido antes de la creación de la misma.

Apuesta por el equilibrio

La combinación de colores debe tener estar equilibrada, para no dar la sensación de desorden o que deje en los usuarios sensación de mal gusto. Para conseguir este equilibrio podemos seguir tres modelos:

  • Usar la misma gama crom√°tica: As√≠ se ver√° diferentes tonos de color dentro de la p√°gina, pero sin desmarcarse demasiado del color principal.
  • Utilizar colores complementarios que hagan que nuestra web sea m√°s vistosa y llamativa, pero guardando una jerarqu√≠a y buen gusto.
  • Y por otro lado se puede jugar con los colores opuestos, de tal forma que al usuario le llame la atenci√≥n el contraste entre unos elementos y otros. El mejor ejemplo de esta combinaci√≥n de colores ser√≠a el blanco y negro.
Si no existe un equilibrio en la gama de colores que vas a usar, el usuario puede tener percepciones negativas

Menos es m√°s

Uno de los principales pilares dentro del dise√Īo es¬†no saturar a los usuarios y conseguir llamar la atenci√≥n sobre los elementos que nosotros queremos. Para ello, ten en cuenta estos 3 tips antes de lanzarte a elegir tu gama de colores:

  1. Cuando se utilizan m√°s de dos colores en una p√°gina web, debe existir siempre uno que predomine sobre el otro u otros.
  2. Es aconsejable dejar espacio entre los distintos elementos y espacios en blanco para que el ojo del usuario descanse.
  3. Debes evitar agrupar muchos impactos visuales en la misma p√°gina y centrarte en aquel que sea mas importante para ti.

Ahora que est√°s listo, toma nota de las siguientes herramientas para elegir la mejor gama de colores para dise√Īo gr√°fico y web.

 

Herramientas Twitter Herramientas para elegir gama de colores

 

1. Coolors

Coolors es una de las herramientas m√°s interesantes para crear paletas de colores (hasta 5 colores), ya que te permite crear o ver paletas de colores creadas por otros usuarios.

Dentro de la plataforma existen dos secciones que son las que m√°s se usan: Generate y Explore.

Generate

Dentro de este apartado, podrás generar tu propia paleta de colores. En este apartado puedes poner los colores que ya tengas elegidos y en el resto de espacios que dejes vacíos aparecerán colores que combinen con los que has elegido.

Si todavía no tienes colores elegidos, puedes ver que opciones te da la herramienta e inspirarte en esa combinaciones. Para generar nuevos colores debes darle a la tecla del espacio y aparecerán nuevas combinaciones.

combinación de colores

 

Explore

En este apartado podr√°s encontrar las paletas de colores que hayan generado otros usuarios y podr√°s filtrar entre las m√°s nuevas, las m√°s votadas y selecciones.

combinación de colores

 

2. Adobe Color

Adobe Color es otra de las herramientas más conocidas para generar nuevas gamas de colores interesantes. En este caso si es aconsejable tener más o menos una gama de colores definida antes de utilizar esta herramienta.

También podrás encontrar un apartado de exploración para ver paletas de colores que han creado otros usuarios.

combinación de colores

 

De Adobe Color hay que destacar las diferentes formas en las que se puede buscar la combinación de colores:

An√°logos

En este apartado la paleta de colores resultante está creada por colores similares al elegido pero con mayor o menor degradación del color.

Monocrom√°ticos

En este apartado la combinación resultante está formada por el mismo color pero con diferentes tonos.

Triada

Aquí la paleta de color está formada por tres colores distintos, y dos de esos tres colores tendrán dos tonalidades diferentes.

Complementarios

Esta opción nos permite encontrar los colores que visualmente son compatibles con el que hemos elegido.

Compuestos

Este apartado se parece mucho al anterior, pero en este caso la paleta de colores que proporciona hasta 5 colores diferentes. En la anterior opción solo da un color.

Tonos

La gama de colores que tiene como resultado esta opción es muy similar a la que podemos encontrar en el apartado monocromático.

Personalizados

Como su propio nombre indica en este apartado puedes dise√Īar la paleta de color que m√°s te guste para hacer tu p√°gina web.

3. HTML Color Codes

HTML Color Codes es junto a Adobe Colors y Colors una de las herramientas m√°s completas para generar paletas de colores.

Con esta herramienta podremos encontrar 8 formas distintas de generar combinaciones de colores: Colores complementarios, Tri√°dicas, Tetr√°dicas, An√°logas, Neutros, Sombras de color, Tintas de color y Tonos de color.

combinación de colores

Pero algo muy interesante y por lo que destaca es por la cantidad de recursos que podemos encontrar en su web:

Tablas

En este apartado tendremos tres tablas (colores planos, colores en materiales y colores web) donde podremos ver visualmente el color y además da los datos HEX, RGB y HSL del que hayas seleccionado.

Nombres

En esta parte podremos encontrar los distintos colores y sus tonalidades con el nombre que recibe dentro del código HTML.

Tutoriales

Donde podremos encontrar tutoriales HTML y CSS relacionados con los colores de los elementos. Sin duda algo muy √ļtil para los usuarios que buscan la paleta de colores para dise√Īar su web.

4. Color Hex

Color Hex es una herramienta muy √ļtil para inspirarse ya que cuenta con cerca de 50.000 paletas de colores creadas por usuarios.

Tiene un apartado llamado colores que esta muy bien, porque además de darte la información del color, te indica cuáles son los colores análogos, complementarios e incluso una combinación de hasta 4 colores.

combinación de colores

5. Paletton

Paletton es un generador de paletas de colores es muy √ļtil cuando ya tienes un color o colores definidos. Con el podr√°s encontrar un esquema de colores complementarios para combinarlos con los que ya se tienen.

Lo más destacado es sin duda es el mapa de colores que ayuda a ver visualmente las gamas de colores posibles y a que veas cómo pueden quedar los distintos colores.

combinación de colores

Los colores dicen mucho de una marca, aseg√ļrate de elegir aquellos que mejor te representen

6. Colourcode

ColourCode herramienta es muy similar a Coolors, la √ļnica diferencia es que en vez de crear nuevas paletas de colores dando a la tecla de espaciado, se hace moviendo el rat√≥n.

Con esta página web podremos averiguar la gama de colores ideal para una página web o proyecto. Tiene hasta 8 tipos distintos de combinaciones de colores: apartado libre, monocromo, monocromo gris oscuro, monocromo gris claro, analógico, analógico y complemento, triada y cuadrángulo.

paleta de colores

7. Cohesive Colors

Con Cohesive Colors podrás averiguar la gama de colores ideal para tu web. Para ello necesitas saber cuál es el color principal que quieres usar y la herramienta te dará una combinación de hasta 5 colores.

Un elemento interesante que tiene esta herramienta es la posibilidad de elegir la intensidad que quieres que tengan los colores. De esta forma la paleta de colores final se adapta a tu gusto de intensidad.

paleta de colores

8. Material Palette

Material Palette tiene una gran gama de colores con la que podremos crear grandes combinaciones para nuestra web.

Algo muy interesante es que nos permite elegir distintos colores que queramos combinar y da opciones de dónde debería ir cada color. Es decir, teniendo en cuenta los colores elegidos dice cual es el color primario, el de los iconos, texto e incluso fondos.

paleta de colores

9. Mudcube Sphere

Mudcube Sphere Es un generador de gamas de colores que nos da muchas opciones, ya que tiene hasta 10 formas de crear combinaciones de colores distintos (hasta 6).

En comparaci√≥n con otras herramientas puede faltar la inspiraci√≥n de ver lo que han hecho otros usuarios, pero lo solventa con sus m√ļltiples formas de combinar colores.

paleta de colores

10. Colormind

Colormind es una herramienta muy f√°cil de usar para crear paletas de colores, de hecho su funcionamiento es similar a Coolors.

Con Colormind podr√°s elegir hasta 5 colores y generar tantas combinaciones de colores como quieras. Si ya tienes alg√ļn color elegido podr√°s dejarlo fijado y ver posibles combinaciones en el resto de espacios.

paleta de colores

11. Color Hunt

Color Hunt es página generadora de paletas puede ayudarnos a encontrar la inspiración. Todos los días se actualiza con las nuevas paletas de colores generadas por sus usuarios.

Esta herramienta es ideal sino tenemos un color definido, ya que hay paletas con todas las gamas de colores.

gama de colores

Color Hunt también puede utilizarse como una extensión de Chrome. Así podrás utilizarlo rápidamente sin tener que dirigirte a la página.

12. Colour Lovers

Colour Lovers es otra herramienta muy inspiradora para elegir la mejor gama de colores para una p√°gina web o dise√Īo.

En ella podremos encontrar tanto paletas de color, como información sobre colores específicos. Esto nos ayudará a ver qué posibles combinaciones de colores hay y ver cuál nos representa más.

gama de colores

 

13. BrandColors

BrandColors no es un generador de gamas de colores al uso, ya que no puedes crear tu propia paleta de colores.

Con esta herramienta lo que sí podrás averiguar es qué colores utilizan las principales marcas que hay en el mercado. De tal forma que si te has basado en alguna gran marca para crear tu proyecto puedes averiguar que colores utiliza.

gama de colores

14. ColRD

ColRD es similar a la anterior, ya que tampoco sirve para crear combinaciones de colores.

Su principal virtud está en que puedes introducir una fotografía en la que te hayan gustado los colores y la propia herramienta te da la gama de colores que hay en ella.

gama de colores

15. Palettr

Palettr genera paletas de colores en base a lugares o tendencias del momento.

Su funcionamiento es simple, pones en el buscador el tema o el lugar que te interesa y en base a él te da la paleta de colores que se estén utilizando.

gama de colores

 

Como habr√°s visto, no es s√≥lo elegir colores y ponerte a dise√Īar. Existen muchos elementos como los psicol√≥gicos, el equilibrio o el p√ļblico objetivo que pueden ser claves a la hora de elegir la gama de colores que vamos a usar.

Una vez que ya tengas elegido un color, genera posibles paletas de colores y elige la que mejor se ajuste a lo que quieres transmitir.

¬ŅConoces alguna herramienta m√°s para generar combinaciones de colores? ¬ŅLo sueles aplicar a tus proyectos?

Si quieres mejorar tu marketing, aqu√≠ te proponemos 615 acciones de marketing y publicidad seg√ļn 25 expertos

Te recomendamos leer estos artículos relacionados
Filter by
Post Page
Marketing de Contenidos Community Manager SEO / Posicionamiento
Sort by

Análisis DAFO: Guía con Ejemplos + 3 Herramientas Gratuitas

Hoy vamos con un tema muy importante a la hora de elaborar tu Plan de Marketing: el an√°lisis DAFO. Adem√°s de a
2020-01-29 10:33:02
milena

18

10 pasos y 50 herramientas para analizar tu competencia y mercado

Todos conocemos los beneficios de un buen estudio de mercado y una buena investigación sobre qué está haciendo nu
2018-02-14 17:55:09
milena

18

Las 20 mejores herramientas SEO para buscar palabras clave

En este post te voy a ense√Īar 20 herramientas SEO¬†para encontrar palabras clave con el objetivo de p
2018-02-08 13:24:36
ernesto

18

Sobre el Autor 

Publicista enamorado del Marketing Digital. Mi pasi√≥n son el Posicionamiento SEO, Dise√Īo Web y Publicidad Online de los que d√≠a a d√≠a voy aprendiendo m√°s. Mi blog es Christianleis.com

    M√°s en:
  • flickr
  • linkedin
  • twitter
Christian Leis15 Herramientas para elegir Gamas de Colores en Dise√Īo Gr√°fico y Web

6 comentarios

Únete a la conversación
  • Mar√≠a Gil - 8 mayo, 2018 responder

    Muy √ļtil la lista de herramientas, aparte de Paletton y Adobe Color no conoc√≠a los dem√°s y algunas son realmente interesantes. Me las apunto todas porque seguro que me ayudar√°n en el futuro. Gracias.

    Christian Leis - 21 febrero, 2019 responder

    Muchas gracias por tu comentario María. Espero que estas herramientas te hayan ayudado a la hora de escoger los colores para tus proyectos.

  • Marketing Digital Argentina - 13 agosto, 2018 responder

    Es de vital importancia la elecci√≥n de los colores a la hora de dise√Īar una p√°gina web

  • Bauhaus Media Production - 8 octubre, 2018 responder

    Estamos de acuerdo en que para tener un buen dise√Īo web la combinaci√≥n de colores es fundamental para la experiencia del usuario. Gracias por compartir las herramientas.

    Christian Leis - 21 febrero, 2019 responder

    Gracias a vosotros por vuestro comentario. Totalmente de acuerdo, el color elegido puede beneficiar o no a la experiencia del usuario y, como consecuencia, en los beneficios de la empresa.

  • Jorge Noguera - 29 enero, 2020 responder

    Gracias, herramientas fundamentales para quienes trabajamos en el Dise√Īo Gr√°fico, un muy buen aporte, que expande las facilidades en nuestro trabajo. Se agradece.

Únete a la conversación

RESPONSABLE: WEB Y CONTENIDOS SL FINALIDAD PRINCIPAL: Env√≠o de nuestros art√≠culos del blog, as√≠ como el aviso de nuevas actividades, algunas de las cuales podr√≠an ser de car√°cter comercial LEGITIMACI√ďN: Consentimiento del interesado. DESTINATARIOS: No se ceder√°n datos a terceros, salvo autorizaci√≥n expresa u obligaci√≥n legal DERECHOS: Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitaci√≥n u oposici√≥n a su tratamiento, transparencia y derecho a no ser objeto de decisiones automatizadas. INFORMACI√ďN ADICIONAL: Puede consultar la informaci√≥n adicional y detallada sobre nuestra Pol√≠tica de Privacidad y Aviso Legal