Repolode
Submit
lokesh

lokesh/color-thief

A JavaScript library that extracts dominant colors and color palettes from images in both the browser and Node.js.

View on GitHubWebsite
Stars
13,658
Forks
1,310
Open issues
0
Last commit
3 months ago

What is it?

Color Thief takes an image (an img, canvas, video frame, or a file path or Buffer in Node) and returns its dominant color, a palette of several colors, or semantic swatches such as Vibrant, Muted, DarkVibrant and LightMuted. Each result is a Color object with helpers for hex, RGB, HSL, OKLCH and CSS output, plus text color recommendations and WCAG contrast ratios.

The same API works in the browser and in Node.js, with synchronous functions for browser use and async functions for both environments. It also offers progressive palette extraction, live extraction from video or canvas through observe(), region sampling via fractional coordinates, and Display P3 output for wide-gamut images. Extraction can be cancelled with an AbortSignal, and the library has no runtime dependencies. TypeScript types are included.

A companion CLI, colorthief-cli, prints colors as ANSI swatches, JSON, or CSS custom properties. In Node, image decoding relies on sharp.

Key features

  • 01Extracts a dominant color, a multi-color palette, or semantic swatches from an image.
  • 02Same API in the browser and Node.js, with sync and async variants.
  • 03Live palette updates from video, canvas, or img elements via observe().
  • 04Samples a sub-region of an image using resolution-independent fractional coordinates.
  • 05Returns Color objects with hex, RGB, HSL, OKLCH, and CSS output plus WCAG contrast ratios.
  • 06Includes a CLI that outputs ANSI swatches, JSON, or CSS variables.

Use cases

  • Picking a background or accent color that matches a product or album photo on a web page.
  • Building ambient lighting or gradient effects that follow a playing video.
  • Checking text contrast against an image's dominant colors for accessibility.
  • Batch-generating CSS color variables from images in a build script.

Topics

#color#image-processing#palette#javascript#typescript#nodejs#browser

FAQ

What is color-thief?
A JavaScript library that extracts dominant colors and color palettes from images in both the browser and Node.js. Color Thief takes an image (an img, canvas, video frame, or a file path or Buffer in Node) and returns its dominant color, a palette of several colors, or semantic swatches such as Vibrant, Muted, DarkVibrant and LightMuted. Each result is a Color object with helpers for hex, RGB, HSL, OKLCH and CSS output, plus text color recommendations and WCAG contrast ratios.
Is color-thief free to use? What license does it have?
color-thief is open source under the MIT license. Check the license terms before using it in commercial products.
Is color-thief still maintained?
Updated within 6 months. The last commit to color-thief was on Aug 3, 2026.
What can I use color-thief for?
Picking a background or accent color that matches a product or album photo on a web page. Building ambient lighting or gradient effects that follow a playing video. Checking text contrast against an image's dominant colors for accessibility. Batch-generating CSS color variables from images in a build script.
Where can I get color-thief?
The source code and installation instructions are on GitHub: https://github.com/lokesh/color-thief

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects