Get Images’ Dominant Color and Palette Using Color Thief

Use the web demo or Node.js CLI for bulk conversion

An image’s dominant color and palette is extracted using ‘Color Thief’

Color Thief is a JavaScript library that grabs color palette (10 colors) and a single dominant color from an image. It provides a web demo where a user image can be dragged for conversion. Scroll down from the Examples section.

‘Try it yourself’ section provided in ‘Color Thief’ website

To convert multiple files in bulk programmatically, use the Node.js version of Color Thief. Install colorthief using npm i — save colorthief as guided in the Getting Started section. Note that the color-thief is a forked version.

{
  "dependencies": {
    "colorthief": "^2.3.2"
  }
}

Reference the following Gist. The default preference assumes that all images are contained in the images folder, and they all have the jpg extension.

Since Color Thief returns color values in [r, g, b] format, rgbToHex utility function is used. getColor API is used to get the dominant color, and it can be replaced with getPalette. Returned HEX values are logged in the console.

Dominant color can be used to fill a placeholder box until the actual image is loaded from the internet. Reference this article from manu.ninja website.

Images and their dominant colors (Source)