Color Thiefby Lokesh Dhakar
Works in the browser and in Node.
The Color Thief package includes multiple distribution files to support different environments and build processes. Here is the list of all the files in the
/dist folder and what formats they support:
$ npm i --save colorthief
getPalette()methods return a Promise when used in Node.
There are multiples ways to install Color Thief when using it in the browser:
$ npm i --save colorthief
/dist/color-thief.umd.jsfile uses the UMD (Universal Module Definition) format. This includes RequireJS AMD support.
All questions are about the usage of Color Thief in the browser, not Node.
Yes. If you see an error that reads:
Cannot read property '0' of null, it is likely that the image had not finished loading when you passed it to
If you are testing the script locally in a web browser, you might see the following error:
Access to script at 'file://...' from origin 'null' has been blocked by CORS policy. This is because the browser restricts direct access to the filesystem.
To get around this, you can set up a minimal server to host the files. One option is http-server. To run this on demand without installing it as a proejct dependency, you can use the
Now you can visit http://localhost:8080 to view your server.
Yes. If you are seeing an error that reads:
The canvas has been tainted by cross-origin data., then you are running into a cross-origin resouce sharing (CORS) issue. Check the following two items:
If you're dynamically adding the image element, you can do the following:
You can use a proxy server that pulls down the image and returns it with a more liberal CORS policy. Below you can see an example of this with an image that is proxied through a public Google server. If you don't own the proxy server, just know, that you are at their mercy. But this is handy in a pinch for testing.
The ColorThief methods return colors as an array of three integers representing red, green, and blue values. If you are looking to use the output in CSS, you can do that using the rgb format:
color: rgb(102, 51, 153). If you do need to convert to hex, you can use the following function:
Follow the steps below to get help. Make sure you have read the documentation on this page first.
color-thieftag to make it easier to find.
Color Thief is licensed under the MIT License.
Github provides a nice summary of the license:
"A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code."