Algorithm challenge: Generate color scheme from an image

Question

Background

So, I'm working on a fresh iteration of a web app. And, we've found that our users are obsessed with being lazy. Really lazy. In fact, the more work we do for them, the more they love the service. A portion of the existing app requires the user to select a color scheme to use. However, we have an image (a screenshot of the user's website), so why can't we just satiate their laziness and do it for them? Answer: We can, and it will be a fun programming exercise! :)

The Challenge

Given an image, how do you create a corresponding color scheme? In other words, how do you select the primary X colors in an image (where X is defined by the web app). The image used in our particular situation is a screenshot of the user's website, taken at full resolution (e.g. 1280x1024). (Note: Please simply describe your algorithm - there's no need to post actual pseudocode.)

Bonus points (street cred points, not actual SO points) for:

• Describing an algorithm that is simple yet effective. Code is how we create - keep it simple and beautiful.
• Allowing the user to tweak the color scheme according to various 'moods' such as 'Colorful', 'Bright', 'Muted', 'Deep', etc. (a la Kuler)
• Describing a method for reliably determining the main text color used in the website screenshot (will likely require its own, separate, algo).

Inspiration

There are several existing sites that perform a similar function. Feel free to check them out and ask yourself, "How would I duplicate this? How could I improve it?"

• http://www.pictaculous.com/
• http://www.cssdrive.com/imagepalette/index.php
• http://kuler.adobe.com/#create/fromanimage

Answer 1

1. To find the primary X colors, screencap the app. Run a color histogram on the image. The top X colors in the histogram are the theme. Edit: if gradients are used, you'll want to pick distinct "peaks" of colors; that is, you may have a whole bunch of colors right around "orange" if orange is one of the main colors used in the gradients. Effectively, just enforce a certain amount of distance between your colors chosen from the histogram.

2. Tweaking the color scheme can best be done in HSV space; convert your colors to HSV space, and if the users want it to be "Brighter", increase the Value, if they want it to be more "Colorful", increase the Saturation, etc.

3. Determining the text color can best be done by characterizing areas of high variability (high frequency in Fourier space). Within those areas, you should have either: two colors, text and background, in which case your text is the lesser-used color; or you'll have several colors, text and background image colors, in which case the text color is the most common color.