Color Palette from Photos with HTML5 Canvas

Last updated on December 22, 2012 in Development

Color Palette with JavaScript

Do you remember ColorAPI? What happened to it? Well, it got me thinking about creating my own color scheme generator from a online photos using HTML5 CANVAS and JavaScript. A little research landed me on Andrey Okonetchnikov’s Colorist. I glanced at the code (I put it on JSFiddle if you want to take a look) and realized that the script does calculations around average color of different slices of the dropped image. I like this approach, it is fast, but I wish that I could limit the amount of colors on the palette to a certain number.

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.

The MMCQ (modified median cut quantization) algorithm is available in C from Leptonica and Nick Rabinowitz transformed it into JavaScript. There is also a JavaScript library for hierarchical clustering but looking into quantisize.js quickly landed me on Color Thief which does exactly what I wanted to create.

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.

Here are some other links on the subject of color histograms and palettes with JavaScript:

HTML5 Color Histogram Generator
Compute Image Histogram
Gradient Finder
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