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

Esta 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

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

Esta herramienta es 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

Este 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

Esta 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 esta herramienta 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

Esta herramienta 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

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

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

Esta 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

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 hay y ver cuál nos representa más.

gama de colores

 

13. BrandColors

Esta web 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

Esta web 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

Esta herramienta 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.2 (84.8%) 25 votos
Artículos relacionados

10 acciones para optimizar el CTR y mejorar el posicionamiento SEO

En la primera edición del PRO Marketing D
2018-04-05 09:28:14
arantxa

10

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 V
2018-03-26 12:28:46
milena

10

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 com
2018-02-27 14:38:56
javi

10

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

1 comentario

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

Ú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