How To Create Smart Color Palettes With Colormind

It’s certainly not the first use case that comes to mind when you think about it. Nevertheless, the automated creation of color palettes by means of deep learning certainly makes sense.

Colormind: AI experiment with practical use

Jack Qiao from Vancouver, Canada, does not call himself a designer or an engineer, even though he works in both areas. Jack does not like to be committed and always tries to work on things that interest him personally. In the developer community, he already gained a certain notoriety with his JavaScript tool SVGnest.

His latest project, Colormind.io, deals with the question of how artificial intelligence could be used to create harmonic color palettes. Jack’s basic idea was that even moderately experienced and color theory powerful designer color palettes but after all create largely to their own taste. He sought a more scientific method to reduce the human factor more and make the results more objective.


So he used the technique of “deep learning,” which is basically almost always meant these days when talking about artificial intelligence. If you are interested in a more sophisticated definition, you should read my article at t3n, which explains the differences more accurately.

“Deep learning” refers to a method of machine learning that is very similar to the working of the human brain. Using neural networks, the machine itself is able to detect structures, to evaluate this recognition, and to self-improve in several forward and reverse passes. Thereby she improves her results independently, so she learns constantly.

For the relatively simple use case of generating color palettes, Jack fed his AI (artificial intelligence) with pallets from Adobe Color, as well as best practices from Dribbble. The results obtained still require human judgment, but represent a largely objectified basis for further work.

Colormind: How to generate color palettes with the AI tool

Creating harmonious color palettes with Colormind is easy. On the landing page of the project, you will see a large color palette directly below the main navigation. Colormind always starts with a suggestion. You can generate a new proposal via the “Generate” button on the left below the palette.

However, this approach will only be moderately effective. It is better, you select a start color by clicking on the button with the sliders below the first palette field. It opens a color picker, with which you either visually select a color value, or enter the desired color as a hex value.

After selection, this color is displayed in the first palette field. If it is a color that definitely has to be in your palette, you can now set it to immutable by clicking on the lock icon. Now you click on the button “Generate” again and Colormind adjusts the other color values of your initial selection.


The user control can be found under the individual fields of the color palettes. (Screenshot: Dr. Web)

The position of the color in the palette makes a difference. If the color you choose is part of the palette, but not its starting point, simply move it to another position with the arrow icons below each box and regenerate the palette.

Colormind is also able to generate color palettes from images. To do this, upload your desired image via the “Upload” button and click on “Generate”. Here Colormind works flexibly. If you click “Generate” several times, you will get different results in moderation. The generator makes sure that the results always work well as a pallet.


Images with extracted color palettes. (Screenshot: Dr. Web)

If you’re interested in how Jack’s AI works, then you should read his two blog posts, which explain the algorithm in general and the approaches to images.

(The post first appeared in March 2017 and has been kept up to date since then, with the last update in May 2019.)