Color Thief – Easily Create a Color Palette from Any Image

color thief

color thief

Color Thief is an awesome tool. You can easily find the dominate colors out of just about any image. This is a great way to put together some design palettes, saving you time and feeding you inspiration.

Color Thief uses Javascript and the canvas tag to do this.

Check it out:

Color Thief

The Color Thief script could be used for a couple of cool things. For one, it could be used for websites that sort and search by color.

Here are two really awesome examples:

The second use could be for a color adapting UI.

Very cool:

With this script you can build a UI that adapts to the colors of an image. For example, you could add color accents to the UI by changing the font or border color depending on what image is currently being displayed in your portfolio. To get a bit fancier you could darken the dominant color and use it as a background color or invert the dominant color and use it as the text color.

Here are some examples of Color Thief at work, pulling both the dominant color of an image and the color palette:

color thief

The creator, Lokesh Dhakar, shares this:

Grab the code from Github. Include jquery, quantize.js, and color-thief.js on your page. Then add something similar to the following:

myImage = $('#myImage');
dominantColor = getDominantColor(myImage);
paletteArray = createPalette(myImage, 10); // 2nd argument sets the # of colors in palette

That’s the gist of it. For more information, your best bet is to dig through the code.

You can grab the Color Thief code from Github, take a look at the Color Thief website and read more on Dhakar’s Color Thief blog post.

[HT: more(code);]

11 SHARES

Eric Dye

I am an entrepreneur and human rights advocate. I spend most of my time as writer and editor for ChurchMag and Finding Justice, but you can also find me working on Live Theme and for the International Human Rights Group. All while enjoying my family and sipping espresso in Italy.

What would you like to say?

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>