Get The Average Color Of An Image - psColor

File Size: 4.99 KB
Views Total: 1139
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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.