Skip to content

HTML5/Canvas Fun: Extracting Colors from Images

In my daily work I needed to come up with a method to extract a color palette from an image. I found a number of websites that do this, but nothing I could simply incorporate into an existing web app. While I could do this with PHP (e.g. using ImageMagick) I thought I’d see what I could do client-side, using Javascript and the canvas element of HTML5. Below is the result. You will need a newer browser (Chrome/Safari/Firefox) for this to work properly.

As always, view-source to see what’s going on under the hood. In a nutshell: I’m loading an image into a canvas element and pulling out color data from every pixel (using getImageData and a CanvasPixelArray). This creates an array of the red, green, blue and alpha values of every damn pixel. Once we have that data, we can simply count the instances of each color and extract the top 10 colors. I quickly realized that I was getting slight variations of a single color in the results. To accomodate for this, I added some logic to check each color from the top values against colors already shown. If a similar color has already been shown, I threw it out and moved on to the next most present color. There may be a better way to exclude similar colors, but this is a decent first pass.

As always, comments and suggestions for improvement are very welcome.

Note: I am using a bit of PHP to pull in the remote image entered in the text box. This is to work around a security limitation of the browser that prevents loading of remote images. Not terribly secure if it’s this simply to work around ;)

UPDATE: Per Greg’s suggestion (below) I’ve added the RGB values to each color tile, for easy copy/paste.

From → Geekery

22 Comments
  1. That’s pretty neat! It would be a more useful tool if it also gave you the hex code for each color, though.

  2. Good point Greg. I should add that when I get a little time.
    Done. See above. Thanks for the idea.

  3. Brilliant, very impressed with the stuff people are coming out with at the minute. Are you potentially going to be releasing this for public usage?

  4. @Jon: Since this is all client-side code, you can always right/ctrl-click and view the source of the iframe above and see what I’m doing.

    Might be a good thing to somewhere else as well. Thanks.

  5. Sure, I was just meaning because you mentioned about having PHP within this scripting etc. I am going to take a look in more detail when I get home this evening :)

    Thanks again.

  6. Ah yes… the PHP part. I went ahead and posted both pages to GitHub:

    http://github.com/hungrymedia/Canvas-Color-Extractor

  7. Kimmo K permalink

    Exactly… what I was looking for!

  8. I’m getting security errors running this script on both Chrome and Firefox.

  9. I think the security errors have to do with the fact that I’m using an iframe here. If I hit the page directly, Im not seeing errors:
    http://hungry-media.com/code/color-extract/

  10. tibor permalink

    Hey this is great Warren. Do you think it would be possible to add the percentages of the particular colors occurence to the script? This way you could identify the most dominant color for example…

  11. Good idea. I’ll look into that.

  12. Gels permalink

    Very nice tutorial! Exactly what I’m looking for, would it be possible if you can add a button for users to upload a photo saved from their computers?

  13. I is certainly possible, but since this is demonstrating how to extract colors using only client-side (Javascript) code, that would be an added layer that falls outside this experiment.

    If you’re seeking a tool to extract a color palette from an uploaded image, you might try http://www.pictaculous.com/.

  14. Roger permalink

    This is a FANTASTIC Tool! Thank you for providing it. I would really like to use it locally (not online as a web app) but I am having trouble figuring out how to accomplish that. I am a graphics designer, not a web deisgner, and would like to use this to extract dominant colors from images that I am working on. So I have created a directory on my Local “c:\” drive and placed “index.htm” and “jquery.min.js” in it. I have modified index.htm to open image files in the same directory such that they appear on the index.htm page when I open the page and image in Google Chrome. The problem is that neither the color swatches nor the hex codes appear on the page, therefore I assume the colors are not be extracted. It appears that I do not have all of the script or other files that I need to make this work locally in the directory with “index.htm” and “jquery.min.js”. Please help me figure out what I need to do to use this tool locally. I really appreciate any help provided!

  15. This actually will not work in the browser without running on a web server due to Javascript security. You would need a desktop application or to run this within a local web server running something like WAMP or MAMP

  16. Roger permalink

    Thank you for suggesting a local web server. I am running Windows 7 (64 bit). I installed WAMP 64 bit. I created a new Index.htm as you coded it in my www directory. I am still having the same problem. The page opens fine. The image appears on the page. The problem is that neither the color swatches nor the hex codes appear on the page, therefore I assume the colors are not be extracted. It appears that I do not have all of the script or other files that I need to make this work locally. Do I need more than index.htm, jquery.min.js and getImage.php to make this work? Thanks

  17. Roger permalink

    UPDATE: I got it working locally. I was using the localhost absolute URL when I should have been using a relative URL to open an image.

    As tibor previously suggested it would be great if percentages of the particular colors occurence were also displayed with the swatches and hex codes.

  18. Excellent news! I’ll look into adding percentages as well.

  19. Roger permalink

    Cool! Thanks for looking into adding percentages.

    How would you increase the number of color swatches that are displayed?

    Thanks.

  20. To increased the number of swatches, change line 121 of index.html:

    if( ctr > 10 ){

    Change 10 to the number you desire.

  21. Hossam Zee permalink

    Very pretty tool; thank you man.

  22. Just what I was looking for.

    Thank you very much!

Comments are closed.