Skip to content
Grab the color palette from an image using just Javascript. Works in the browser and in Node.
JavaScript HTML CSS
Branch: master
Clone or download

README.md

Color Thief

A script for grabbing the color palette from an image. Works in browser and in Node.

See a Demo | Read more on my blog

How to use Color Thief in Node

Install and import

Important: The name of the package is colorthief, not color-thief.

npm i --save colorthief
const ColorThief = require('colorthief');

Get colors

Both getColor and getPalette return a Promise when used in Node.

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

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

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

How to use Color Thief in the Browser

Install

Important: The name of the package is colorthief, not color-thief.

npm i --save colorthief

Import and use as a global variable

<script src="node_modules/colorthief/dist/color-thief.umd.js"></script>
<script>
    const colorThief = new ColorThief();
    const color = colorThief.getColor(document.querySelector('img'));
</script>

Import and use as an ES6 module

index.html

<script type="module" src="app.js"></script>

app.js

import ColorThief from './node_modules/colorthief/dist/color-thief.mjs'

const colorThief = new ColorThief();
const result = colorThief.getColor(document.querySelector('img'));

Import and use with RequireJS

The /dist/color-thief.umd.js file uses the UMD (Universal Module Definition) format. This includes RequireJS AMD support.

API

Note: Both getColor and getPalette return a Promise when used in Node.

Method Return Description
getColor(image [, quality]) [Number, Number, Number] Gets the dominant color from the image. Color is returned as an array of three integers representing red, green, and blue values.
getPalette(image [, colorCount, quality] [[Number, Number, Number], ...] 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.
You can’t perform that action at this time.