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 wor

Answer 1

I do this to find the palette used for images (of artwork).

1. I start with imagemagick and resize a large image down to a workable size (i.e. 400 px on largest dimension.) This actually helps convert subtle local color differences into fewer pixels with an average of those colors.

2. Loop through each pixel present in the resized image, reading the RGB values for each pixel, convert the RGB to HSB and store the HSB values to an array.

3. For each pixel color found, I then divide the Hue range (0,255) by 16, the Saturation range (0,100) by 10, and Brightness range (0,100) by 10. Round the result up or down to an integer. This helps group pixels into categories of similar colors.

   So a pixel with HSB of 223,64,76 would be in the category 14,6,8

   Within each category, you can still find the exact color of each pixel, but for the most part the categories themselves are a close color match to the source image.

   Choose to divide the HSB into finer divisions if you want better color replication from the categories. ie. divide each H,S,B by 8,5,5 instead of 16,10,10.

4. Count up the most prevalent color categories, sort and display. I discard color categories with very few pixel counts.

Note: This is really designed for artwork that has very few pixels with identical color values (i.e. paintings with shadows and gradients.)

For the most part, an HTML page probably has more pixels that exactly match a specific color value (i.e. background color, text color, etc. are all going to be the same color wherever they appear.)