Repolode
提交项目
lokesh

lokesh/color-thief

一个纯 JavaScript 库，可在浏览器和 Node.js 中从图片提取主色和调色板。

在 GitHub 查看官网
Star
13,658
Fork
1,310
未关闭 Issue
0
最近提交
3个月前

这是什么？

Color Thief 可以从图片中提取主色、多色调色板，或 Vibrant、Muted、DarkVibrant、LightMuted 等语义化色板。输入可以是 img、canvas、视频帧，在 Node 中也可以是文件路径或 Buffer。返回的 Color 对象提供 hex、RGB、HSL、OKLCH、CSS 等格式转换，并能给出推荐文字颜色和 WCAG 对比度。

浏览器和 Node.js 使用同一套 API，浏览器端提供同步函数，两端都提供异步函数。它还支持渐进式提取、通过 observe() 实时监听视频或 canvas 的颜色变化、用比例坐标指定采样区域，以及对广色域（Display P3）图片的输出。提取过程可用 AbortSignal 取消，库本身没有运行时依赖，并附带 TypeScript 类型定义。

配套的命令行工具 colorthief-cli 可以以 ANSI 色块、JSON 或 CSS 自定义属性的形式输出结果。在 Node 中，图片解码依赖 sharp。

核心功能

  • 01从图片中提取主色、多色调色板或语义化色板。
  • 02浏览器和 Node.js 使用同一套 API，并提供同步与异步两种调用方式。
  • 03通过 observe() 实时监听 video、canvas 或 img 元素并更新调色板。
  • 04使用与分辨率无关的比例坐标，只对图片的局部区域采样。
  • 05Color 对象支持 hex、RGB、HSL、OKLCH、CSS 输出，并提供 WCAG 对比度。
  • 06附带命令行工具，可输出 ANSI 色块、JSON 或 CSS 变量。

适用场景

  • 在网页中根据商品图或专辑封面自动选取背景色或强调色。
  • 制作随视频播放变化的环境光或渐变背景效果。
  • 根据图片的主色检查文字对比度，满足无障碍要求。
  • 在构建脚本中批量从图片生成 CSS 颜色变量。

标签

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

常见问题

color-thief 是什么？
一个纯 JavaScript 库，可在浏览器和 Node.js 中从图片提取主色和调色板。 Color Thief 可以从图片中提取主色、多色调色板，或 Vibrant、Muted、DarkVibrant、LightMuted 等语义化色板。输入可以是 img、canvas、视频帧，在 Node 中也可以是文件路径或 Buffer。返回的 Color 对象提供 hex、RGB、HSL、OKLCH、CSS 等格式转换，并能给出推荐文字颜色和 WCAG 对比度。
color-thief 可以免费使用吗？用的什么许可证？
color-thief 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
color-thief 还在维护吗？
半年内有更新。color-thief 最近一次提交是在 2026年8月3日。
color-thief 适合用来做什么？
在网页中根据商品图或专辑封面自动选取背景色或强调色。 制作随视频播放变化的环境光或渐变背景效果。 根据图片的主色检查文字对比度，满足无障碍要求。 在构建脚本中批量从图片生成 CSS 颜色变量。
在哪里获取 color-thief？
源代码和安装说明在 GitHub 上：https://github.com/lokesh/color-thief

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目