Get Images’ Dominant Color and Palette Using Color Thief
Use the web demo or Node.js CLI for bulk conversion
To convert multiple files in bulk programmatically, use the Node.js version of Color Thief. Install
npm i — save colorthief as guided in the Getting Started section. Note that the
color-thief is a forked version.
Reference the following Gist. The default preference assumes that all images are contained in the
images folder, and they all have the
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