Blog de Aula CM

Community Manager, Marketing de Contenidos, Blogs y SEO

herramientas-elegir-gama-colores-74.svg

15 herramientas para elegir colores en diseño gráfico y web

La combinación 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 combinación 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 combinación 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 combinaciones 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 combinaciones 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 combinación 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 combinaciones 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 combinación 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 combinaciones 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?

15 herramientas para elegir colores en diseño gráfico y web
4.5 (90.26%) 39 votos
Posts relacionados

Branding para Empresas: Guía para crear una Marca Perfecta + Ejemplos

El branding hoy en día es imprescindible para que una marca pueda competir y sobrevivir a los continuos cambios que
2018-11-13
agus-romero

18

Cómo usar hashtags en tu estrategia de Social Media y los más TOP para el 2019

El uso de los hashtags en Marketing Digital es algo más que conocido por todos pero, ¿sabes cómo sacarles el máximo par
2018-11-02
arantxa

18

20 páginas para descargar vectores gratis: EPS, SVG, AI

Utilizar vectores nos facilita y mejora el trabajo visualmente, nos permite ahorrar tiempo y, aunque de por sí su coste
2018-10-19
christian-leis

18

10 acciones para optimizar el CTR y mejorar el posicionamiento SEO

En la primera edición del PRO Marketing DAY, organizado por A
2018-04-05
arantxa

18

3 Acciones SEO muy actuales para tu estrategia de posicionamiento, por Luis Villanueva

"SEO es experimentar, ver lo que funciona, aplicar, analizar", así comenzó Luis M Villanueva su ponencia en la
2018-03-26
milena

18

Guía para hacer una buena campaña de Publicidad en YouTube con AdWords

El vídeo es el formato de contenido que más crece cada día, ya sea como fuente de información o como simple ent
2018-02-27
javi

18

12+1 trucos para crear, promocionar y petarlo con un canal de YouTube

Youtube no es solo una plataforma de vídeos sino que también es la segunda red social más importante del presente y se
2018-02-20
roberto-ortega

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 nuestra c
2018-02-14
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
ernesto

18

Acciones para mejorar la conversión de un negocio digital, con Ricardo Tayar

En abril del año pasado se celebró la 1ª edición del PRO Marke
2018-02-06
arantxa

18

Sobre el Autor 

Publicista enamorado del Marketing Digital. Voy aprendiendo día a día en esta profesión tan apasionante.

    Más en:
  • linkedin
  • twitter
Christian Leis15 herramientas para elegir colores en diseño gráfico y web

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

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

Ú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