img-color-skill

核心原则

禁止凭视觉估算颜色。所有颜色必须从图片中提取，要么用调色板模式取主色，要么用坐标取色。

使用流程（调色板优先）

第一步：提取调色板

读图后，首先提取调色板获取图片主色调：

# 提取最常见的 10 种颜色（推荐）
node D:/workspace/java/dream/skills/img-color-skill/get-color.js <图片路径> --palette 10

# 输出示例：
# [
#   {"hex": "#F5F5F5", "rgb": "rgb(245,245,245)", "hsl": "hsl(0,0%,96%)", "percentage": 45.2},
#   {"hex": "#3B82F6", "rgb": "rgb(59,130,246)", "hsl": "hsl(217,91%,60%)", "percentage": 12.8},
#   ...
# ]

调色板使用规则：

• percentage 最大的颜色通常是背景色
• percentage 次大的可能是主色调或按钮色
• 把调色板结果记录下来，后续直接从里面选

第二步：生成 HTML/CSS

根据调色板结果写颜色代码，不要反复调用脚本。

/* 调色板告诉我背景是 #F5F5F5，主按钮是 #3B82F6 */
body { background-color: #F5F5F5; }
.btn-primary { background-color: #3B82F6; }

第三步（可选）：精确取色

如果调色板里的颜色不够精确（比如按钮有渐变），再用坐标取色：

# 区域平均色（推荐，容错更好）
node D:/workspace/java/dream/skills/img-color-skill/get-color.js <图片> <x> <y> <w> <h>

# 只输出 HEX
node D:/workspace/java/dream/skills/img-color-skill/get-color.js <图片> <x> <y> --format hex

颜色优先级参考

• 背景色：调色板中 percentage 最大的颜色（通常在 30% 以上）
• 文字色：通常是 #333、#666、#999 或黑色 #000
• 按钮色：占比 5-20% 的醒目颜色
• 边框/分割线：可能是灰色系或与背景接近的颜色

注意事项

• 调色板提取会缩小图片加速，但颜色代表性足够
• 相似颜色会自动合并，所以调色板颜色数可能少于请求数
• 透明像素会被忽略