从图片、网站或设计稿中提取配色并生成可访问的调色板

当你需要从图片、网站、截图或设计稿中提取主色并生成完整、可访问、可导出的配色方案时使用。

适用场景

解决思路

1. 确定来源：图片文件（PNG、JPG、SVG）、网站 URL、截图、设计稿，或一个已有的颜色代码作为基础。
2. 从图片提取颜色：分析像素数据，识别主色，对相近色进行分组，计算出现频率，并按显著程度排序。
3. 从网站提取颜色：抓取并解析 CSS，提取颜色值，识别品牌色、强调色、文字色和背景色。
4. 使用 K-means 聚类，提取 5-10 个主色；除非接近白色和接近黑色的颜色占比显著，否则忽略它们。
5. 构建主调色板（5-10 个颜色）：最主色、2-3 个辅助色、1-2 个强调色、一个背景色和一个文字色。
6. 生成扩展调色板，包含 tints、shades、tones 以及 50-950 数值色阶（参见 references/color-theory.md）。
7. 运行色彩和谐分析，生成互补色、类似色、三角色、分裂互补色、四角色和单色方案（参见 references/color-theory.md）。
8. 检查可访问性：计算每对文字/背景配色的 WCAG 2.1 对比度，并针对红色盲、绿色盲和蓝色盲进行测试；对不通过的配色推荐可访问的替代方案（参见 references/color-theory.md）。
9. 按照 references/output-template.md 格式化报告，并使用 references/export-formats.md 导出为所需格式。
10. 确保交付的调色板具有清晰的主色、足够的变体、语义化命名、和谐方案、通过可访问性检查的对比度、使用指南，以及多种格式的导出，可直接用于设计系统。

适用边界 · 注意事项

• 没有可提取颜色的来源（如纯文本或空白图片）时。
• 需要精确品牌色规范而非从像素/网页推断时，应直接使用品牌规范。
• 无法进行 CSS 解析或像素分析的封闭平台时。