先把问题解决
先在视觉创作工具的主色提取页得到最多五个候选色，再为颜色指定背景、正文和强调的角色。当前结果来自缩小图像后的颜色分组，不是品牌色检测、像素占比报告或可访问性认证；小面积的重要颜色可能没有入选。
照片颜色与页面角色是两张清单
假设你要给一个陶艺工作坊制作报名页：照片里大部分是米白墙面和棕色陶土，只有小块蓝色围裙。这个原创编辑案例不预设具体提取值。米白可能适合作为背景候选，深棕可能适合作为标题候选，蓝色则值得单独检查是否能突出报名入口。三种选择的理由不同，不应由主色排名决定。
先写下页面真正需要的角色，再看提取结果。背景需要承载长段正文，强调色需要让少量关键动作容易辨认。不能因为一张照片出现了五种颜色，就要求页面同时使用五种。
| 画面线索 | 可以考虑的用途 | 仍需检查 |
|---|---|---|
| 大面积浅色 | 背景候选 | 与正文搭配是否清楚 |
| 深色轮廓或阴影 | 标题或正文候选 | 小字号是否易读 |
| 小面积醒目物体 | 强调色候选 | 能否从背景中明显分离 |
在主色页做一轮可重复提取
- 保留原图，选择一个已经正确显示颜色的常见图片文件。先决定是分析整张照片，还是分析与页面主题相关的裁切区域。
- 打开视觉创作工具，切换到“五色色卡”，上传图片并点击“提取前 5 个配色”。观察色块上的十六进制代码。
- 点击色块复制颜色，立即粘贴到自己的草稿中，并同时记录源文件名和使用区域。当前页不提供配色文件下载，不要把滤镜页的图片下载当成色板导出。
- 把候选色放到真正的标题、正文、按钮和背景上。保留能说明角色的两三种颜色，其余继续留在候选清单。
五色结果为什么会漏掉一个重要细节
当前实现会把图片缩放到 80×80，按固定间隔读取部分像素，把相近 RGB 值分组后，取数量最多的最多五组并计算组内平均色；透明度低于约一半的采样像素会被跳过。底层像素读取机制可参阅MDN 的 getImageData 说明。这些实现细节解释了结果的用途和限制，并不代表进行过色彩准确度认证。
缩放、采样、分组都会压缩细节。假如画面中的蓝色围裙面积很小，它可能没有进入前五组；而一片阴影可能形成多个深色候选。结果也可能少于五个颜色，例如只有单一色块的图片。不要把输出顺序当成精确的百分比排名。
小面积重要颜色的处理
看不到蓝色色块，于是认定照片中没有可用的蓝色。
保留整图提取结果，再单独检查蓝色围裙区域，把颜色用途与原图一起记录。
先锁定照片版本，再比较配色
同一张图片经过暖色滤镜后，墙面和陶土的候选色可能一起变化。如果一边改照片、一边改页面颜色，就很难解释究竟是哪一步让页面不协调。先锁定原片版本，再记录一套配色；需要比较滤镜时，给另一版本单独命名，参考滤镜与导出尺寸检查。
检查一张实际页面，而不是只欣赏五块并排的颜色。把按钮放在计划使用的背景上，把提示文字缩到真实字号，再以手机宽度查看。必要时借助专门的对比度检查器；本工具没有计算对比度，也没有证明任意两色组合符合可访问性标准。颜色之外，还应使用文字标签或图标表达操作状态。
把一张色板交付成一份有理由的决定
交付时写清楚来源、角色与待验证项。例如“米白来自工作坊原图，用作浅背景候选；深棕用于标题；蓝色来自围裙区域，用于报名入口候选；正文对比度待单独检查”。这比只粘贴五个 HEX 代码更方便后来的人理解和调整。
如果输入是透明素材、压缩严重的截图或经过不同软件处理的副本，应保留文件版本。提取结果适合探索和沟通，不适合替代印刷打样、品牌规范或专业色彩管理。真正的验收目标，是让颜色服务内容和动作，并能追溯到同一份输入。
交付前保留四项证据
- 源图片与分析区域明确，未把不同滤镜版本混在一起。
- 候选颜色已粘贴核对，角色与选择理由清楚。
- 已在真实手机页面检查正文和主要操作。
- 未把主色提取写成占比测量、品牌识别或对比度认证。
常见问题
为什么只显示一个或两个颜色？
输出是最多五组，并非必须五组。简单图像、透明区域和相近色合并都可能减少候选数量。
能不能从主色结果直接得到品牌标准色？
不能。品牌标准应以正式规范为准；照片的光线、压缩和编辑都会影响像素。
提取出的颜色可以直接给按钮用吗？
可以作为候选，但要在实际背景和文字上检查可读性及辨识度。出现次数多不能证明适合作为操作强调色。
参考资料与延伸阅读
按步骤开始处理
进入对应工具，预览处理结果，检查导出的文件。
