ColourFinder
ColourFinder is a Javascript library that extracts the dominant colour palette from an image.
It works by identifying the colour of each individual pixel that makes up an image, and returns a list of the colours most frequently seen in the image.
See examples Download ColourFinder.js View on GithubExamples
Here are some examples of ColourFinder in action. Here it computes the average colour, dominant colour, and colour palette for each image.
Usage
Include Prototype.js and ColourFinder, then use one (or all) of these functions:
Get the dominant colour in an image
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1/prototype.js"></script>
<script src="ColourFinder.js"></script>
<script>
// The image we'll be finding the palette for
var image = $("demo");
// Create a new instance of ColourFinder
var finder = new ColourFinder();
// Find the dominant colour in the image. Returns a single hex code, i.e: "0069ff".
var dominant = finder.getDominant(image);
</script>Get the average colour of an image
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1/prototype.js"></script>
<script src="ColourFinder.js"></script>
<script>
// The image we'll be finding the palette for
var image = $("demo");
// Create a new instance of ColourFinder
var finder = new ColourFinder();
// Find the average colour of the image. Returns a single hex code, i.e. "00fa30".
var average = finder.getAverage(image);
</script>Get the colour palette of an image
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1/prototype.js"></script>
<script src="ColourFinder.js"></script>
<script>
// The image we'll be finding the palette for
var image = $("demo");
// Create a new instance of ColourFinder
var finder = new ColourFinder();
// Find the colour palette of the image. Returns an array of
// hex codes. Returns 10 colours by default.
// ["0069ff", "0069aa", "20ba20", etc]
var palette = finder.getPalette(image, size);
</script>Notes & caveats
There are a few things to know about this library:
- ColourFinder internally downsamples images to 1024 pixels wide to reduce processing time.
- ColourFinder is biased towards saturated colours. It gives them a slightly higher weighting, as they are perceived to be more dominant than washed out colours.
Contact
Found a bug? Got a question? Or just want to say hello? Find me on Twitter as @craigmunro.