Algorithm challenge: Generate color scheme from an image


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. 1280×1024). (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).


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?”

Algorithm challenge: Generate color scheme from an image