extract-colors 是最轻量且兼容性好的 JS 主色提取库，需图片加载完成、处理跨域问题，返回颜色设为 CSS 变量并配合过渡或服务端预生成避免闪屏。
用 extract-colors 库在 JS 中取图主色
图片主色调提取不是 CSS 能直接干的事，得靠 JS 库读取像素数据。目前最轻量、兼容性好、支持 Web Worker 避免卡顿的是 extract-colors（注意不是 node-vibrant 或 color-thief，后两者在现代打包环境里容易出 require is not defined 错误）。
安装后直接用：
import extractColors from 'extract-colors';
关键点：必须等图片加载完成再取色，否则拿到的是空画布；跨域图片需服务端加 CORS 头或转 base64 内联。
-
extractColors默认返回最多 5 种颜色，按显著性排序，[0]就是主色 - 支持传
{ quality: 10 }控制采样精度（值越小越快但可能不准） - 不支持 SVG 元素直接传入，得先转成
<img alt="CSS如何提取图片主色调作为背景_结合JS取色库后再将颜色值传给CSS变量" >或 canvas 绘制后的HTMLImageElement
把 JS 取到的颜色设为 CSS 自定义变量
取到颜色后不能硬写进 style 标签或内联样式——那样无法复用、难维护。正确做法是挂到 :root 或某个容器元素上，用 CSS 变量承接。
立即学习“前端免费学习笔记（深入）”；
示例代码：
const color = '#4a6fa5'; // 从 extractColors 得到
document.documentElement.style.setProperty('--primary-bg', color);
然后在 CSS 里直接用：
.card { background-color: var(--primary-bg); }
- 别用
document.body.style.setProperty—— body 不一定是最外层作用域，:root更稳 - 颜色值务必是标准格式（
#rrggbb、rgb()、hsl()），extract-colors返回的 hex 带#，可直接用 - 如果要支持暗色模式，可以同时设
--primary-bg-dark，再用@media (prefers-color-scheme: dark)切换
避免「取色闪屏」和「样式未生效」
页面先渲染、JS 后取色，会导致背景色从默认白/灰突然跳变成主色，肉眼可见闪烁。这不是 CSS 问题，是执行时机没控住。
解决方案只有两个：
- 给容器加
transition: background-color 0.3s ease，让变色柔和些（治标） - 更彻底的做法：服务端预生成主色，或首屏图片用
data-color属性硬编码主色，JS 初始化时优先读这个属性，取色失败再 fallback（治本） - 检查是否在
DOMContentLoaded之前就调用了取色逻辑 —— 此时 DOM 还没就绪，document.documentElement可能不可写
为什么不用 CSS background-image: paint(...)？
有人会想用 CSS Houdini 的 paint worklet 在 CSS 层直接分析图片——理论上可行，但现实很骨感：
- 目前 Chrome 仅支持，Firefox / Safari 完全不支持
registerPaint - worklet 无法访问 DOM 或
Image对象，只能靠inputProperties传入已知颜色，绕不开 JS 预处理 - 调试极其困难，报错信息藏在 DevTools 的
Worklets面板里，且不支持断点
所以现阶段，JS 提取 + CSS 变量仍是唯一靠谱路径。真正麻烦的从来不是怎么传值，而是图片加载时机、跨域限制、fallback 策略这三件事没对齐。
