¿Te cuesta combinar colores? ¿Tienes que hacer un diseño rápido y no quieres perder tiempo buscando colores? Coolors es la solucióon.
En este post te traigo una de mis herramientas favoritas para crear paletas de colores. Coloors lleva varios años por el entorno web, pero para que veas bien cómo funciona esta herramienta, he creado este vídeo donde te cuento todas las novedades, las cinco mejores funcionalidades y te enseño un ejemplo diferente al que te voy a contar aquí.
Una herramienta versátil
El color es una de las piezas más importantes dentro del complejo engranaje de la gramática visual. Me llevó mucho tiempo encontrar una herramienta que me permitiese jugar con los colores para adaptarlos a todo lo que creaba: diseño gráfico, ilustración, fotografía, cine… Hasta que di con Coolors. La verdad es que estoy encantada con la evolución que ha tenido esta web desde que la conocí.
Aunque sería interesante hacer una retrospectiva de la web de Coolors, prefiero centrarme en contarte que ahora Coolors tiene un entorno nuevo y están añadiendo nuevas funcionalidades. Este rediseño ha traído el perfeccionamiento de algunas herramientas, pero sobre todo ha traído muchas nuevas opciones. Para que sea más fácil aprender a usarlo, he creado un tutorial en el vídeo, pero te dejo aquí también mis cinco funcionalidades favoritas, un ejemplo diferente y una nueva opción que no estaba cuando grabé el tutorial.
Primera funcionalidad: IMAGE PICKER
Esta herramienta es genial para extraer la paleta de colores de una imagen. Lo mejor es que puedes hacerlo desde diferentes fuentes: puedes subir tú una imagen, puedes añadirla desde un enlace a una imagen, puedes usar la cámara directamente, o puedes subirla desde el banco de imágenes de Unsplash desde el mismo menú.
Segunda funcionalidad: PINCHAR Y ARRASTRAR
Por sencillo que parezca, esta funcionalidad no existía en la versión anterior de Coolors, así que al empezar a elegir los colores se iban acumulando de izquierda a derecha. Ahora puedes pinchar un color y arrastrarlo a la posición que prefieras. A veces repito el color varias veces intercalándolo en las muestras, para que las opciones que me dé sean más parecidas al color original.
Tercera funcionalidad: AÑADIR O QUITAR COLORES
En la versión anterior de Coolors, por defecto empezabas con cinco colores y no podías modificarlo. Ahora, sin embargo, puedes añadir más, o quitar los que quieras. De esta forma puedes hacer escalas cromáticas muy simples, o muy, muy complejas.
Cuarta funcionalidad: GENERADOR INTERPOLADO
Al hilo de lo que te cuento en el punto anterior, me gustaría destacar este generador interpolado. Como te decía, puedes generar más o menos de cinco colores, pero es que además, si pinchas en la flechita, te crea un color intermedio entre el de la izquierda y el de la derecha.
Quinta funcionalidad: DALTONISMO FRIENDLY
En una página sobre colores no podía faltar una opción para adaptar los colores a los diferentes tipos de daltonismo. Si pinchas en el icono de las gafas puedes ver cómo se perciben los colores según cada tipo de daltonismo.
Nueva funcionalidad:
Si pinchas en More verás que en la primera opción tienes Color Picker, con un icono de New al lado. Al entrar en esta opción verás un color (elegido aleatoriamente por la plataforma) donde describen detalladamente todos los valores y cualidades del color. Dentro de todas las secciones que aparecen ahí me gustaría destacar:
1. Las armonías de color, para ver cómo funciona ese valor cromático con otros colores, y
2. El simulador de ceguera, para considerar cómo se percibe el color según diferentes capacidades de visibilidad.
3. Comprobador de contraste, que en el diseño web es fundamental. Además, tanto en esta sección como en la anterior de armonías puedes ver una valoración encima de cada opción que proponen.
BONUS
A continuación te enseño una paleta de colores alternativos que he creado para DesMarketingES solo por practicar, tomando como referencia la Identidad corporativa. Como verás. puesto en medio el color principal, ese naranja vigoroso tan característico, y a continuación el amarillo que también vemos en los iconos. En vez de utilizar un blanco puro, he puesto este que tiene un ligero matiz verdoso y que complementaría a estos tonos cálidos. Asimismo, y para completar los valores del naranja, he sumado un color más rojizo y, finalmente, como color análogo, este tono de azul, que quedaría ideal como color de texto.
En el GIF que tienes a continuación puedes ver cómo ver la paleta en modo degradado, incluso a pantalla completa, y también la escala de luminancia, muy útil para entender cómo funcionarían esos colores en escala de grises.
Espero que te haya servido este post, y te animo a que comentes con otros usos de esta herramienta.
¡Nos vemos en el siguiente!
Guaaaooo, María. Tremendo post. Una herramienta muy útil, explicada super bien. Felicitaciones por ese vídeo tutorial.
¡Saludos!
Sin duda alguna una herramienta completísima que voy a empezar a usar después de descubrirla gracias a DesMarketing, y con tu amplísima y eficaz explicación no parece que sea muy complicada de usar, ya la tengo añadida a la barra de marcadores como favorita. Gracias María y sigue difundiendo tu talentazo.