Show HN: Colormind – Color schemes via Generative Adversarial Networks
colormind.io
colormind.io
All (deep) learning models suffers the issue of 'garbage in garbage out', so one way that could make the palettes more related to real world web designs is to learn the colors used in web designs directly instead of from photographs and movies since those data will has much more noise than good web designs (with video and images stripped out of course).
let say Bootstrap. i tried using 1st color for button, 2nd color for "success" label, etc. it ended up ugly.
I am working on something that does encode context though.
By default:
primary == dark blue success == green warning == orange info == light blue danger == red
Then the rest of the styling for the theme is calculated from that, so you have other elements defined as: whatever the primary color is but 40% darker.
What I'd love is a color palette picker that let me put in a particular color orange and then would spit out:
"Hey, here's the green, dark blue, light blue, and red that match that orange you chose."
Primary and secondary are usually for backgrounds of major elements, detail elements to draw attention to. The other 3 colors should be boring but pleasant. For subtle variation without drawing attention to the elements
Colormind picked the green color on all attempts
Edit: after several more attempts coolors started picking up the green color
Test Image: http://i.imgur.com/6pMMV4W.jpg
Look up "cubehelix" if you haven't heard of it already, it might give some inspirations.
Have you considered using fine art as training data, perhaps broken down into movements/motifs? In your blog posts you mentioned that not all photographs make for well chosen palettes, this could get around that as artists should have a great understanding of theory.
As far as the pixel-level errors in your palette training, would downscaling+blur solve this?
For which reasons did you not use a 5x1 pixel RGB image as the target, that would have been orders of magnitude faster to train?
Thanks!
Speed improvement also doesn't scale linearly with input size. Eg. there's only a 5x improvement going from 256x256 to 256x1
curl 'http://colormind.io/api/' --data-binary '{"model":"default"}'
curl 'http://colormind.io/api/' --data-binary '{"input":[[44,43,44],[90,83,82],"N","N","N"],"model":"default"}'
keep in mind this is hosted on a single Linode 4096, and there's no SLA or anything :]
It's handling the HN spike pretty well so far though.also the models are rotated daily (ie. different ones are available each day), with the exception of "default"
As for why a GAN specifically, I talk a bit about that in one of the blog posts. Neural nets trained with L1/L2 loss tend to produce "averaged" colors, dull greys and browns. The learned loss from a GAN allows the output to take on more extreme values.
I think there are rather simple solutions to these types of problems. But sometimes everything looks like a nail.
A statistical approach might work, but you'd be essentially interpolating your existing samples. A GAN is capable of generating novel solutions.
The crux of the issue is that despite just having 5 colors, the solution space is huge (256^15), and most of the search space is junk. The difficult part is identifying what looks good, and classically this is just called color theory. The problem is that color theory is a leaky abstraction that doesn't capture what intuitively "looks good" and is largely used as a starting point for ideas rather than something that gives useable palettes. Hence the popularity of user-submitted and curated sites like coolors and the old kuler site.
(2^24)^5 = 256^15
Many of the colors in the 2^24 range are similar which is why most of the linear search space is boring. Our eyes don't care much about #f67368 vs #f67468 but we do care about #f67368 vs #f6e668. Why? 0x73 x 2 = 0xe6
Instead of blindly incrementing RGB color values, look at colors which differ by powers of 2. For example, choose 15 random values between 0 and 8. Let's call them c0 to c14. Then assign those numbers to your color pallet as 8-bit RGB values as follows. Color0: R=2^c0, G=2^c1, B=2^c2
. . .
Color5: R=2^c12, G=2^c13, B=2^c14
Rounding 2^8 down to 255. You will find non-boring color schemes because the search space better fits how our eyes see color. This new search space is only 9^15 which is just less than 2^48, far less than 2^120 and a lot more interesting.You could also search the HSV color space in this way and you don't have to only look at powers of two. Consider for, example powers of 1.25. The point is that by organizing your search, you will find interesting colors pallets easily.
I'm betting that your GANs already encode some sort of exponential search based on how you trained them vs your initial attempt using L1/L2.
Is this limited to generating palettes of 5 colors? Sometimes all 5 won't be needed, wouldn't that make the output a little less useful since the algorithm considers how each of the five interacts with the others.
If I only needed two colors, I wouldn't need those two colors to work against three other colors.
Did you have any thoughts with regards to releasing it as open source so that we could run our own instances with the various training sets? I note that you appear not to be monetizing it at all, so I figured I'd pop the question :)
I do have a few bash scripts for color extraction that I could upload to github, although they're pretty quick and dirty.
Maybe there's a better way to do this that I'm not aware of though (Floydhub?)
Thoughts?
I am making something that disambiguates between foreground and background, but still 5 colors for now.
Colors are kind of subjective, and this is just meant to add some variety. eg. If you make a gradient out of 4 shades of the same color most of the models will complete the gradient, but a few of them would give you a contrasting shade.
Sounds like a PRNG to me.
It is very easy to programatically generate several color palettes from a main color.
It is also wasy to select one or more main colors from a picture.
positioning in a palette matters because colors are perceived relatively.