How to get the dominant colors of an image with JavaScript

color-thief

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

Generating a color palette from an image

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.

External Popup Links Using jQuery

With the deprecation of the target attribute in XHTML Strict, opening links in new windows has become a bit trivial, if not annoying, to standardize. I always look for a consistent, unobtrusive approach that degrades gracefully; and since I use jQuery quite frequently, this is how I usually handle them.

The solution is a small piece of jQuery code in your $(document).ready()section:

Now, add rel="external" to all of the links that you want to open in a new window:

From here on out, users that have JavaScript enabled will receive external pages in new windows, while those without JavaScript will still be directed to the appropriate location.

I use rel="external" because it’s generally a good practice to limit popup links to external websites only. You could very well use rel="popup"instead, but I prefer the former for semantics.