Generar paletas de colores sin fin con Khroma

Sep 12, 2025

Cómo

[dieciséis]

Excelente uso de teoría del color En el diseño es una de esas cosas que separa el excelente desde el promedio. Mientras que el color subjetivo y matizado, es una herramienta poderosa que puede definir la emoción y el tono de una experiencia digital. Por algo tan importante, mi propio flujo de trabajo alrededor de color faltaba severamente.

3 enormes tendencias de color para 2018

Aunque ya existen muchos recursos excelentes, encontré que no había forma de navegar y comparar combinaciones de colores originales rápidamente que se sintieron listas para usar. Eso es lo que pretendía resolver por la construcción Khroma .

Elige un color, cualquier color.

The Khroma training screen with the chosen colour bar up top

Una de las cosas emocionantes sobre Khroma es que usted puede capacitar a un algoritmo AI para actuar como una extensión de su cerebro de diseñador de color. El desafío es que para hacerlo bien, debe elegir 50 colores que le guste. Al construir el algoritmo, traté de hacer que funcione con menos, pero los resultados no eran lo suficientemente buenos.

Cincuenta garantiza que el generador tenga un rango decente para ser variado y lo suficientemente flexible para ayudar con todos sus diseños. El proceso de capacitación es relativamente no estructurado y es probable que sea igual de ciencia y arte. Algunos propuestas pro de mi experiencia deberían ayudarlo a aprovechar al máximo.

Vale la pena mencionar brevemente aquí cómo funciona el algoritmo. Sus 50 colores se utilizarán para capacitar a una red neuronal que pueda reconocer cientos de miles de otros colores similares que le gustaría (llamaremos a esta su afinidad de color). Sabe qué colores no te gustan porque no está en el original 50 que elegiste. Eso significa que si no seleccionas marrón oscuro, no lo verás. Eso está bien si no eres un fanático marrón oscuro, pero no si extrañas algo que realmente te gusta. Eso es lo que hace que la variedad sea tan importante.

Para comenzar a entrenar su generador Khroma, vaya a Khroma.co y haga clic en Personalizar. Verá algunas instrucciones y una pared de desplazamiento infinita de bloques de colores. Un clic en uno de estos bloques lo agregará a la barra de colores elegidos y otro lo eliminará. La mejor manera de proceder es desplazarse y elegir cualquier color que salga como algo que quiera usar en un diseño. Esto funciona bien durante los primeros 30 colores.

Tiempo para refinar

En este punto, querrá mirar la barra de color elegida y ver cómo se está formando. Si este fue el documento de colores en boceto, ¿tendrías todo lo que necesitas? Los próximos 20 colores de aquí deben ser sobre el refinamiento. A medida que avanza un poco de información sobre herramientas, saldrá con algunas sugerencias, por ejemplo, 'Escoger algunos más magenta, amarillos y colores pálidos mejorará sus resultados'. Recomiendo tratar de seguir adelante a estos, pero no tengas miedo de continuar recogiendo nuevos colores. Desde aquí debe elegir 10 más, trayendo el total a 40.

Mira la barra de nuevo. ¿Ves colores que son prácticamente iguales? No es inusual elegir los mismos colores más de una vez desde entonces, bueno, te gustan. Pero eso no será útil para su algoritmo.

Tenía un amigo, prueba un prototipo temprano y me dijo que sus resultados no eran muy buenos. "Es en su mayoría solo azul", dijo. "¿Recogiste principalmente azul en tu entrenamiento?" Respondí. "Sí. Me gusta mucho el azul".

El mejor resultado provendrá de encontrar la amplitud más amplia de la afinidad del color. Es ratón sobre un color repetido en la barra superior, puede hacer clic para eliminarlo. Esto libera esa ranura para un color que aún no has elegido. Haga algo de podar cualquier repetición y continúe completando nuevos colores hasta que tenga cinco selecciones restantes.

Tirar en algunos comodines

Lo encontré gratificante para tirar algunos comodines para mis últimas cinco selecciones. Estos son colores que no creo que nunca usaría por su cuenta. A menudo me sorprendió gratamente lo que Khroma hace con ellos. Cuando al lado de otros colores, parecen encajar perfectamente de una manera que no habría imaginado.

Cuando haya elegido sus comodines, verá un botón de tren aparecer en la parte superior derecha. Puede continuar recogiendo colores durante todo el tiempo que desee desde este punto, pero si sus colores elegidos se parecen a una bonita paleta oscura a la luz con mucha variedad, probablemente estés preparado para comenzar a entrenar.

La formación debe tomar unos tres minutos. Puede esperar que la precisión se ponga hasta los 90 altos. Esto representa esencialmente qué tan bien el algoritmo puede identificar sus colores. En realidad, puede volver y editar sus colores de entrenamiento más adelante si desea probar algunos ajustes.

Construye tu colección

Cuando finaliza el proceso de entrenamiento, se le dejará caer al generador. Se le presentará una cuadrícula de combos de color infinitamente desplazamiento en la plantilla de tipo. Cada combo tiene un panel de información que puede abrir para ver detalles como el nombre, los valores HEX y RGB, así como una relación de accesibilidad WCAG. Con el icono del corazón en la parte superior derecha, puede comenzar a construir una colección de sus favoritos.

Encuentra el combo adecuado

Doing a palette search with #8BD2CA and #32514E. If you're not seeing anything you like, try rearranging the colours in the search bar

La búsqueda es una de las características más poderosas de Khroma. A menudo, tendré una idea suelta de lo que estoy buscando, o ya estoy trabajando con un cierto color y quiero encontrar complementos. Dado que Khroma le da acceso a cientos de miles de colores RGB en su rango de afinidad, parecía importante poder tamizarlos a través de ellos.

Hay diferentes parámetros que puede buscar con: Tipo, Hue, Nombre, HEX y RGB. Los tipos incluyen oscuro, ligero, pastel, pálido, profundo, silenciado, rico, luminoso y neón. Los tonos son cálidos, frescos, rojos, naranjas, amarillos, verdes, cian, azules, violetas, púrpuras y magenta. Hay 1,566 colores específicos que puedes buscar con nombres como 'Royal Blue' y 'Coffee'. Por último, acepta valores HEX y RGB.

Dado que Khroma trabaja con dos combos de color, ahorre para paletas, hay dos ranuras para las consultas de búsqueda. Si ingresa un término en la barra de búsqueda y la búsqueda, obtendrá resultados que coincidan con ese término para la primera ranura de color y el segundo será aleatorio.

Por ejemplo, si busca "brillante", obtendrá un color de alta saturación y un par al azar con él. Si busca "Bright and Blue", obtendrá esos colores brillantes y un azul al azar en la segunda ranura. También puede cadena de términos de tipo y tono juntos, como 'azul brillante' y 'amarillo pálido', por ejemplo.

The details of each pair of colours. Everything can be copied with just a click for quick usage

Un gran uso de casos en los que la búsqueda es especialmente útil es cuando tiene dos colores que desee y desea encontrar complementos a ellos. Solo entraría en esos colores exactos (# 8bd2ca y # 32514e, por ejemplo) y la búsqueda debajo de la plantilla de la paleta.

A veces buscarás un color o término que no está en su rango de afinidad. Ahí es donde los controles de los sesgos entran en juego. Los verá como dos campos de clic y arrastre en la parte superior derecha de la barra de herramientas. El sesgo representa lo estricto que el generador está en colores que coinciden con los 50 que eligió.

Cada color, Khroma genera carreras a través del algoritmo y obtiene un porcentaje (qué tan probable que crea que le guste el color) en respuesta. Si ese porcentaje está debajo del sesgo, se desechará y el proceso se repite.

En el caso de una consulta de búsqueda fuera de rango, el sesgo se reduce automáticamente hasta que pueda pasar la prueba de umbral. Si está totalmente fuera de su rango (como nuestro marrón oscuro desde antes), entonces automáticamente lo entregará a 0. De esta manera, cada color que reciba en Khroma por defecto de su afinidad, pero es capaz de ajustarlo, por lo que no solo está limitado a esos colores.

Imágenes personalizadas

The five templates of Khroma – you can see the palette adding a couple more colours to the mix

Puede encontrar algunas opciones útiles en la parte superior derecha en el icono de Configuración. Una de ellas es la capacidad de subir una imagen personalizada a la plantilla de la imagen. No necesitas hacer nada a la imagen de antemano; Solo asegúrate de que sea el tamaño correcto.

Si bien puede seguir adelante y usar su propia cabeza de cabeza (no lo juzgaré), es mejor pensarlo como la capacidad de hacer su plantilla. ¡Tome una captura de pantalla de algo que está trabajando en boceto o su herramienta de diseño de elección, carguela y comience a navegar por combinaciones ilimitadas!

Espero que le dé una oportunidad a Khroma y encuentre una adición útil y poderosa a su kit de herramientas de diseño.

Este artículo fue publicado originalmente en el número 303 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar emisión 303 o Suscríbete aquí .

Artículos relacionados:

5 consejos para entender la teoría del color
Las mejores herramientas de color para diseñadores web.
7 consejos para gestionar el color mejor en la web

Generar paletas de colores sin fin con Khroma

Elige un color, cualquier color.

Tiempo para refinar

Tirar en algunos comodines

Construye tu colección

Encuentra el combo adecuado

Imágenes personalizadas

Cómo - Artículos más populares

Cómo detener el empañamiento de sus gafas al usar una mascarilla

Tackle retrato pintando con aceites

Cómo hacer un Mandelbulb

Consejos de diseño de concepto para artistas

Construye tu propio juego de física webgl

Cómo agregar video a PDF interactivos

Crea efectos de pintura en Photoshop CC

Estrategia de experiencia del usuario maestro

Categorías