Dominant color

Get dominant color from images using only JavaScript

Installation

npm i @rtcoder/dominant-color

Usage

import {getDominantColor} from "@rtcoder/dominant-color";

const img = document.querySelector('img');

getDominantColor(img, {
    downScaleFactor: 1,
    skipPixels: 0,
    colorsPaletteLength: 5,
    paletteWithCountOfOccurrences: false,
    colorFormat: 'rgb',
    callback: (color, palette) => {
       // your code here
    }
});

Config options

Name	Type	Default value	Description
downScaleFactor	number	1	factor of scale down of image, recommended to use for many large images
skipPixels	number	0	when larger than 0, skips every n pixels of while determine dominant color, recommended to use for large images
colorsPaletteLength	number	5	length of returned palette of colors
paletteWithCountOfOccurrences	boolean	false	determines whether to return colors with the number of occurrences
colorFormat	string	‘rgb’	defines the format of the returned colors, available values are ‘rgb’, ‘hsl’ and ‘hex’
callback	function	[empty function]	callback function

Interfaces

type ColorFormat = 'rgb' | 'hsl' | 'hex';

interface PrimaryColor {
  color: string;
  count: number;
}

interface DominantColorOptions {
  downScaleFactor: number;
  skipPixels: number;
  colorsPaletteLength: number;
  paletteWithCountOfOccurrences: boolean;
  colorFormat: ColorFormat;
  callback: DominantColorCallback;
}

type DominantColorCallback = (dominant: string, colorsPalette: (string[]) | (PrimaryColor[])) => void;

function getDominantColor(element: HTMLImageElement, options: Partial<DominantColorOptions>): void