How to get the dominant colors of an image with Color Thief

Heads up! This post was written in 2014, so it may contain information that is no longer accurate. I keep posts like this around for historical purposes and to prevent link rot, so please keep this in mind as you're reading.

— Cory

You know how Dribbble shows a color palette for each shot users upload? They always look perfect right? Here's a tool that can give you the same quality results using pure JavaScript.

I played with Color Thief a few months ago but surprisingly never posted about it. For me, something that's easy to use and has consistently great results is pure gold. Here's how it works.

Getting the dominant color of an image #

var colorThief = new ColorThief();
colorThief.getColor(sourceImage);

// { r: num, g: num, b: num }

Generating a color palette from an image #

var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 8);

// [[num, num, num], [num, num, num], ...]

Learn more about how Color Thief works and try it out with your own photo. The project was created by Lokesh Dhakar and licensed under the MIT license.

What about a PHP version? #

It's amazing that JavaScript can do all these great things, but if you're running PHP on the backend then you're out of luck. In that case, there's a PHP port of Color Thief that you can use for similar results.