20 herramientas con las que crear paletas de colores

Recopilación de herramientas con las que crear paletas de colores para diseño web y branding + consejos y ejemplos para crear tu paleta.
20 herramientas con las que crear paletas de colores para diseño web y branding

A la hora de diseñar una página web, existen una serie de elementos que debes tener en cuenta: el dominio, el hosting, las fotografías, los textos, las tipografías o los colores. En este post me voy a centrar en el ultimo de ellos, y te traigo varias herramientas con las que puedes crear paletas de colores para diseño web y branding.

La elección de los colores para un sitio web es un proceso complejo y que no debe hacerse a la ligera.

Para elegir la paleta de colores, debes tener en cuenta qué quieres transmitir en tu sitio web, cuáles son los valores de tu marca o cómo vas a mostrar tu mensaje.

Cuando tengas claro todo ello, es el momento de elegir los colores que van a aparecer en tu sitio web y van a otorgarle a tu marca la personalidad que hará que el usuario la recuerde e identifique.

Llegados a este punto, te recomiendo crear una paleta que no tenga más de tres o cuatro colores. En ese sentido, mi consejo es elegir un color principal y varios complementarios.

En mi caso, el color principal es el azul y tengo otros complementarios: blanco, negro y el mismo azul con una tonalidad menos intensa.

20 herramientas con las que crear paletas de colores para diseño web y branding

Ejemplos de paletas de colores de marcas conocidas


Para que entiendas un poco mejor la idea de un color principal y varios complementarios, te voy a mostrar la paleta de colores que usan varias marcas que todos conocemos.

paletas de colores: BBVA

Paleta de colores de BBVA

En esta paleta de colores hay un color principal (el azul más oscuro de la derecha) y el resto de tonos azules son los complementarios.

paletas de colores: Coca Cola

Paleta de colores de Coca Cola

En la paleta de Coca Cola predominan los tonos rojos (por todos es conocido que el rojo es su color principal) y el blanco como complementario.

paletas de colores: Movistar

Paleta de colores de Movistar

En el caso de Movistar, disponen de dos colores principales (el verde y azul oscuro de la izquierda). El resto son los complementarios.

Consejos a la hora de crear tu paleta de colores


Antes de hablar de cada una de las herramientas que puedes utilizar si quieres crear paletas de colores para diseño web, voy a mencionar una serie de consejos o recomendaciones que debes tener en cuenta:

  • Antes de nada, piensa qué quieres transmitir exactamente con tu marca para buscar una paleta de colores que refleje esos valores y acompañe tu mensaje.
  • Piensa cómo quieres que te perciba el usuario y cómo quieres posicionarte en su mente (todos asociamos el color naranja a ING, el rojo a Coca Cola, etc).
  • A continuación, define uno o dos colores principales y varios complementarios. Los segundos girarán en torno a los primeros.
  • Cuando los tengas, crea varias combinaciones con los diferentes colores y elementos de tu web hasta encontrar la mejor opción.
  • Por último, haz varias pruebas y muéstraselas a otras personas para que te den feedback y puedas hacer modificaciones (no siempre nuestra idea es la mejor).

Ejemplos de paletas de colores en diseño web


En este epígrafe te quiero mostrar varios ejemplos de paletas colores en trabajos de diseño web que yo mismo he llevado a la práctica, para que entiendas como se puede trasladar el branding de una marca a su página web.

Eva Teruel es una compañera copywriter que me contrató para el diseño de su web y también la creación de su branding.

#1 Ejemplo copywriter

Para su paleta de colores utilizamos dos tonos pasteles muy divertidos, elegantes y femeninos (rosa y amarillo), que combinamos como contrapunto con un gris oscuro y un negro.

paletas de colores: Eva Teruel

Y aquí puedes ver la aplicación de esta paleta de colores en su página web:

paletas de colores: Eva Teruel

#2 Ejemplo correctora

Ana de Letrana es una correctora y redactora profesional freelance que, al igual que en el caso anterior, se puso en contacto conmigo porque necesitaba una página web y también un logotipo.

Su paleta de colores gira en torno a un tono rojo que eligió la propia Ana buscando transmitir energía, fuerza y profesionalidad, en cuya web usamos con distintas intensidades y lo combinamos con los típicos blanco y negro.

paletas de colores: Letrana

Aquí puedes ver la aplicación de esta paleta de colores en su página web:

paletas de colores: Letrana

#3 Ejemplo corrector

Al igual que Ana, Javier es corrector de textos y lector editorial. Contactó conmigo porque necesitaba el diseño de una página web, un logotipo y también un curriculum profesional.

Su paleta de colores se basa en dos colores que combinan muy bien entre ellos, un verde y un azul. El objetivo era transmitir tranquilidad y serenidad.

paletas de colores: Javier Domingo

Te dejo la aplicación de esta paleta de colores en el diseño de su web:

paletas de colores: Javier Domingo

#4 Ejemplo empresa de turismo activo

El siguiente ejemplo es la paleta de colores que escogimos en el caso de Rmove Escocia. Al tratarse de una empresa de turismo activo y natural en Escocia, optamos por colores relacionados con la naturaleza, así como símbolos y tipografías que recuerdan a un pasado celta.

Este es el resultado de su logotipo, submarcas y paleta de colores:

paletas de colores: Rmove Training

Y aquí te dejo un par de capturas para que veas la integración de la paleta de colores e imagen en su web:

paletas de colores: Rmove Escocia
paletas de colores: Rmove Escocia

#5 Ejemplo cirugía estética

Por último, quiero mostrarte el ejemplo de la Doctora María González Vecino, especialista en cirugía plástica, estética y reparadora.

En este caso, el diseño del branding y la elección de colores no corrió de mi parte, sino que lo aportó ella cuando me contrató.

La paleta de colores se basa en dos tonos, un azul marino y un amarillo / mostaza / dorado, que combinan muy bien entre sí y le da a la marca un toque de distinción, exclusividad y elegancia.

paletas de colores: Dra. González Vecino

Aquí puedes ver el resultado de la aplicación de esta paleta de colores en el diseño de su página web:

paletas de colores: Dra. González Vecino

20 herramientas con las que generar y crear tu paleta de colores


1) Design Seeds

Desing Seeds es una de mis páginas favoritas a la hora de buscar inspiración cuando tengo que crear paletas de colores para diseño web.

Cuenta con un montón de paletas muy bellas y elegantes inspiradas en imágenes de la vida real, tales como arte, decoración, manualidades o bodas.

De este modo, puedes usar los colores de Design Seeds para crear, por ejemplo, diseños, ilustraciones o manualidades.

Además, las paletas de colores está organizadas en diferentes categorías: por estaciones, por colores y por colecciones.

paletas de colores: Design Seeds

2) LOL Colors

LOL Colors es una herramienta que también uso habitualmente cuando necesito buscar inspiración a la hora de crear paletas de colores para diseño web.

Se trata de una especie de rankings de paletas hecha en su totalidad por su equipo de acuerdo con los criterios que han establecido en función de su extensa experiencia en la industria del diseño web.

Además, trabajan con otras agencias de diseño a las que califican según sus criterios.

paletas de colores: LOL Colors

3) FX Palette Color

FX Palette Color es una herramienta que te permite subir una imagen y crear una paleta de colores a partir de ella.

Una vez creada la paleta, te permite hacer clic en cada uno de los colores para ver su nombre y valores.

Con FX Palette Color podrás generar paletas de colores para diseño web desde una imagen en formato jpg, gif o png.

Algunas características de las paletas de colores que puedes crear con esta herramienta:

  • Genera automáticamente paletas de colores a partir de cualquier imagen o fotografía.
  • Crea y compara paletas de colores en formato RGB, HSB y hexadecimal.
  • Descubre nombres para tonos de colores utilizados por artistas y diseñadores de interiores.
  • Encuentra materiales de arte y manualidades que coincidan con tu paleta.
paletas de colores: FX Palette Color

4) Color Hunt

Color Hunt es una colección abierta de paletas de colores utilizada diariamente por miles de personas en todo el mundo.

La colección incluye miles paletas de colores seleccionados a mano y crece día a día.

Cada paleta está creada por los propios usuarios de Color Hunt y la mejor de todas se muestra en la home.

Cabe destacar que todas las paletas son de uso gratuito.

paletas de colores: Color Hunt

5) Material Desing

Material Design es un sistema unificado para diseñadores que combina teoría, recursos y herramientas para crear experiencias digitales.

El sitio web dispone de una herramienta propia para crear, compartir y aplicar paletas de colores: Color Tool.

Esta herramienta te permite elegir un color de la paleta (o un color personalizado) para ver cómo se ve en una interfaz de usuario.

Además, te permite escoger los colores complementarios para crear una paleta de colores completa.

paletas de colores: Material Desing

6) Threebu

Threebu es un generador de paletas de colores a partir de materiales aleatorios.

La principal diferencia con el resto de herramientas es que permite visualizar tus paletas en diferentes formatos: texto, tarjeta comercial, paleta vertical clásica, paleta circular y logotipo en formato svg.

Además, te permite guardarlas, exportarlas o compartirlas.

paletas de colores: Threebu

7) Adobe Color

Adobe Color es una herramienta es Adobe Creative Cloud que permite crear varias paletas de colores a partir de diferentes colores. Es decir, permite crear una rueda cromática a partir de un color específico.

Además, permite cambiar la armonía del color en función de tus necesidades: análogos, monocromáticos, tríada, complementarios, compuestos, tonos y personalizados.

Por último, destacar que en el apartado "explorar" incluye paletas que colores que ya están creadas y puedes directamente descargar para utilizar en tus proyectos.

paletas de colores: Adobe Color

8) Online Color Scheme Generator

Color Scheme Generator es una herramienta que te permite elegir un color y ver los valores HEX, RGB y HSB complementarios. O sea, puedes crear paletas de colores a partir de uno específico.

También genera seis esquemas de color:

  • Doble complementario
  • Split Complementario
  • Complementario
  • Monocromo
  • Análogo
  • Triádico

Mira, por ejemplo, las paletas que genera a partir de mi color azul corporativo.

paletas de colores: Online Color Scheme Generator

9) HueSnap

HueSnap está pensado para generar paletas de colores en base a tus fotografías.

Su funcionamiento es muy sencillo: solo tienes que subir una imagen que tengas alojada en tu ordenador y pasar el ratón por encima.

Con una especie de pincel la herramienta se encarga de detectar automáticamente los colores que componen dicha fotografía.

paletas de colores: HueSnap

Además, si te creas una cuenta en la web, puedes guardar tus propias paletas de colores para que no las pierdas.

Por último, destacar que, cuando accedes a la web, tienes a tu disposición multitud de paletas de colores que ya han sido creadas por otros usuarios.

10) BrandColors

BrandColors es una web que recopila las paletas de colores de marcas conocidas por todos, tales cono Adidas, Adobe o Airbnb. Como puedes ver, aparecen por orden alfabético.

Es muy interesante para conocer el branding de marcas y empresas por todos conocidas.

paletas de colores: BrandColors

11) Coolors.co

Al igual que las herramientas anteriores, Coolors.co te permite crear paletas de colores de forma muy rápida y sencilla, así como disfrutar de las combinaciones creadas por otros usuarios.

La particularidad de esta herramienta es que puedes crear paletas a partir de cinco colores básicos, es decir, modificando los tonos base.

paletas de colores: Coolors.co

12) Color Hexa

Color Hexa es una herramienta gratuita que proporciona información sobre cualquier color y genera paletas de colores coincidentes para tus diseños (como esquemas de colores complementarios, análogos, triádicos, tetradicos o monocromáticos).

Es muy fácil de utilizar. Solo tienes que introducir un color y la herramienta te muestra toda la información sobre dicho color y además te muestra varias paletas y combinaciones diferentes.

Un ejemplo a partir de mi azul (#26bde8):

paletas de colores: Color Hexa

13) Picular

Picular es el Google de los colores, pues te permite buscar colores en función del término que introduzcas en su buscador.

Su manejo es realmente sencillo: solo tienes que buscar por palabras y la herramienta te arroja múltiples colores relacionados con dichos términos.

Un par de ejemplos:

paletas de colores: Picular
resultados por término agua
paletas de colores: Picular
resultados por término otoño

14) Scale

Scale es una herramienta pensada para crear escalas de colores a partir de uno original, es decir, te permite obtener diferentes tonalidades de un color.

paletas de colores: Scale

Como puedes ver en el ejemplo, solo tienes que introducir un color en formato hexadecimal y la herramienta se encarga de generar toda la escala de colores.

Además, puedes jugar y modificar variables como la saturación, el brillo, la iluminación, etc.

15) Color by Fardos

Color by Fardos es una extensión para Chrome que te permite elegir colores de los sitios web que visitas, guardarlos, degradarlos, obtener tonos y matices y crear los efectos que desees.

Además, dispone de otras funcionalidades muy interesantes para crear paletas de colores:

  • Elegir y guardas múltiples colores desde cualquier web.
  • Guardar tus colores y degradados favoritos.
  • Encontrar tonos, tintes, complementarios y otras combinaciones de colores para cualquier color.
  • Sincronizar tus colores entre múltiples navegadores Chrome.
  • Crear gradientes lineales o radiales a tu gusto.
  • Diseñar, editar, guardar y copiar el código CSS de los estilos que hayas creado.

16) Find a Pantone Color

Como su propio nombre indica, Find a Pantone Color es una herramienta de Pantone cuyo objetivo es que encuentres toda la información relacionada con sus colores.

Su funcionamiento es muy sencillo: solo tienes que elegir en el selector de colores cuál es el que estás buscando, clicar sobre él y se abre la ficha con toda la información detallada.

paletas de colores: Find a Pantone Color

17) Accessible Brand Colors

Accessible Brand Colors es una herramienta que te muestra la compatibilidad entre diferentes colores.

Al agregar los colores de tu marca a la derecha, puedes generar un gráfico para ver cómo se pueden combinar entre sí y también encontrar colores similares que funcionen mejor.

paletas de colores: Accessible Brand Colors

18) Color Supply

Color Supply es un selector de color para diseñadores e ilustradores.

Esta herramienta te permite usar una rueda de colores para elegir los tonos que más te gusten y luego copiar su código HTML.

Su funcionamiento es muy sencillo y aquí puedes ver un ejemplo:

paletas de colores: Color Supply

Genera tus paletas de colores con IA


Por último, quiero hablarte de ColorMagic, que es una herramienta con la que puedes generar paletas de colores a través de inteligencia artificial. Permite introducir una palabra clave y crear colores a partir de ésta.

generar paletas de colores IA: ColorMagic

¿Cómo poner nombre a tus paletas de colores?


Una vez hayas creado tu paleta de colores, con Color Name puedes poner nombres creativos a cada uno de los tonos que la integran.

Sólo tienes que entrar en su web, añadir los códigos de tus colores y la herramienta se encarga de ponerles nombre.

Cómo poner nombre a tus paletas de colores

Estos serían los nombres de mi paleta de colores:

⬤#26bbe6Battery Charged Blue
⬤#81d7f0Medium Sky Blue
⬤#bdebf8Diamond
⬤#f2fafdAlice Blue

Hasta aquí mi repaso por estas 20+1 herramientas con las que crear paletas de colores para diseño web, así como los consejos para crearlas y varios ejemplos reales.

Espero que te sean de gran utilidad en el momento de elegir los colores de tu marca, pues a veces es una tarea complicada. Y si necesitas algún tipo de ayuda, pásate por mi servicio de diseño gráfico.

Summary
🎨 20 herramientas para crear y generar paletas de colores
Article Name
🎨 20 herramientas para crear y generar paletas de colores
Description
Recopilación de 20 herramientas con las que crear paletas de colores para diseño web y branding + consejos y ejemplos para crear tu paleta.
Author
Publisher Name
Max Camuñas
Publisher Logo

14 Comments

  1. RaMGoN

    Me tomo nota de todas las herramientas, de las que citas sólo conocía Color Palette FX.

    Gracias Max, me va a venir genial.

    Reply
    • Max Camuñas

      Hola RaMGoN,

      Estupendo, me alegro mucho!

      Hay alguns muy buenas y que me facilitan muchísimo la elección de colores.

      Un abrazo!

      Reply
  2. Moises

    Hola Max, ya andaba buscando un artículo como éste, he venido utilizando color.adobe.com y tener otras opciones resulta genial. Gracias por el articulo esta excelente.

    Saludos.

    Reply
    • Max Camuñas

      Hola Moisés!

      Me la guardo para probarla y para añadirla al artículo cuando lo revise.

      Muchas gracias.

      Saludos!

      Reply
  3. Natalia

    ¡Genial, Max! Me viene muy bien este post, ¡sólo conozco tres de las herramientas! Además las recomendaciones también son muy útiles.

    Comparto el post, gracias 🙂

    Saludos,

    Reply
    • Max Camuñas

      Hola Natalia,

      Genial, muchas gracias 😀

      Saludos

      Reply
  4. Manfred Camero

    Hola Max, gracias por compartir este interesante post y las herramientas que mencionas, desconocía todas. Me gusto la herramienta Color Palette FX que toma los colores desde un logo ya hecho.

    Pero tengo una duda, una vez que cargas el logo en esta herramienta, como puede guardarse los valores de los colores (hexadecimales, rgb, etc)?
    Se guardan en un archivo, se anotan a mano, que procede?

    Gracias de antemano por tu ayuda y orientacion, saludos desde México.

    Reply
    • Max Camuñas

      Hola Manfred,

      Cuando subes el logo, te sale a derecha la paleta correspondiente a los colores de esa imagen.

      Como no se pueden descargar, te aconsejo copiar los códigos de los colores y guardarlos para usarlos cuando lo necesites.

      Saludos!

      Reply
  5. Sandra

    Que post mas bueno, me encanta el tema del colór, ya lo sabes ?, y conocía dos el resto miraré a ver porque pintan estupendamente

    Reply
    • Max Camuñas

      Hola Sandra 🙂

      Eres de las mías, me encantan estas herramientas para extraer y probar paletas de colores.

      Un beso!

      Reply
  6. Mònica

    Max, ¡muchas gracias por compartir estas herramientas!

    Reply
  7. carlos

    Gracias por la excelente información.
    ¿Cómo hago para obtener solo paletas de colores pastel?

    Reply
  8. Maggy

    Estaba buscando el nombre de un programa que no recordaba y me quedo genial este articulo, porque ademas conoci otras herramientas gracias!!!

    Reply
  9. Neoacropolitano

    Mil gracias por tu información. Excelencia y calidad en todo tu trabajo. Gracias por compartir y enseñar.

    Reply

Submit a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

[Información Básica sobre Protección de Datos] Responsable: Máximo Camuñas Fernández. Finalidad: moderar y responder comentarios. Legitimación: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@maxcf.es así como el derecho a presentar una reclamación ante una autoridad de control. Información adicional: en mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal, incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.