Databases
StackOverflow2013
Postsdbo
POAlgorithm challenge: Generate color scheme from an image
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAlgorithm challenge: Generate color scheme from an image
    text
    copied!<h2>Background</h2> <p>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! :)</p> <h2>The Challenge</h2> <p><strong>Given an image, how do you create a corresponding color scheme?</strong> 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). (<em>Note:</em> Please simply describe your algorithm - there's no need to post actual pseudocode.)</p> <p>Bonus points (street cred points, not actual SO points) for:</p> <ul> <li>Describing an algorithm that is simple yet effective. Code is how we create - keep it simple and beautiful.</li> <li>Allowing the user to tweak the color scheme according to various 'moods' such as 'Colorful', 'Bright', 'Muted', 'Deep', etc. (a la <a href="http://kuler.adobe.com/#create/fromanimage" rel="noreferrer">Kuler</a>)</li> <li>Describing a method for reliably determining the main <strong>text</strong> color used in the website screenshot (will likely require its own, separate, algo).</li> </ul> <h2>Inspiration</h2> <p>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?"</p> <ul> <li><a href="http://www.pictaculous.com/" rel="noreferrer">http://www.pictaculous.com/</a></li> <li><a href="http://www.cssdrive.com/imagepalette/index.php" rel="noreferrer">http://www.cssdrive.com/imagepalette/index.php</a></li> <li><a href="http://kuler.adobe.com/#create/fromanimage" rel="noreferrer">http://kuler.adobe.com/#create/fromanimage</a></li> </ul>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload