A script for grabbing the color palette from an image. Works in browser and in Node.
See a Demo | Read more on my blog
Important: The name of the package is colorthief, not color-thief.
npm i --save colorthiefconst ColorThief = require('colorthief');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) })Important: The name of the package is colorthief, not color-thief.
npm i --save colorthief<script src="node_modules/colorthief/dist/color-thief.umd.js"></script>
<script>
const colorThief = new ColorThief();
const color = colorThief.getColor(document.querySelector('img'));
</script>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'));The /dist/color-thief.umd.js file uses the UMD (Universal Module Definition) format. This includes RequireJS AMD support.
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. |