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

Autor: Max Camu√Īas

Fecha: 19/12/2019
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

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

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

Empiezo por la paleta de colores que utilic√© en el logo de Rmove Escocia. Aunque este post no va de dise√Īo de logotipos, te puedes hacer una idea de c√≥mo son esas posibles combinaciones.

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 dise√Īa paleta de colores e imagen en su web:

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

El segundo ejemplo es el de Sara Caro, una coach y mentora de mujeres. En su caso, utilizamos colores verdes por petición de ella y mantuvimos como elemento principal el corazón, que también estaba presente en su anterior logotipo.

Esta es su paleta de colores y marca completa:

paletas de colores: Sara Caro

Y así quería la integración de esta paleta de colores en su página web:

paletas de colores: Sara Caro

El tercer ejemplo es Tramando Viajes, lo que empezó siendo un blog de viajes y que se ha convertido en un negocio de turismo.

En este caso, tanto en la marca principal como en la submarca utilizamos un degradado que le da mucha fuerza al dise√Īo:

paletas de colores: Tramando Viajes

Y aquí el resultado en su página web:

paletas de colores: Tramando Viajes
paletas de colores: Tramando Viajes

El cuarto ejemplo es el de DiviFast, mi web de plantillas para Divi, donde, a nivel de colores, predomina un degradado de naranja + rojo.

paletas de colores: DiviFast

En la web he combinado la fusión de estos dos colores con otros más planos como blanco, negro o gris, consiguiente un resultado atractivo y con fuerza.

paletas de colores: DiviFast
paletas de colores: DiviFast

El quinto y √ļltimo ejemplo se trata de Siendo Creativos, una marca que abr√≠ hace a√Īos de forma paralela a mi negocio.

paletas de colores: Siendo Creativos

Y aquí puedes ver su correspondiente paleta de colores en el blog:

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) Color Palette FX

Color Palette FX 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 Color Palette FX 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: Color Palette FX

4) Color Spire

Color Spire es una herramienta especialmente pensada si quieres crear paletas de colore para dise√Īo web, pues incorpora una especie de constructor con los diferentes elementos de un sitio web.

Cómo crear esquemas de colores con Color Spire:

  1. Elige un color de base. El primer paso para dise√Īar tu propio esquema de color es elegir un color base (el principal). Este color puede ser uno de favoritos, un color que ayude a transmitir los valores de tu marca o simplemente un color que siga las tendencias actuales.
  2. Rueda de color RBG. Con la rueda de colores es f√°cil encontrar colores an√°logos, colores complementarios, colores terciarios, etc. Puedes aprovechar la rueda de colores para elegir colores armoniosos que coincidan con tu color principal.
  3. Crea tu combinaci√≥n de colores. La herramienta te ofrece un dise√Īador de esquemas de color muy f√°cil de usar para ayudarte a crear tu propia paleta. Con el selector de color flexible y la rueda de colores, puedes crear f√°cilmente esquemas de color armoniosos para usar en tu sitio web.
  4. Ver los resultados. Una vez creada tu paleta de colores, la herramienta te permite obtener una vista previa de tus combinaciones de colores en tiempo real y ver si los colores funcionan bien juntos.
paletas de colores: Color Spire

5) 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

6) 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

7) 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

8) Logomak

Por √ļltimo, Logomak es una herramienta pensada especialmente para dar los primeros pasos en la creaci√≥n de un logotipo.

Lo cierto es que escoger los colores y las tipograf√≠as es uno de los aspectos m√°s dif√≠ciles a la hora de dise√Īar un logotipo.

El n√ļmero infinito de combinaciones puede hacer que sea un proceso frustrante.

Por ese motivo, si est√°s empezando a crear tu logotipo, te vendr√° genial esta herramienta.

Solo tienes que seleccionar tu actividad comercial y las características que describen tu empresa o negocio.

A partir de ahí, la herramienta te mostrará los colores y las fuentes más adecuadas para su logo.

paletas de colores: Logomak

9) Adobe Color CC

Adobe Color CC es una herramienta es Adobe Creative Cloud que permite crear varias paletas a 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 CC

10) 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

11) 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.

12) 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

13) 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

14) 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

15) 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

16) 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.

17) 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.

En este vídeo puedes ver su funcionamiento:

https://www.youtube.com/watch?v=RgNNSovCz7U

18) 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

19) 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

20) 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

Hasta aqu√≠ mi repaso por estas 20 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.

Portada: shutterstock

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 de colores.
Author
Publisher Name
Max Camu√Īas
Publisher Logo

14 Comentarios

  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.

    Responder
    • 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!

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

    Responder
    • Max Camu√Īas

      Hola Moisés!

      Me la guardo para probarla y para a√Īadirla al art√≠culo cuando lo revise.

      Muchas gracias.

      Saludos!

      Responder
  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,

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

    Responder
    • 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!

      Responder
  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

    Responder
    • Max Camu√Īas

      Hola Sandra ūüôā

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

      Un beso!

      Responder
  6. Mònica

    Max, ¬°muchas gracias por compartir estas herramientas!

    Responder
  7. carlos

    Gracias por la excelente información.
    ¬ŅC√≥mo hago para obtener solo paletas de colores pastel?

    Responder
  8. Maggy

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

    Responder
  9. Neoacropolitano

    Mil gracias por tu informaci√≥n. Excelencia y calidad en todo tu trabajo. Gracias por compartir y ense√Īar.

    Responder

Enviar un comentario

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

Para cumplir con el nuevo RGPD y que tus datos estén a salvo, debes leer y aceptar mi política de privacidad. Tus datos serán guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Soy Max Camu√Īas y te doy la bienvenida a mi blog (mi casa).

Por aquí hablo sobre los temas que me apasionan: WordPress, Marketing, Social Media o Blogging.

Me encanta ayudar a otras empresas a marcas a crear el dise√Īo de su web desde cero.

¬°M√ĀS SOBRE M√ć!

masterclass
C√ďMO PLANIFICAR TU P√ĀGINA WEB PARA QUE TU NEGOCIO BRILLE
¬°accede gratis!