图片色彩分析
概述
图片色彩分析工具是一个专业的颜色提取和分析利器。当你手头有一张参考图，想知道它的主色调是什么、有哪些适合 UI 设计的配色方案时，它能从三个不同的维度帮你拆解——从最具代表性的颜色到整张图片的平均色，再到专门为设计准备的协调调色板，一应俱全。
核心功能
- 三种分析算法并行提取：主色调（Color Thief）、设计感调色板（Vibrant）、平均色（Fast Average Color）三种算法同时运行，一次导入即可获得多维度的颜色洞察
- 精确取色器：使用系统级 EyeDropper API，在屏幕上任意位置取色，精准到你想要的每一个像素
- 颜色格式自由切换：HEX / RGB / HSL 三种格式一键切换，复制即用，适配不同工作流
- 智能历史记录：每次分析自动保存，支持按文件名搜索和按颜色筛选，随时回溯之前的设计灵感
- 拖拽与粘贴即分析：拖入图片或从剪贴板粘贴，自动触发全量分析，省去手动操作的步骤
快速上手
首次使用 4 步走
第一步：打开工具
在左侧工具列表中找到 图片色彩分析（图标是一个滴管 Pipette），点击进入。你会看到一个左右双栏的界面——左侧是图片预览区，右侧是分析设置和结果展示区。
TODO: 截图 - 工具整体界面，标注左侧图片预览区和右侧分析面板
第二步：导入图片
有三种方式把图片弄进去：
- 拖拽图片：将图片文件从系统文件夹拖入左侧预览区，拖入时区域边框会变为蓝色高亮，松开后自动开始分析
- 粘贴图片：从剪贴板粘贴（
Ctrl+V）图片到预览区，同样会自动触发分析 - 选择文件：点击预览区中央的 选择图片 按钮，或顶部工具栏的 替换图片 按钮，从文件浏览器中选取
支持格式：PNG、JPEG、GIF、WebP、BMP、SVG。
TODO: 截图 - 拖拽图片到预览区时的蓝色高亮边框效果
第三步：浏览分析结果
图片导入后，工具会自动运行三种算法，右侧面板会显示分析结果。默认展示 主色调 模式：
- 主色调：以彩色方块网格展示提取出的代表性颜色，每个色块上标注其色值
- 点击右上角的 复制全部 可以一键复制所有色值（每行一个）
TODO: 截图 - 分析完成后的右侧面板，展示主色调颜色网格和复制按钮
第四步：复制颜色值
将鼠标悬停在任何色块上，色块会略微放大并浮现色值标注。点击色块即可复制当前颜色的 HEX（或其他格式）到剪贴板，右下角会提示"已复制：#XXXXXX"。
TODO: 截图 - 鼠标悬停在色块上时出现色值标注的放大效果
功能详解
分析设置
右侧面板的顶部是分析设置区域，包含三个可调节的参数。
分析算法
通过三按钮分段选择器切换算法，不同算法提供不同维度的颜色信息：
| 算法 | 说明 | 适用场景 |
|---|---|---|
| 主色调 | 使用 Color Thief 提取图片中数量最多的颜色，按占比排序 | 快速获取图片最具代表性的颜色，适合配色方案的起点参考 |
| 设计感 | 使用 Node Vibrant 提取适合 UI 设计的协调配色方案 | 想要一套"即拿即用"的 UI 配色——每个颜色都有明确的角色（鲜艳、柔和、暗色等） |
| 平均色 | 计算整张图片的整体平均颜色，生成一个单一的混合色 | 快速获取图片的整体色调，生成背景色或氛围色 |
TODO: 截图 - 算法切换分段选择器，分别展示三种算法的结果对比
颜色格式
选择色值的显示格式，所有色块上的标注和复制内容都会同步切换：
- HEX：如
#FF5733，最通用的网页颜色格式 - RGB：如
rgb(255, 87, 51)，适用于 CSS 或图形编程 - HSL：如
hsl(12, 100%, 60%)，适合微调配色时调整色相/饱和度/亮度
TODO: 截图 - 颜色格式切换分段选择器，展示同一颜色在三种格式下的显示效果
颜色数量（仅主色调模式）
当选择 主色调 算法时，会出现一个滑块，控制提取的颜色数量：
- 范围：3–20 种
- 默认值：8 种
- 调整方式：拖动滑块或直接在右侧数字输入框中输入
- 调整后会自动重新分析并更新结果
数量越多，颜色覆盖越全，但过密时相邻色块可能差异不明显。对于大多数场景，8–12 种是个不错的平衡点。
TODO: 截图 - 颜色数量滑块和输入框的 UI 位置标注
三种算法详解
主色调模式
当切换到 主色调 时，右侧会展示一个彩色方块网格。每个方块的背景就是对应的颜色，悬停时显示色值。主色调算法会统计图片中像素颜色的出现频率，提取出现最多的那些颜色：
- 第一块颜色通常是图片中占比最多的主色
- 后续方块按占比递减排列
- 颜色之间会去重，避免相似色反复出现
TODO: 截图 - 主色调模式下 12 种颜色的网格展示
设计感模式
切换到 设计感 时，右侧会展示一个六栏的调色板，每栏包含一个标签（颜色角色）和对应的色块：
| 标签 | 说明 | 中文释义 |
|---|---|---|
Vibrant | 鲜艳、饱和度高的颜色 | 鲜艳 |
Muted | 柔和、低饱和度的颜色 | 柔和 |
DarkVibrant | 鲜艳但偏暗的颜色 | 暗色鲜艳 |
DarkMuted | 柔和且偏暗的颜色 | 暗色柔和 |
LightVibrant | 鲜艳且偏亮的颜色 | 亮色鲜艳 |
LightMuted | 柔和且偏亮的颜色 | 亮色柔和 |
不是每张图片都会包含全部六种颜色——如果某种颜色角色不存在（如图片中没有很亮的区域），对应栏会显示为灰色并标注"无"。
TODO: 截图 - 设计感模式的六栏调色板，部分颜色角色显示灰色"无"
使用建议：设计感模式的结果天然适合 UI 配色。比如可以用 Vibrant 作为主色按钮，Muted 作为辅助色，DarkVibrant 用于标题文字，LightMuted 用于背景。
平均色模式
切换到 平均色 时，只展示一个大色块，显示整张图片的像素颜色均值。色块区域更大，悬停时同样显示色值。
TODO: 截图 - 平均色模式下的大色块展示
这个模式虽然简单但很实用——把平均色作为页面背景色，主色调作为前景元素色，可以快速做出一套浑然天成的配色。
精确取色
有时候算法的自动提取不能满足需求——你需要精确获取画面上某个像素的颜色。这就是 精确取色 功能派上用场的地方。
使用 EyeDropper API（推荐）
- 确保你的浏览器支持
EyeDropper API（Chrome 95+、Edge 95+ 等基于 Chromium 的浏览器均支持） - 在右侧面板的 精确取色 区域，点击 从画面取色 按钮
- 屏幕会进入"取色模式"，鼠标指针变为放大镜/取色器样式，点击屏幕上任意位置即可拾取该点的颜色
- 拾取的颜色会出现在下方的颜色集合中，自动转换为 HEX 格式
TODO: 截图 - 点击"从画面取色"后的系统取色器界面
重要提示：EyeDropper API 是系统级功能，取色范围不限于应用窗口——你可以在屏幕上任何位置取色，包括其他应用。
管理手动取色结果
每次取色后，颜色块会以网格形式展示在取色按钮下方。每个色块：
- 悬停：显示色值
- 点击：复制该颜色到剪贴板
- 右上角 × 按钮（悬停时出现）：从调色板中移除该颜色
调色板最多容纳 12 种颜色，超出时会自动移除最早添加的颜色。
右上角还有 复制全部 和 清空 按钮：
- 复制全部：将手动调色板中所有颜色的色值（每行一个）复制到剪贴板
- 清空：一键清空所有手动取色结果
TODO: 截图 - 手动取色后的颜色网格，标注悬停时出现的色值和删除按钮
为什么不支持 EyeDropper？
如果当前浏览器不支持 EyeDropper（如 Firefox、Safari），按钮会被禁用，并显示一行黄色提示"当前浏览器不支持 EyeDropper API"。这时建议切换到基于 Chromium 的浏览器（Chrome/Edge）来使用此工具。不过自动分析功能在所有现代浏览器上均可正常工作。
历史记录
每次分析图片后，结果会自动保存到历史记录中。点击顶部工具栏的 历史记录 按钮，打开历史记录对话框。
TODO: 截图 - 历史记录对话框的整体界面
历史卡片
历史记录以网格卡片的形式展示，每张卡片包含：
- 缩略图：图片的缩略图预览，点击可放大查看
- 文件名：原始图片的文件名
- 时间戳：分析的日期和时间
- 颜色预览：该次分析提取出的前 6 个颜色小方块，让你"一眼"知道这次分析的结果
每张卡片底部有 加载 和 删除 两个按钮：
- 加载：恢复到该次分析的状态，包括分析结果和手动取色记录
- 删除：删除该条历史记录，关联的图片如果未被其他记录引用，将被移入回收站
TODO: 截图 - 一张历史记录卡片，标注缩略图、文件名、时间戳、颜色预览和操作按钮
搜索历史
历史记录对话框顶部提供了两种搜索方式：
文件名搜索：在左侧搜索框中输入关键词，实时过滤匹配文件名的历史记录。
颜色筛选：这是一个很实用的功能——你可以选择一个颜色，工具会自动找出所有历史记录中包含相似颜色的分析结果：
- 点击颜色选择器，选取或输入一个 HEX 颜色
- 调整 容差 滑块（0–200），控制颜色相似度的宽松程度：
- 容差较小（如 20）：只匹配颜色非常接近的记录
- 容差较大（如 120）：匹配包含相似色系的记录
- 点击 清除 按钮关闭颜色筛选
TODO: 截图 - 颜色筛选区域，标注颜色选择器、容差滑块和清除按钮
加载与删除
- 加载历史：点击卡片上的 加载 按钮，右侧面板会恢复为该次分析的全部状态——包括算法结果、颜色格式和手动取色记录。同时左侧图片预览区会切换到对应的图片
- 删除历史：点击 删除 按钮后会弹出确认对话框，确认后删除该记录。被删除记录关联的图片资产如果不再被任何其他记录使用，会被移入系统回收站
底部还有 清空所有历史 按钮，用于一键清除全部历史记录（操作不可恢复）。
自动保存机制
分析结果和手动取色记录会自动保存到历史记录中。当你切换算法、调整颜色数量或增删手动取色时，工具会通过防抖机制在操作暂停 1 秒后自动更新关联的历史记录，确保你随时关闭工具后再次打开，工作状态都是完整的。
清除工作区
如果你完成了当前图片的分析，想换一张新图，点击顶部工具栏的 清除 按钮即可：
- 清除图片预览
- 清空所有分析结果
- 清空手动取色调色板
- 不影响历史记录
你也可以在左侧预览区上方的 替换图片 按钮选择新图片，工具会自动清除旧状态并开始分析新图。
高级用法
设计工作流：从参考图到 UI 配色
设计师拿到一张参考图（如 Dribbble 上的作品、朋友圈的照片、品牌的 Logo），想要提取一套配色方案：
- 将参考图导入图片色彩分析工具
- 切换到 设计感 算法，查看六种颜色角色
- 将
Vibrant作为 UI 主色按钮，Muted作为辅助元素，LightMuted作为背景色 - 用 精确取色 从图片中拾取一些特殊的点缀色
- 将所有颜色切换到 HSL 格式复制到设计稿中，利用 HSL 微调色相和饱和度
品牌配色审计
当你有一堆品牌图片（如产品图、宣传海报），想看看它们是否保持了统一的色调：
- 逐一导入每张图片
- 切换到 平均色 模式，记录每张图的整体色调
- 切换到 主色调 模式，查看主要颜色是否一致
- 利用 历史记录 中的颜色筛选功能，筛选出包含特定颜色的图片，快速定位色调偏差
批量处理配合其他工具
图片色彩分析的结果（颜色值）可以很方便地与其他工具联动：
- 复制分析出的颜色值，粘贴到 JSON 格式化 工具中构建配色配置文件
- 将主色调列表复制到 内容查重 工具中，快速比较多张图片的配色相似度
- 颜色值可直接用于 CSS 变量或设计 Token 的定义
利用颜色筛选重构设计系统
你有一个包含数十张参考图的历史库，想要找所有包含"爱马仕橙"（#FF5733）色系的图片：
- 打开 历史记录 对话框
- 在颜色筛选器中输入
#FF5733 - 调整容差至 80–120，找到所有包含相近色系的图片
- 逐一加载浏览它们的配色方案，提取设计灵感
常见问题
Q：为什么我导入图片后一直显示"分析中..."？
这是正常现象。三种算法（主色调 + 设计感 + 平均色）是并行执行的，其中 node-vibrant 的设计感算法在处理大尺寸或复杂图片时可能需要几秒钟时间。处理速度受图片分辨率影响：普通尺寸的图片（如 1920×1080）通常在 1–3 秒内完成，超大尺寸图片可能需要更久。
如果长时间（超过 10 秒）没有反应，可以尝试关闭工具重新打开，或使用较小尺寸的图片。
Q：分析结果中的颜色和我肉眼看到的不一样？
这可能是正常现象，原因有几个：
- 主色调算法提取的是像素数量最多的颜色，如果你感觉某个颜色"很显眼"但其实它在图片中占的面积不大，它就不会被选中。比如一张白底上有个小红点的图片，分析结果中白色会占据主导
- 设计感算法侧重于"协调感"，不一定是"出现最多的颜色"。它更像一个专业的配色师，从图片中挑选出一套和谐的配色方案
- 平均色是整张图片颜色的算术平均，结果可能是"灰蒙蒙的"一种颜色，因为图片中所有颜色的均值往往饱和度偏低
如果需要精确到某一个点的颜色，使用 精确取色 功能在屏幕上直接点击取色。
Q：手动取色最多能取多少个颜色？
最多 12 种。达到上限后，再取新的颜色会自动移除最早添加的颜色。如果不需要那么多，可以点击每个色块右上角的 × 按钮移除不需要的颜色。
Q：历史记录会占用很多磁盘空间吗？
历史记录和关联的图片资产会存储在应用的数据目录中。工具会自动限制历史记录最多保留 50 条，超出时会自动清理最旧的记录及其关联图片。对于大多数使用场景，50 条记录占用的空间通常在几十到几百 MB 之间。
如果你想手动清理，可以在历史记录对话框中逐条删除，或使用底部的 清空所有历史 按钮。
Q：图片色彩分析工具支持哪些图片格式？
支持以下常见格式：PNG、JPEG、GIF、WebP、BMP、SVG。导入方式支持拖拽、粘贴和文件选择器三种方式。特别地，SVG 文件也是支持的，但需要注意有些复杂的 SVG（如包含渐变、滤镜等效果）可能无法正确渲染，从而影响到颜色提取的准确性。
Q：为什么我的浏览器不支持"从画面取色"功能？
"从画面取色"使用的是浏览器原生的 EyeDropper API，目前仅在基于 Chromium 的浏览器中可用（Chrome 95+、Edge 95+、Opera 等）。如果你使用的是 Firefox、Safari 或其他非 Chromium 内核的浏览器，这个按钮会被禁用。
解决办法：暂时切换到 Chrome 或 Edge 浏览器来使用取色功能。但请注意，另外两种自动分析算法（主色调和设计感）在所有现代浏览器上都可以正常工作，不影响工具的核心功能。