Color Palette from Photos with HTML5 Canvas
This script does not do that because when colors from different slices are similar, the getAverageColor function combines them to make a new color, so the amount of colors you get on your palette depends on the image. This is important because we don’t want to have very similar colors on the palette. However, we do want to limit the amount of colors, so how can this be done?
Well, what I want to do is create a color histogram of the image and return the top 5 most occurring and non-similar colors in the palette. This actually requires a lot of processing so doing more research landed me on color quantization. One of the links in that Wikipedia article points to Dan Bloomberg’s paper on color quantization using octrees where you can read about methods for performing color quantization on full color RGB images using an octree data structure.
It uses the median cut algorithm to cluster similar colors and return the base color from the largest cluster and as a result, it gives you a dominant color and color palette with good performance on the client-side. So, I ended up not needing to write any of my own code but I wanted to share my research and also some interesting links. I did, however, create a jsfiddle that generates the color palette from a photo with color-thief.
HTML5 Color Histogram Generator
Compute Image Histogram
color palette generator around a central color
Node.js image color palette extraction with node-canvas
color palette based on occurrences in your CSS
PHP version of generating a color palette from an image
Extracting intersting colour palettes from an image with ActionScript
Real time color 3D histogram analysis from video
24 Visually Unique Colors
Colors in CSS
Raphaël plugin for creating beautiful pointillized animations
ColorSlice – color identifier from dropped picture