color-thief
Grab the color palette from an image using just Javascript. Works in the browser and in Node.
A dependency-free JavaScript library that extracts the dominant color or a full palette from any image, working in both browsers and Node.js with no external dependencies.
Color Thief is a JavaScript library that analyzes an image and extracts its most prominent color or a palette of multiple colors. It works in web browsers and in Node.js server environments using the same API. The project is written in TypeScript, which means it ships with complete type definitions, and it has no external runtime dependencies.
The core use cases are straightforward. You pass an image element, a canvas, a video, a file path, or a raw buffer to the library, and it returns color information in several formats: a hex code like #e84393, an RGB object, an HSL value, or a CSS-ready string. You can request either the single dominant color or a full palette of up to 20 colors. The library also provides named swatches labeled Vibrant, Muted, DarkVibrant, DarkMuted, LightVibrant, and LightMuted, which describe the role a color plays in the image rather than just its raw value.
A few additional features stand out. The library can run color extraction off the main browser thread using a Web Worker, which prevents the calculation from making the page feel slow. It also supports progressive extraction, a three-pass process that delivers a rough palette almost immediately and refines it in subsequent passes. A live observation mode watches a video or canvas element and emits updated palettes as the content changes, which is useful for reactive backgrounds or ambient lighting effects.
Each color object carries contrast ratio information against white and black backgrounds, following web accessibility guidelines, and includes a recommended text color for readability. A command-line tool is also included, so you can extract colors from image files directly in a terminal and receive output as JSON, CSS custom properties, or colored terminal swatches.
Installation is via npm. The library can also be loaded directly from a CDN for browser use without any build step.
Where it fits
- Extract the dominant color from a product image to automatically set the background or accent color of its card on a web page
- Generate a color palette from a user-uploaded photo to create a custom theme for their profile or workspace
- Build a reactive ambient background effect by watching a video element and updating a glow color as the scene changes
- Use the CLI tool to extract colors from image files and output CSS custom properties for a design token pipeline