Get The Average Color Of An Image - psColor

psColor is a tiny jQuery plugin that gets the average color of a given image by extracting and calculating the rgba data from the image using the Canvas drawImage() API.

It also provides 3 useful methods that convert the color data into Hex, RGB, and RGBa colors. Ideal for dynamically adjusting the background color of a container based on the average color of its child image.

See also:

• jQuery Plugin For Grabbing Image Color - imgcolr
• jQuery Plugin For Adaptive Image Background Color
• jQuery Plugin To Extract The Dominant Color of An Image - Primarycolor.js

How to use it:

1. Load the psColor.js library after the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/psColor.js"></script>

2. Get the average color of an image using the ps.color.getImageAverageColor method.

<img src="1.jpg">

var color = ps.color.getImageAverageColor($('img')[0]);

3. Convert the color data into a Hex string.

// => 333
var hexColor = color.toStringHex();

4. Convert the color data into a RGB string.

// => 51, 51, 51
var rgbColor = color.toStringRgb();

5. Convert the color data into a RGBa string.

// => 51, 51, 51, 0.5
var rgbColor = color.toStringRgba();

6. Possible options.

• tooDark: How dark is too dark for a pixel
• tooLight: How light is too light for a pixel
• tooAlpha: How transparent is too transparent for a pixel

var color = ps.color.getImageAverageColor($('img')[0],{
    tooDark: 0.03,
    tooLight: 0.97,
    tooAlpha: 0.1
});

---

This awesome jQuery plugin is developed by pseudosavant. For more Advanced Usages, please check the demo page or visit the official website.