There are multiples ways to install Color Thief when using it in the browser:

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:

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.

quality is an optional argument that must be an Integer of value 1 or greater, and defaults to 10. The number determines how many pixels are skipped before the next one is sampled. We rarely need to sample every single pixel in the image to get good results. The bigger the number, the faster a value will be returned.

image - When called in the browser, this argument expects an HTML image element, not a URL. When run in Node, this argument expects a path to the image.

Gets the dominant color from the image. Color is returned as an array of three integers representing red, green, and blue values.

FAQ

All questions are about the usage of Color Thief in the browser, not Node.

Do I have to wait for the image to load?

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 getColor() or getPalette() .

How do I test the script locally?

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 npx command:

Now you can visit http://localhost:8080 to view your server.

Does it work if the image is hosted on another domain?

A) If you manage the server hosting the image...

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:

CORS policy on the server. Is the server hosting the image properly configured? Make sure the requesting domain is whitelisted in the access-control-allow-origin header, or the server hosting the image has an open policy: access-control-allow-origin: * . crossorigin attr. The HTML image element must be given a crossorigin attribute. If you're dynamically adding the image element, you can do the following:

B) If you don't have access to the server hosting the image...

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.

How do I get hex values?