# briangonzalez/jquery.adaptive-backgrounds.js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/briangonzalez-jquery-adaptive-backgrounds-js).**

6,542 stars · 448 forks · JavaScript

## Links

- GitHub: https://github.com/briangonzalez/jquery.adaptive-backgrounds.js
- Homepage: http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/
- awesome-repositories: https://awesome-repositories.com/repository/briangonzalez-jquery-adaptive-backgrounds-js.md

## Description

This is a jQuery plugin that extracts the dominant color from an image or CSS background image and applies it as a background color on a target element. It uses canvas-based pixel analysis with an RGB quantization algorithm to identify the most prominent color, then injects that color as an inline CSS background-color style.

The plugin automatically normalizes text contrast by calculating the relative luminance of the extracted color and toggling between dark and light text to maintain readability. It includes an image preloading pipeline to ensure pixel data is available synchronously from the canvas, and fires custom events when colors are extracted, providing the color and palette data for further processing.

Configuration options allow specifying which images to process, which parent element receives the color, and which colors to exclude from extraction. A user-supplied callback function can be executed for each image after its dominant color has been applied.

## Tags

### Web Development

- [jQuery Plugins](https://awesome-repositories.com/f/web-development/jquery-plugins.md) — Wraps core functionality as a jQuery plugin, exposing methods via the jQuery prototype for DOM manipulation and event handling.
- [Color Extraction Plugins](https://awesome-repositories.com/f/web-development/jquery-plugins/color-extraction-plugins.md) — Extracts the dominant color from an image and applies it as a background with automatic text contrast adjustment.

### Graphics & Multimedia

- [RGB Quantizers](https://awesome-repositories.com/f/graphics-multimedia/color-quantization/rgb-quantizers.md) — Reduces the full color palette to a manageable set by quantizing RGB values into discrete bins for dominant color calculation.

### User Interface & Experience

- [Background Fill Colors](https://awesome-repositories.com/f/user-interface-experience/background-fill-colors.md) — Applies the extracted dominant color as an inline CSS background-color style on target elements.
- [CSS Background Image Analyzers](https://awesome-repositories.com/f/user-interface-experience/background-fill-colors/css-background-image-analyzers.md) — Analyzes a CSS background image to extract its dominant color and sets it as the element's own background.
- [CSS Background Image Extractors](https://awesome-repositories.com/f/user-interface-experience/background-fill-colors/css-background-image-extractors.md) — Extracts the dominant color from a CSS background image and applies it as the element's own background color. ([source](https://cdn.jsdelivr.net/gh/briangonzalez/jquery.adaptive-backgrounds.js@master/README.md))
- [Image-Derived Backgrounds](https://awesome-repositories.com/f/user-interface-experience/background-fill-colors/image-derived-backgrounds.md) — Automatically applies a background color to an element based on the colors in its CSS background image.
- [Canvas-Based Extractors](https://awesome-repositories.com/f/user-interface-experience/color-palette-generators/image-based-color-generators/canvas-based-extractors.md) — Extracts dominant colors by reading pixel data from an off-screen canvas element using getImageData.
- [Image Color Extractors](https://awesome-repositories.com/f/user-interface-experience/color-palette-generators/image-color-extractors.md) — Extracts the dominant color of an image and applies it as the background color of the image's parent element. ([source](https://cdn.jsdelivr.net/gh/briangonzalez/jquery.adaptive-backgrounds.js@master/README.md))
- [Parent Element Stylers](https://awesome-repositories.com/f/user-interface-experience/color-palette-generators/image-color-extractors/parent-element-stylers.md) — Detects the most prominent color in an image and uses it to dynamically style parent elements for visual harmony.
- [Luminance-Based Text Adjusters](https://awesome-repositories.com/f/user-interface-experience/color-systems/color-rendering-adjustments/luminance-based-text-adjusters.md) — Adjusts text color to maintain readability when the extracted background color is too dark or too light. ([source](https://cdn.jsdelivr.net/gh/briangonzalez/jquery.adaptive-backgrounds.js@master/README.md))
- [Background-Aware Text Adjusters](https://awesome-repositories.com/f/user-interface-experience/contrast-validators/automatic-contrast-adjusters/background-aware-text-adjusters.md) — Adjusts text color to ensure readability when the background color is dynamically set from an image.
- [Luminance-Based Contrast Adjusters](https://awesome-repositories.com/f/user-interface-experience/contrast-validators/automatic-contrast-adjusters/luminance-based-contrast-adjusters.md) — Adjusts text color by calculating relative luminance from extracted RGB values to maintain readability.

### Data & Databases

- [Color](https://awesome-repositories.com/f/data-databases/text-processing-utilities/text-extraction/extraction-configurations/color.md) — Configures which images to process, which parent element receives the color, and which colors to exclude from extraction. ([source](https://cdn.jsdelivr.net/gh/briangonzalez/jquery.adaptive-backgrounds.js@master/README.md))