Rainbow
Heather Arthur has been busy finding a creative new use for canvas with Rainbow, a browser extension for Firefox.
I wanted to grab the color scheme of whatever website the user is viewing… The problem with getting the colors from the DOM is that websites use images and gradients so sometimes you can’t get the overall color scheme just from looking at the CSS colors. Luckily, you can capture the color of every pixel on a webpage from an extension using the HTML 5 standard canvas.
Twitter's colour palette
Browser extension Rainbow draws the entire webpage on to a canvas using the drawWindow function. It gets an array of pixel values used with the getImageData function and then loops through each pixel value in the array counting each colour’s frequency. Hierarchical clustering is then used to merge similiar colours before returning the final palette.
Related demos