Extracting Colors With Colorific | Hacker News Reader

Extracting Colors With Colorific

99designs.com

97 pointsdhotson28 comments

It would be nice if there was some acknowledgement of previous work in this area like the median cut algorithm http://en.wikipedia.org/wiki/Median_cut the neuquant algorithm http://members.ozemail.com.au/~dekker/NEUQUANT.HTML

or the dozens of other image to palette services a google search away (including one that google uses itself for image search)

So, maybe an explanation of why this is better than those, different from those, a comparison of sorts. Or would it be better if some third party did this "benchmarking" work eh?

specifically, I am concerned that this approach is based on tiny micro-heuristics based on specific images and not a robust statistical model of human perception.

edit: here's another (I may use this comment to continue collecting existing algorithms) http://www.springerlink.com/content/f002412013877333/

We haven't really looked too deeply into existing research in this area, so I'm not sure how our approach compares. We'd still be very interested if you've got any suggestions for material to check out.

One difference between our program and other general purpose quantization algorithms is that we wanted to optimise for logo designs and images with flat shapes and colors (as opposed to photos with millions of colors).

We also wanted to get something working quickly so that we could get onto some large scale color analysis stuff (which we'll hopefully be writing about soon). There's definitely room for improvement in the color extraction process.

One thing I would like to research is the fact that once you map colors into lab space you end up with a point cloud with clusters around the primary colors. the problem then becomes using AI techniques to find the "peaks" in this data, and finding how the results from that step statistically match up to human perception of primary colors. This ends up being a similar problem to signal processing the output from a capacitive touch screen. The processor at a low level simply receives a 2D capacitance image from which it must extract the center points of fingers and their sizes- And there is a broad range of literature to find on this more generalized problem of "peak detection".

incidentally I'm pretty sure you and I are in the same city, given that I used to work at the same company as you.

Oh?

sitepoint

I feel like k-means in in Lab color space would lend itself well here too. Either by picking a large k that you then narrow down by picking the highest contrast colors, or instead by running k-means multiple times with different k's until you get an error threshold that is tolerable and results that have a high enough contrast. K-means is also a pretty easy algorithm to understand/implement.

that's what i was thinking, as well. of course the problem with k-means is figuring out the number of clusters...

We haven't tried clustering yet, but I'm keen to.

Correct me if I'm wrong, but by using clustering you might end up with colors that didn't actually occur in the original design right?

In our case we wanted to make sure we found colors that the designer actually chose. I'll have to try this..

K-means clustering gives you a set of centroids which are the calculated means of each cluster. If you only want actually occurring colors, just look up the color closest to each centroid.

Google uses k-means clustering in Chrome on their new tab page (though they use RGB). The most visited section shows a color strip below each site, with a color chosen from the site's favicon.

Here's the code: http://src.chromium.org/svn/trunk/src/ui/gfx/color_analysis....

It turns out the header file actually has a pretty nice explanation of the algorithm:

http://src.chromium.org/svn/trunk/src/ui/gfx/color_analysis....

I am going to straight up lift that idea into a web app I've built. Providing users a hint more context about their content makes interfaces less bland and anonymous. Thanks for raising it!

This is really neat. One of my favorite Windows design features (there aren't many) is the way icons in the taskbar are highlighted with their primary color when you mouseover. This seems like the perfect solution to replicate that effect elsewhere.

I noticed the other day that Ubuntu's Unity also does this. It's a very nice feature.

How is this different from ImageMagick? http://valokuva.org/?p=72 (really asking)

For problem 3: Why exclude all greys? If you asked me what colour that logo was I'd say black/red/white/grey, not red/dark red.

This was my first question too. In that picture, not any grey would match with the reds to give the feel of that image.. probably.. Maybe just order by saturation, and then limit to 5 colors?

Yep, you're right. It's difficult to differentiate greys that are important vs those that we don't care about. Our current solution works not too badly and gives us results that are more visually appealing, but I agree we could do better.

I'd like to try ranking greys lower somehow.. maybe some kind of weighting by saturation could help.

Very awesome.

Google's logo has 255 colors (including shades). With most other companies I might consider that to be a coincidence.

255 is not because Google designers chose 255 specific shades but rather the limitation of 8-bit GIF color palette.

https://www.google.com/images/srpr/logo3w.png

256 (not 255) color palette also applies to 8-bit PNGs.

I'd like to find or make a ruby version of this.

If you do, reply here. I'd like one too.

Are you actually working on this? Because if not, I'm tempted! Just don't want to duplicate effort here.

    $ echo myimage.png | colorific

Seems a slightly odd way to get filenames.

It's because we're running this over millions of images. We don't want to pay the startup cost each time.

Reply on news.ycombinator.com