Skip to content
🎨 A simple library for extracting dominant colors from images.
TypeScript JavaScript
Branch: master
Clone or download
Latest commit c47f0d9 Feb 8, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.semaphore v2 (#40) Nov 29, 2018
extra readme Nov 29, 2018
src Fix CORS test - Issue #58 Feb 9, 2019
tests Promise rejects = error() and test case (#45) Dec 1, 2018
.gitattributes linguist-documentation Oct 14, 2016
.gitignore git ignore package-lock.json Feb 2, 2019 abdellah hariti as maintainer Feb 2, 2019
jest.config.js jest mods Feb 2, 2019
package-lock.json Fix CORS test - Issue #58 Feb 9, 2019
package.json Bump version to 2.1.1 Feb 9, 2019
tsconfig.json v2 (#40) Nov 29, 2018
tslint.json v2 (#40) Nov 29, 2018


A dead simple, zero-dependency, promise-based javascript library for extracting the dominant color(s) from an image (in the browser).

npm version

πŸ‘‰ Version 2 was written from the ground up with a clean and modern API, a robust test suite, and is fully written in Typescript.


npm install --save rgbaster


This library exports a default function which returns a promise resolving to a sorted array with the most dominant color at index 0, secondary at index 1, so on and so forth.

  { color: 'rgb(0,0,255)', count: 86  },
  { color: 'rgb(9,18,42)', count: 32  },
  { color: 'rgb(120,8,202)', count: 3  },
import analyze from 'rgbaster'

const result = await analyze('/2px-blue-and-1px-red-image.png') // also supports base64 encoded image strings

console.log(`The dominant color is ${result[0].color} with ${result[0].count} occurrence(s)`)
// => The  dominant color is rgb(0,0,255) with 2 occurrence(s)

console.log(`The secondary color is ${result[1].color} with ${result[1].count} occurrence(s)`)
// => The  secondary color is rgb(255,0,0) with 1 occurrence(s)

Configuration options

You may pass an optional second parameter, an object, with the following options:


An array of colors to ignore (in the form of rgb) when counting colors.

const result = await analyze('/image.png', { ignore: [ 'rgb(255,255,255)', 'rgb(0,0,0)' ] })


In order to achieve greater speed, you can have rgbaster scale down the image we use internally prior to analysis, thus decreasing accuracy.

const result = await analyze('/image.png', { scale: 0.6 })

Browser support

rgbaster depends on the following browser functionality:



rgbaster was created to modularize adaptive backgrounds. Check it out.



You can’t perform that action at this time.