Input Dominant Color From Image To Background With AdaptiveBackgrounds.js

When showcasing something on the Web, some developers often find a hard time deciding which backgrounds is most suitable for use. A good combination of the background with the right content can affect the user experience substantially. For some designers, they prefer to use some of the dominant colors inside the content itself – AdaptiveBackgrounds.js can do that for you automatically.

AdaptiveBackgrounds.js is a free jQuery plugin that helps you easily adapt the most dominating color in your content as part of the background. It was built on top of RGBaster, made by the same developer.

Recommended Reading: Practical Approach To Choosing Website Color Scheme

Basically, it’s a plugin to extract the color palette of an image to get to the dominant color. The first time the page loads, the plugin will extract the color from the image. The extracted color is then applied to the image parent. You can see how it works in this gif.

(Image Source: AdaptiveBackgrounds.js)

Getting Started

AdaptiveBackgrounds.js requires jQuery library to work. Although it’s built on top of RGBaster, you don’t need to include it anymore. You can get the plugin file from its GitHub page.

Then include all the required files to your project like so:

 <script type="text/javascript" src='js/jquery.js'></script> <script type="text/javascript" src='js/jquery.adaptive-backgrounds.js'></script>

Adapt Dominant Color

We’re going to try this tool out, and use it to extract the dominant color from this image Double Arch photograph by Kartik Ramanathan, then apply it to the parent element.

In order for the dominant color to be applied into an element, you should put the image as the child of it. Inside the img tag, give the data-adaptive-background attribute, like so, so that the script can get the color:

 <div class='wrapper'> <img id="img" src="images/double-arch.jpg" data-adaptive-background='1'> </div>

If you directly put the img on the body, then all of the body will be applied with the dominant color.

Next, call the plugin by adding this little javascript code:

 <script type="text/javascript"> $(document).ready(function(){ $.adaptiveBackground.run() }); </script>

And so we’ve got the dominant color applied to the image.

For more examples and additional settings, you can visit the AdaptiveBackgrounds.js documentation page.

Final Thought

With AdaptiveBackgrounds.js, you will get only a static color. You might want to try give your background a little more color for an attention-grabbing result. If you do, check out the AdaptiveBackgrounds.js demo page for more ideas.