Guía del generador de paleta de colores Coolors

Esta publicación es una guía exhaustiva para el instrumento Coolors.co, que los usuarios comunes y los diseñadores profesionales también usan para crear esquemas de color fuertes. Discutiremos posibles casos para su uso para esta aplicación, las características detrás de ella y los consejos y trucos que hemos aprendido a hacer que nuestro trabajo fluya utilizando esta herramienta. Siéntase libre de usar la función para el contenido de la tabla en la parte superior de esta página para pasar a las secciones individuales de este exhaustivo artículo. Esta herramienta fue rediseñada recientemente, y esta guía está relacionada con la versión 2021 (actual) del generador de paletas de colores Coolors.
Lo que es Coolors.co Coolors.co es una aplicación web realmente simple que puede usar rápidamente para generar esquemas de color para usted y su empresa. Todo lo que tiene que hacer es presionar en la barra espacial y obtendrá una buena selección de esquemas de color. Si no le gusta el actual, simplemente puede presionar la barra espacial nuevamente y se dará una nueva. Podrá repetir este proceso hasta que el universo ruega y no obtendrá el mismo esquema de color dos veces.

Con el nuevo rediseño, obtienes muchas más características, como crear esquemas de color, generar collages y crear degrades. También hay muchas más características para diseñadores web, porque ahora puede exportar cuchillas y gradientes en formatos de archivo CSS y Adobe Paleta.
Como agencia, usamos esto para generar ideas para esquemas de color para proyectos de marca y sitios web. Este es un excelente punto de partida para crear una paleta de cinco o seis colores para trabajar. Las características generales han sido recientemente una nueva actualización de esta herramienta, donde si pasa con el mouse sobre un borde entre dos colores, aparecerá un botón que le permitirá agregar otro color. Esto significa que puede tener 8, 9 o 10 colores diferentes en la pantalla simultáneamente. Si le gusta un color, pero desea refrescarlos en los demás, puede bloquear el color que desea y el generador creará colores que funcionan con el Alimentos bloqueados, por ejemplo, si le gusta un azul claro, pero todos los demás colores no son para usted, puede bloquear el azul claro y seguirá siendo estándar a medida que los colores cambien a su alrededor.

Al hacer clic en el icono de la cuadrícula, se cargarán muchos tonos del color base. Si crea interfaces con el usuario con el marco del material (o simple requiere tonos basados ​​en una decoración), entonces ciertamente le gustará esta característica, porque puede crear fácilmente colores más oscuros y claros.

Al hacer clic en un tono de color, se reemplazará el color original con el nuevo color en la paleta general. Si te gusta mucho el color, puedes favorecerlo y mantenerlo para más tarde. Hacemos esto mucho y tenemos un conjunto básico de quizás 20 colores individuales que generarán esquemas bloqueando ese color y refrescando otros colores a su alrededor. Tenga en cuenta que para usar esta funcionalidad y para usar otras funciones, debe tener una cuenta gratuita con esta plataforma. Muchas personas no lo saben, pero esta aplicación tiene un complemento para Adobe Photoshop. Esto puede aumentar seriamente su flujo de trabajo, incorporando el instrumento directamente en una plataforma de diseño digital súper fuerte. También crearon una aplicación iOS que hace lo mismo.

La versión más nueva de Coolors, que se ha lanzado muy recientemente, viene con funciones mucho más avanzadas en un paquete más limpio. El resto de esta publicación de blog analizará cada función que esta herramienta rediseñada tiene y le dirá qué puede hacer con ella, consejos y trucos para su flujo de trabajo y cómo implementarla prácticamente en sus situaciones diarias.

El primer botón cambia de un menú desplegable que le brinda muchas configuraciones de cambio individuales. El primero es el método utilizado para generar sus esquemas de color. Por defecto, el método es automático, pero puede configurarlo para generar colores basados ​​en ciertas ecuaciones matemáticas, estrategias y más.


Con esto, Google es tu amigo y puedes descubrir mucho sobre los métodos para generar detrás de los colores. Esta aplicación adquiere métodos probados y verdaderos que se han utilizado antes de las computadoras y simplemente digitalizarla. Entonces, por ejemplo, si selecciona colores complementarios para su método de generación, obtendrá colores que son complementarios entre sí en una rueda de colores. Aquí hay un ejemplo, azul y naranja: la siguiente opción en el menú desplegable que se encuentra en su modo de generación es el mapa de luz. Básicamente, generará una versión en blanco y negro de su paleta y mostrará la luminiscencia de cada color individual.

La luminancia es una medida fotométrica de la intensidad de la luz en la superficie de la luz que se mueve en una dirección dada. Describe la cantidad de luz emitida por el color individual. Vea la paleta como gradiente La siguiente opción es ver su paleta de colores como un gradiente. En este caso de uso, en el que tenemos seis colores individuales en nuestra paleta, esto no es muy útil. Pero si desea generar degrades en dos colores y desea obtener una vista previa antes de incorporarlos en el proyecto o el diseño de su sitio web, puede hacerlo con esta herramienta.

Aquí hay un buen ejemplo. Queremos hacer un gradiente de un púrpura y un rosa y obtener una vista previa antes de usarlo en cualquier concepto de diseño. Por supuesto, podríamos ingresar a la tienda de fotos y pasar hasta 30 segundos para configurar el gradiente, o solo podríamos usar esta pequeña herramienta que se incluye en la aplicación Coolors.

Generamos dos colores utilizando el método de generación triádica. Un esquema de color triádico es cualquier paleta de colores formada por tres colores que sean iguales entre sí en la rueda de colores. Por ejemplo, rojo, amarillo y azul. Por lo general, un color actuará como un color dominante, mientras que las otras dos funciones como acentos. Para este ejemplo, pasé por muchos colores hasta que encontré la violeta azul mostrada. Una vez que encontré esto, lo bloqueé y comencé el generador hasta que generó el paraíso rosa. Ahora, creo que se vería bien como un gradiente, pero no puedo estar seguro hasta que lo vea mezclarse entre sí.

Este es el gradiente que los colores han generado a través de un solo clic y parece bastante bien. La interfaz de usuario con configuraciones adicionales sigue en nuestro menú de caída.
El modo Zen se puede usar para cambiarlo en modo Zen, lo que elimina todas las sedes y sótanos y muestra solo la paleta de colores que genera. Como se sugirió, este modo es muy zen e incluso puede cambiar el modo de pantalla completa presionando la tecla F-11 para obtener aún más enfoque.

De esta manera, esto es lo que verías:
Cubre todos los elementos en el primer menú desplegable que se puede cambiar desde el menú principal a la derecha de la pantalla, sobre la paleta de colores. Genere un esquema de color en la imagen, tiene una herramienta muy útil que le permite generar esquemas de color a partir de fotos individuales. Esto es muy útil si tiene miedo de su sitio en torno a una colección de fotos y necesita generar colores de fuentes, colores de acento y más.

La interfaz de usuario le permitirá cargar una coma de imagen, seleccionar una imagen de una coma de URL, usar la cámara para tomar una coma de imagen o incluso buscar una. La función de búsqueda utiliza la API Unsplash para recopilar imágenes. Para este ejemplo, eso es lo que usaremos. Supongamos que ha creado un sitio web para una casa de alquiler de vacaciones que tiene la vista del océano. Desea usar una imagen del océano como héroe de la página inicial y construir un esquema de color alrededor del océano. Puede buscar una foto oceánica utilizando la funcionalidad en la ventana de selección emergente. Aún mejor, todas las fotos de Unsplash están libres de derechos de autor y son gratuitos para ser utilizados en aplicaciones comerciales. Puede optar por usar la imagen exacta con la que genera el esquema de color, como una imagen en su sitio (no tiene que preocuparse por la resolución o el tamaño de la imagen, porque la mayoría de las imágenes no planas originales son de al menos 6000 píxeles ancho.).

Una vez que tenga su imagen, puede usar esta herramienta para actuar como goteo para colores individuales en la foto. Puede pasar por cada uno de los seis colores y generar una paleta de esta manera. Una vez que tenga la paleta base, presionar el botón siguiente aparecerá en un menú de opción.
Puede abrirlo en el generador, ver la paleta, exportar la paleta como una imagen, guardarla o crear un collage. Cada uno de estos es una opción en el menú principal y se discutirá más adelante en este artículo, pero seleccionar la apertura del generador es una buena idea si intenta generar un esquema de color en una imagen individual.

Ahora que lo tenemos abierto en el generador, podemos continuar y seleccionar los colores que queremos y bloquear. En este ejemplo, quiero mantener azules y marrones. Las otras bagas y el amarillo deben ser reemplazados por algo que se vea más atractivo para los ojos. Después de cambiar un poco entre los colores, generamos este esquema de color, que luego se puede usar en nuestro sitio web de temas oceánicos. Este es solo un ejemplo de muchas de las formas en que puede usar esta herramienta para generar un esquema de color en una imagen.

Crear collage de color en la imagen La siguiente en las opciones en el menú principal es crear un collage. Al hacer clic en esto, la interfaz con el usuario de la imagen se cargará nuevamente, donde puede cargar una imagen o usarla para buscar a través de Unsplash. El creador de collages actúa similar al generador de paletas en una imagen, excepto que la imagen original se puede exportar en el collage. Si intenta generar colores para un diseñador de sitios web, esta puede ser una buena idea de usar, ya que mostrará los colores que desea y la imagen que seleccionó.
Puede cambiar el estilo y el tamaño de la paleta real, pero la característica más funcional con el generador de collage que ofrecen los colores es la característica de la paleta. Los botones más y menos en el lado derecho de la interfaz con el usuario le permiten agregar y eliminar los colores individuales. Puede tener hasta 10 y solo dos colores en su paleta. El control deslizante cambia entre las combinaciones de colores individuales y, aunque no tiene la opción de elegir entre la imagen, generará automáticamente esquemas de color en la imagen elegida. Si presiona Exportar, su imagen se guardará como PNG en su computadora. Esto también puede ser algo agradable de usar al generar fotos de Instagram. Por ejemplo, si usted es un estudio de arquitectura e intenta diferenciar su marca en las redes sociales, puede generar una paleta de colores a partir de su trabajo individual.

Aquí hay un ejemplo de una paleta de colores de cocina que podría publicarse en Instagram, que lo diferenciaría para la competencia y haría que las redes sociales sean más memorables para los clientes de perspectiva. Hay una gran cantidad de estilos que Coolors tiene para ofrecer, que se muestran en la galería a continuación.

Algunos de estos no son prácticos para el uso real. Creo que los creadores de esta aplicación tienen la intención de generar collages para ser distribuidos en las redes sociales. Si es creativo, esta podría ser una estrategia muy interesante para diferenciar sus fotos de otras publicaciones en las redes sociales. Cancelar/restaurar las siguientes dos opciones que tiene son la capacidad de cancelar y restaurar la generación de colores. Si cambia muy rápidamente a través de muchos esquemas de color y vea uno que le guste, puede presionar instintivamente la barra espacial y perder el esquema. El uso del botón de cancelación traerá el esquema anterior. Puede volver a cambiar a través de todos los esquemas que ha generado durante la sesión con esta funcionalidad. También puede usar las teclas de flecha para hacer lo mismo. Daltonismo La siguiente opción es la herramienta de daltonismo, que le permite generar 8 paletas específicas para el daltonismo en su paleta principal. Esto puede ser útil si desea que su sitio sea accesible para aquellos que son daltonic. No estoy seguro, pero también puede ser una gran herramienta para usar para las regulaciones de ADA.

Esta es una herramienta muy poderosa y una que realmente puede ayudarlo si intenta hacer que un esquema de color sea fácil de entender para todos. También puede usarlo para verificar el esquema de color existente en su sitio web y ver si necesita hacer cambios importantes. Tenga en cuenta que puede mantener abierta la configuración del daltonismo, que siempre actualizará automáticamente el subpalete para el daltonismo cuando actualice o realice cualquier cambio en la paleta principal. Herramienta de ajuste pálido Su próxima herramienta es la herramienta de ajuste de paletas. Esto le permite cambiar la sombra, la saturación, el brillo y la temperatura de su esquema. Al igual que la herramienta de daltonismo, esta herramienta Coolors abrirá una paleta secundaria, que se basa directamente en su paleta principal. Cada vez que realice cambios, los mostrarán en la paleta secundaria, facilitando la comparación con la primera. Puede ver que tenemos nuestro esquema de color primario y luego nuestro esquema de colores secundarios que muestra lo que sucedería si aumentamos la saturación en 100. Esto es esto. Llega al final de las herramientas que le permiten cambiar y cambiar su paleta de colores. El siguiente conjunto de tres herramientas se dedica a visualizar y compartir su paleta con otras. Vea la primera paleta de opciones, la paleta View, hará un programa emergente que enumere todos los identificadores posibles para el color que generó. Muestra las opciones básicas, como Hex y RGB A Coma, pero también muestra opciones menos conocidas que podrían ser muy útiles para los diseñadores y arquitectos de interiores que intentan comprar pintura real en función del color que generaron.

Obtendrá Copic, Prismacolor, Pantone, RAL y muchos otros identificadores que luego puede usar en cualquier aplicación que requiera identificación de color.La paleta de exportación La siguiente opción es la opción de exportación, que le permite guardar el esquema de color en múltiples formatos y facilitar la compartir con otros. Puede copiar la URL para enviarla a alguien digitalmente, puede generar un PDF que pueda Sea bueno para la impresión, puede crear una imagen que guardará un PNG en su computadora (este es el método que utilizamos cuando exportamos las paletas de colores generadas por esta herramienta que se utilizará en esta herramienta).entrada en el blog).La opción SCSS generará una hoja de estilo para usar en el estilo CSS de aplicaciones web.

Esto es muy útil (isotrópico), porque simplemente podemos copiar y pegar, en lugar de tener que generar esto desde cero. La opción ASC le permite descargar una paleta que se utilizará en Adobe Illustrator y Photoshop. Puede importar esta paleta y luego se muestra en la sección de la paleta de colores de las dos aplicaciones. Si es un diseñador gráfico, esto podría ser de gran ayuda para usted. También tiene la opción de exportar esto como SVG. Guarde en la cuenta Coolors Finalmente, la opción que dice rescate le permitirá guardar este esquema de color individual en una cuenta que cree con la aplicación Coolors. Usamos esto para guardar los esquemas de color que hemos generado, pero para los cuales no hemos usado y, cada vez que necesitemos un nuevo esquema de color para un proyecto de marca o algo así, iremos a nuestra cuenta y seleccionaremos un esquema que hemos generado. en el pasado. El icono final del menú de hamburguesas a la derecha del menú principal para el generador de color Coolors cambia una barra lateral que puede usar para explorar los esquemas de color de otros usuarios o para revisarlo si tiene una cuenta en el servicio. Hay un aspecto social en este coolors, en el que los usuarios pueden generar y compartir sus esquemas de color con la comunidad. Esto puede ser muy útil si desea encontrar un esquema bien diseñado, pero no tiene tiempo para cambiarse entre sí. Y, justo cuando pensaste que habíamos terminado, hablemos sobre el menú más en el menú de la barra superior de esta aplicación. Crear degrades con coolors.co

Esto le permite hacer tres cosas que hemos discutido antes, pero también le permite acceder a herramientas de creación de gradiente más avanzadas. Si selecciona la creación de un gradiente, la aplicación de color cargará una herramienta específica que puede usar para generar y previsualizar los gradientes en tiempo real. Esto es extremadamente poderoso y muy útil para los diseñadores web. En el pasado, utilizamos Adobe Photoshop para generar nuestros gradientes, pero un gran defecto es que puede crear una salida de gradiente CSS. Esta herramienta, la opción de exportación principal es un CSS de exportación.


También puede optar por exportar el gradiente en la plataforma Coolors.co como imagen, verla en la pantalla por completo o incluso copiar y distribuir la URL con otra persona en su equipo como generador de paletas, que es la característica emblemática de esto. Aplicación, puede explorar los gradientes creados por la comunidad. En mi opinión, esto es más fácil que tratar de generar un gradiente solo.






Colocar el cursor sobre un gradiente individual le permitirá ver los colores específicos que lo crean.

Verificador de contraste La última herramienta que ofrece Coolors se llama verificador de contraste. Esta herramienta le permite verificar el contraste entre el color de fondo y el color de la fuente. Esto es particularmente importante debido a las reglas y regulaciones de accesibilidad, así como a la clasificación de accesibilidad de Google y el uso de este rango en los motores de búsqueda. Si su sitio no tiene suficiente contraste entre el fondo y sus fuentes, no solo será difícil de leer para los visitantes, sino que Google podría penalizar su sitio por esto, colocándolo a continuación en su búsqueda de motor. Le permitirá ingresar el color. Del texto en el color de fondo, le mostrará una vista previa de ambos colores con palabras reales y le dará una puntuación de contraste. El puntaje más alto sería alrededor de las 10, y vendría de blanco y negro. Aquí hay un ejemplo de un contraste débil entre el color de fondo y el color de la fuente:

Como puede ver, esto es doloroso leer y destruir la accesibilidad de cualquier sitio web. Puede usar esta herramienta para darle sugerencias automáticamente sobre cómo corregir esta combinación de colores con un contraste débil. Puede intentar cambiar ambos colores o cambiar solo un color individual. En este ejemplo, elegimos cambiar tanto el color de fondo como el color de la fuente. Este es el resultado: