图片调色板取色

要解决什么问题

从截图或设计稿还原页面时，模型很容易凭视觉印象写出 #3a7bd5 这类「看起来差不多」的颜色。偏差会叠在背景、按钮和边框上，整页色调对不齐，后续改 CSS 也很痛苦。

技能如何工作

本技能要求：所有颜色必须从图片里提取，不允许估算。

1. 先提取调色板：读图后首先跑调色板，拿到各颜色的占比（percentage）。把结果记下来，后面写样式时直接从这份列表里选。
2. 再写 HTML/CSS：根据调色板选定背景、主色、文字色等，不要为同一个页面反复调脚本。
3. 可选坐标取色：渐变按钮、细线边框等调色板不够细时，再用坐标精确取色。

颜色优先级参考：

• 背景色：percentage 通常最大（常见 30% 以上）
• 文字色：多为 #333、#666、#999 或 #000
• 按钮色：占比约 5%～20% 的醒目色
• 边框/分割线：灰色或与背景接近的色

适用边界与注意点

调色板阶段会缩小图片以加速，主色代表性一般够用；相近颜色会合并，条数可能少于请求数量；透明像素会被忽略。若设计强依赖渐变或多层叠色，仍以调色板定大方向，再用坐标补细节。