1. Products
  2.   Image
  3.   JavaScript
  4.   Color Thief
 
  

Open Source JavaScript Library for Image Processing

JavaScript API for grabbing color palette from images.

What is Color Thief?

Color Thief is a very simple lightweight image processing library that enables software developers to grab color from images using JavaScript. It is a pure JavaScript library that can work on Node as well as in-browser without any external dependencies. The API Gets the dominant color from the image. Color is returned as an array of three integers representing red, green, and blue values. While working in the browser, you need to use an HTML image for processing and while using the Node you need to use the URL of the image.

The Color Thief package includes multiple distribution files to support different environments and build processes. color-thief.js is the main file for processing the images, color-thief.mjs is used for modern browsers as well as Webpack and Rollup, and color-thief.umd.js is used for simple script tag loading.

Previous Next

Getting Started with Color Thief

The recommended way to install Color Thief via NPM. Please use the following command to install it.

Install Color Thief via NPM

 npm i --save colorthief

Get Colors from Image via Free JavaScript API

The open-source Color Thief library allows JavaScript developers to extract colors from the images programmatically. In order to get the dominant color from the image, the API provides getColor() method. The method gets the dominant color from the image. Color is returned as an array of three integers representing red, green, and blue (RGB) values. By using the following two lines of code, you can easily get the dominant color from the image.

Get Dominant Color from Image

  1. Load image
  2. Get color

Extract color from the image in Node.js

const img = resolve(process.cwd(), 'rainbow.png');

ColorThief.getColor(img)
.then(color => { console.log(color) })
.catch(err => { console.log(err) })

Get Color Platte from Image via Free JavaScript API

Using the API, you can also get a color palette from the images In order to get a color palette from the image, the API provides getPalette() method. The method gets a palette from the image by clustering similar colors. The palette is returned as an array containing colors, each color itself an array of three integers. By using the following two lines of code, you can easily get color platte from the image.

Get Color Platte from Image

  1. Load image
  2. Get color platte

Extract color platte image in Node.js

const img = resolve(process.cwd(), 'rainbow.png');

ColorThief.getPalette(img, 5)
.then(palette => { console.log(palette) })
.catch(err => { console.log(err) })
 English