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

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)

See also:

• jQuery Plugin For Grabbing Image Color - imgcolr
• Image Color Palette Generating Plugin - Color Thief
• jQuery Plugin For Adaptive Image Background Color
• Create Stunning Image Backgrounds With jQuery backgroundify.js

How to use it:

1. 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>

2. Insert an image into a container.

<section>
  <img src="demo.jpg" class="demo">
</section>

3. The Javascript to grab the the dominant color of your demo.jpg and apply the color to its parent's background-color property.

• color: Primary color
• colors: Top 5 colors

$(function () {
  $('img').primaryColor(function (color, colors) {
    $(this)
      .parents('.wrapper')
      .css('background-color', 'rgb(' + color + ')')
  })
})

Changelog:

2020-10-15

• v1.4.1

2020-10-14

• Bugfix

2020-10-09

• Rewritten in Typescript

---

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