A script for grabbing the color palette from an image. Uses Javascript and the canvas tag to make it happen.
See a Demo | Read more on my blog
var colorThief = new ColorThief();
colorThief.getColor(sourceImage);getColor(sourceImage[, quality])
returns [num, num, num]In this example, we build an 8 color palette.
var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 8);getPalette(sourceImage[, colorCount, quality])
returns [ [num, num, num], [num, num, num], ... ]In this example, we build an 8 color palette from only the left half of the image, masking the other half.
function filterFunction(x, y, r, g, b, a, imageData) {
return x < imageData.width / 2;
}
var colorThief = new ColorThief();
var quality = 10; // default quality
colorThief.getPalette(sourceImage, 8, quality, filterFunction);In this example, we build an 8 color palette from pixels of the image that are not green.
function filterFunction(x, y, r, g, b, a, imageData) {
if (g > 200 && r < 50 && b < 50) {
return false;
} else {
return true;
}
}
var colorThief = new ColorThief();
var quality = 10; // default quality
colorThief.getPalette(sourceImage, 8, quality, filterFunction);