How to get the dominant colors of an image with JavaScript

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);

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

Generating a color palette from an image

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

// returns [ [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 Creative Commons Attribution 2.5 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.

Thanks for Reading

If you found this post helpful, please check out my service Surreal CMS. It’s a hosted content management system with beautiful inline editing and a ton of other great features!

Author avatar

About the author

Cory LaViska is a founder, web developer, and bootstrapper based in Orlando, Florida. Need to get in touch? You can connect with him on Twitter. Looking for a simple, no-worry CMS for your clients? Try my Surreal CMS!