AutoHue.js: Automatic Image Color Extraction for Web Banners

The article starts by describing a common web banner scenario where the container size (1910×560) does not match the original image width (1440) and the background-size is set to contain , leaving blue sidebars that need to be replaced with appropriate colors.

It then explores existing JavaScript color‑extraction libraries such as color‑thief , vibrant.js , and rgbaster.js , noting their limitations, especially with gradient images that produce excessive color values.

To address these gaps, the author defines three requirements: (1) the primary theme color (largest area), (2) the secondary theme color (second largest area), and (3) a suitable background color derived from the image edges.

The implementation plan avoids the shortcomings of existing plugins by down‑sampling the image, converting each pixel from sRGB to the perceptually uniform CIE L*a*b* space, clustering similar colors using a Lab‑distance threshold, and averaging colors within each cluster.

Key functions are provided:

export default async function colorPicker(imageSource: HTMLImageElement | string, options?: autoColorPickerOptions)

function loadImage(imageSource: HTMLImageElement | string): Promise<HTMLImageElement> { ... }

function getImageDataFromImage(img: HTMLImageElement, maxSize: number = 100): ImageData { ... }

function rgbToLab(r: number, g: number, b: number): [number, number, number] { ... }

function clusterPixelsByCondition(imageData: ImageData, condition: (x: number, y: number) => boolean, threshold: number = 10): Cluster[] { ... }

function labDistance(lab1: [number, number, number], lab2: [number, number, number]): number { ... }

After clustering the whole image, the largest clusters are selected as the primary and secondary colors. Edge colors are obtained by clustering pixels within a small margin (default 10 px) on each side (top, right, bottom, left) with a tighter threshold.

The final result object contains primaryColor , secondaryColor , and a backgroundColor map with the four edge colors.

Installation and usage are straightforward:

pnpm i autohue.js

import autohue from 'autohue.js'
autohue(url, { threshold: { primary: 10, left: 1, bottom: 12 }, maxSize: 50 })
  .then(result => { console.log(result) })
  .catch(err => console.error(err))

Various visual examples demonstrate how the extracted colors can create seamless gradients, solid backgrounds, or subtle edge blends, eliminating visible borders in banner images.

The project is open‑source on GitHub and published to npm, with reference links to color science articles, Lab‑space explanations, and clustering algorithms.