ColorFinder: The user guide

Go to the home page | Go to the demo

The basics

ColorFinder is a javascript library that can give you the dominant color of any image. To use it, it is very simple:
<script src="/somewhere/you/put/the/file/colorfinder.js"></script> <script> var rgb = new ColorFinder().getMostProminentColor(document.getElementById('image')); document.getElementById("color").style.backgroundColor = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')'; </script>
This snippet assumes you have an image element in your page whose id is image. It also assumes there is an element whose id is color and sets its background to the dominant color of the image.

NOTE: Due to restrictions to the canvas object, this works only if the image comes from your own domain.

Mark preferences

You can build the ColorFinder object with a callback method. This method:
  • takes three numbers as arguments: R, G and B. These are the components for the color that should be weighted. They are between 0 and 255.
  • should return a positive number marking your weight over the specified color.
If the algorithm finds two prominent color, red representing 30% of the pixels weighted 1 and blue only 10% but weighted 5, blue will be selected because it has a weight of 50 vs 30 for red. This is a way to try and skew the color selection toward colors you'd rather have. Find below a few examples of such functions. This however does not guarantee anything in regards to colors not being selected. If you prefer dark colors but feed a completely white image, only white can be returned.
var rgb = new ColorFinder(myCallbackMethod).getMostProminentColor(document.getElementById('image'));

Examples of callback methods

The names should be self explanatory:
function favorHue(r,g,b) { return (Math.abs(r-g)*Math.abs(r-g) + Math.abs(r-b)*Math.abs(r-b) + Math.abs(g-b)*Math.abs(g-b))/65535*50+1; } function favorBright(r,g,b) { return r+g+b+1; } function favorDark(r,g,b) { return 768-r-g-b+1; } function excludeWhite(r,g,b) { return (r>245 && g>245 && b>245) ? 0 : 1; } function excludeBlack(r,g,b) { return (r<10 && g<10 && b<10) ? 0 : 1; } function favorBrightExcludeWhite(r,g,b) { if (r>245 && g>245 && b>245) return 0; return (r*r+g*g+b*b)/65535*20+1; }
You can see them in action in the demo.