About The Project
What if AI can pick up the best colors for your brand?
Colour plays a key role in setting a brand's impression right within 3 seconds so most web designers spend a good amount of time to pick the best colour palette for a project. It is a relatively challenging step for some because good colour combination has got to do with how it feels when colours are put together on a website. 
XTOPIA's DNA has always been about empowering its users so great colour palettes should not be limited to a designer's domain. With that in mind, our team decided to take on the challenge of using AI to first analyse a brand's logo, then to recommend the color palette which best represent the brand. 
Part 1: Getting your brand colours
The Concept
We started off the first half of this project by asking ourselves: Given a brand's logo, how do we write a program to extract the brand's key colours?

Something that immediately came to mind was to count the RGB values of each pixel in the provided logo. Using this method, we thought that once we had gone through the entire image pixel by pixel, we could simply take the colours that appeared most frequently as the brand's key colours.
But.. oops!
The Challenges
As it turns out, that first idea wasn't so great. While we did manage to get a general breakdown of the colours of the image, even a 1 RGB value difference would lead to a new colour being counted, despite it looking like the same colour to the human eye. This resulted in many "duplicate" colours in our final count. This was especially problematic as some of them had counts significant enough to push more interesting colours further down in our result set.

Our Solution
In order to solve this, we knew we needed a way to bring these similar colours together. In the end, we ended up implementing k-Means clustering - a method which clusters data points into a chosen k number of groups based on how close they are to each other. As brand logos tend to have just a few colours, we found that setting k to 5 was ideal for most cases: By forcing each logo to just 5 component colours, we achieved an adequate trade-off between accuracy and performance.

The Outcome
Once the colours were clustered into groups, we chose key colours from the logo by picking just the 2 largest colour clusters, excluding those which were white, black or gray. These key colours then formed the basis upon which we would go on to recommend a colour palette.

Counting pixels - Duplicate colours plague the result set printed onto the bottom of the image.

Taking a closer look - Zooming into the image shows the source of the duplicate colours.

k-Means implemented - Once the colours were clustered, a result set representative to the image was obtained.

Part 2: From few colours to a full palette
The Concept
Our concept is heavily inspired by Colormind. We use generative adversarial network (GAN) to carry out the supervised machine learning of getting a full palette from few colours. Supervised learning is where you have a set of training data, input (A) and output (B) pairs, the machine learning algorithm will learn the mapping function from A to B.

The Method / Model
Basically, when you have the right algorithm and training data, machine learning will find the ways by itself. And so, we have identified the right algorithm and tools but what about the data? The task is to get full 5-colour palette from 1 to 2 colours. We need colour palettes as our output (B) and subset of corresponding palettes as our input (A).

But how many palettes do we need? Either too many data or not enough data will have negative impact to the performance. Overfitting and underfitting is our main concern here. We have gone through multiple iterations to find the good fit ranging from 1,000 to 100,000 of colour palettes. We also defined our rules to remove palettes that consists of similar colours and we keep only palettes with vibrant colours that are suitable for web designs.

The Outcome
From collecting data to processing data and to training the AI method, we managed to finish our very first AI project. Although we are still having overfitting issue on some of the colour ranges especially dark-to-black colours as our data collections are towards vibrant colours, we are happily presenting our outcome to you.

Output B - Each palette consists of 5 colours

Input A - Subset of full 5-colour palette

End Note
The initiative took approximately eight weeks for us to develop a proof of concept and we are excited to share with you how we attempted to solve this with AI. This AI method is a collaborative effort between two great minds at XIMNET Malaysia. Some of you may ask, why Robin? The sight of robin reflects that spring is impending and hope is here. We see great possibilities in developing better design and web applications through thoughtful AI method.
We would also like to thank Colormind for making his approach and methodology available on the internet. Got questions? Contact us directly at hello@xtopia.io
An AI initiative by
© 2020 XTOPIA SDN BHD (516045-V) All rights reserved | Privacy Policy
Ooops!
Generic Popup