Change Background Color Based On Image Color - jQuery fillcolor

Just another jQuery plugin that dynamically changes the background color based on the average color got from a specific image within your container.

See also:

• jQuery Plugin For Grabbing Image Color - imgcolr
• jQuery Plugin For Colorize Content Based On Image - Chameleon.js
• jQuery Plugin To Extract The Dominant Color of An Image - Primarycolor.js
• Image Color Palette Generating Plugin - Color Thief
• jQuery Plugin For Adaptive Image Background Color

How to use it:

1. Include the latest version of jQuery library and the jQuery fillcolor plugin's script on the html page.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.fillcolor.js"></script>

2. Wrap the image into a container as this:

<div class="example js-fillcolor">
  <img width="200" height="200" src="https://unsplash.it/200/200/?image=10">
</div>
<div class="example js-fillcolor">
  <img width="200" height="200" src="https://unsplash.it/200/200/?image=20">
</div>
<div class="example js-fillcolor">
  <img width="200" height="200" src="https://unsplash.it/200/200/?image=100">
</div>
<div class="example js-fillcolor">
  <img width="200" height="200" src="https://unsplash.it/200/200/?image=99">
</div>
<div class="example js-fillcolor">
  <img width="200" height="200" src="https://unsplash.it/200/200/?image=113">
</div>
<div class="example js-fillcolor">
  <img width="200" height="200" src="https://unsplash.it/200/200/?image=155">
</div>

3. Just call the function fillColor() on the container element and the plugin will do the rest.

$(function () {
  $('.js-fillcolor').fillColor();
});

---

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