autohue.js 自动提取图片主题色和边缘色

工具库 |

你有没有遇到过这种场景：

Banner 图放到网站上，却发现两边被背景色硬撑开，看起来非常违和。

如果每张图片都要手动挑背景色，那也太麻烦了。

有没有办法，让图片和背景自动融合？

今天介绍的库 —— autohue.js，就能帮你做到。

1. 它是什么？

autohue.js  是一个自动提取图片主题色 & 边缘色的工具。

它的核心目标：

  • 从图片中提取  主题色（面积最大）
  • 提取  次主题色（面积第二大）
  • 获取图片  上下左右的边缘色（方便生成背景渐变）

这样，图片在网页或 App 中就能和背景“无缝衔接”，看起来更自然。

📷 配图建议：一张 Banner 图左右留白，autohue 自动生成背景渐变填充，几乎看不出边界。

2. 为什么需要它？

很多已有的取色库（如  color-thief、vibrant.js、rgbaster.js）能很好地提取主色，但有几个问题：

  • 没有考虑  实际的页面应用场景（尤其是轮播 Banner）
  • 渐变图片容易提取出成千上万个颜色，精度高但不实用
  • 提取出的主色和边缘色不一定契合，填充背景时容易“穿帮”

而  autohue.js  针对这些痛点做了优化：

  • 自动聚类，提取有代表性的主题色
  • 边缘色单独分析，适合做渐变背景
  • 降采样处理，性能与准确度平衡

3. 使用场景

  • 网站轮播 Banner：不同风格的图放一起，背景自动融合
  • 电商商品展示：图片外的留白区域自动延伸渐变
  • 视频 / 音乐播放器封面：背景和专辑图颜色统一，沉浸感更强
  • 个性化主题生成：根据用户上传的图片生成应用主题色

4. 快速上手

安装

pnpm i autohue.js

使用

import autohue from "autohue.js";

autohue(url, {
  threshold: {
    primary: 10,
    left: 1,
    bottom: 12,
  },
  maxSize: 50,
})
  .then((result) => {
    console.log("主题色", result.primaryColor);
    console.log("次主题色", result.secondaryColor);
    console.log("左边缘色", result.backgroundColor.left);
    console.log("右边缘色", result.backgroundColor.right);

    // 自动生成渐变背景
    const bg = `linear-gradient(to right, ${result.backgroundColor.left}, ${result.backgroundColor.right})`;
    document.body.style.background = bg;
  })
  .catch((err) => console.error(err));

运行后，背景会自动融合图片边缘色，效果非常自然。

Image

5. 参数说明

  • threshold：簇阈值，用于控制相近色的合并程度（默认 10，推荐 8~12）

  • 也可单独指定  { left, right, top, bottom }  来调整边缘取色精度

  • maxSize：降采样尺寸（默认 100），数值越小处理越快，但精度降低

6. 优势亮点

  • 针对场景优化：不仅取色，还考虑背景填充的实际使用场景
  • 边缘取色支持：完美解决图片左右留白问题
  • 渐变背景友好：直接生成 CSS 渐变色
  • 性能可控：降采样平衡速度与精度

对比其他库：

工具 功能侧重点 背景融合支持 渐变适配
color-thief 提取主色、调色板 ❌ 否 ❌ 否
vibrant.js 提取突出色彩 ❌ 否 ❌ 否
rgbaster.js 提取主色、次色 ❌ 否 ❌ 否
autohue.js 主题色 + 边缘色 ✅ 是 ✅ 是

7. 使用限制

  • 对于复杂品牌设计，仍需要人工挑选搭配
  • 大图处理时可能有性能消耗，建议调整  maxSize
  • 渐变突变边缘场景，可能需要 CSS 蒙层辅助

8. 总结

autohue.js  不是一个单纯的“取色工具”，而是一个面向实际 UI 场景的自动化解决方案。

它能帮你把图片的主题色、次主题色、边缘色全部提取出来，让背景和图片自然衔接，免去了“每张图都手动挑背景色”的烦恼。

👉 GitHub 地址：Auto-Plugin/autohue.js

👉 NPM 地址：autohue.js

下次给 Banner 换图时，尝试一下交给  autohue.js，让它帮你“自动调色”。

Image