jQuery Plugin To Extract The Dominant Color of An Image - Primarycolor.js

Primarycolor.js is a lightweight jQuery plugin that extracts the dominant color (RGB) from an image using HTML5 canvas. A callback event provides the computed dominant color values, enabling the RGB result to be applied to any HTML element. The typical setup loads jQuery and the Primarycolor.js script at the bottom of the document. An image is placed inside a container, then the plugin is called on the image. The callback receives the dominant color and an additional colors parameter, and the example applies the dominant RGB value to the parent wrapper’s background-color using an rgb(...) CSS string. Changelog dates are listed, and advanced usage is referenced via a demo page or official website.

"Primarycolor.js is a super light jQuery plugin used to extract the dominant color (RGB) of an image by using HTML5 canvas. Callback event is supported that allows you to apply the RGB color to any Html element (e.g. the parent element's background-color)"

"Load the JQuery library and the Primarycolor.js script at the bottom of your document. <script src="/path/to/cdn/jquery.min.js"></script> <script src="jquery.primarycolor.js"></script>"

"Insert an image into a container. <section> <img src="demo.jpg" class="demo"> </section>"

"The Javascript to grab the the dominant color of your demo.jpg and apply the color to its parent's background-color property. $(function () { $('img').primaryColor(function (color, colors) { $(this) .parents('.wrapper') .css('background-color', 'rgb(' + color + ')') }) })"

Read at jQuery Script