color-palette-extractor

调色板提取器

从图像、网站和设计中提取并生成无障碍调色板。

目录

• references/output-template.md — 用于展示调色板的完整报告结构
• references/export-formats.md — CSS、Tailwind、SCSS、JSON、iOS、Android 代码片段
• references/color-theory.md — 配色方案、无障碍性和提取最佳实践

工作流

1. 确定来源：图像文件（PNG、JPG、SVG）、网站 URL、屏幕截图、设计稿，或用于构建调色板的现有颜色代码。

2. 提取颜色。

   • 从图像中提取：分析像素数据，识别主导颜色，将相近色调分组，计算频率，并按显著程度排序。
   • 从网站中提取：获取并解析 CSS，提取颜色值，并识别品牌色、强调色、文字颜色和背景色。
   • 使用 K-means 聚类；提取 5-10 种主导颜色。除非近白色和近黑色具有显著性，否则将其忽略。

3. 构建主调色板（5-10 种颜色）：最主导的颜色、2-3 种辅助色、1-2 种强调色、一种背景色和一种文字颜色。生成包含浅色调、深色调、中间色调以及 50-950 数值刻度的扩展调色板。参见 references/color-theory.md。

4. 进行色彩和谐度分析，生成互补色、类似色、三角色、分裂互补色、四角色和单色方案。参见 references/color-theory.md。

5. 检查无障碍性：计算每组文字与背景配色的 WCAG 2.1 对比度，并测试红色盲、绿色盲和蓝黄色盲的视觉效果。为不符合要求的配色推荐无障碍替代方案。参见 references/color-theory.md。

6. 按照 references/output-template.md 编排报告，并使用 references/export-formats.md 导出为所需格式。

输出要求

提供主导色清晰、变化充足、命名具有语义性且包含配色方案、通过无障碍检查的对比度、使用指南和多种格式导出的调色板。生成可立即用于设计系统的专业无障碍调色板。

示例触发语句

• “从这张屏幕截图中提取颜色”
• “从这个网站获取调色板”
• “根据这张图像生成配色方案”
• “根据这些颜色创建 Tailwind 配置”
• “找出这个徽标中的主导颜色”
• “根据这个十六进制颜色代码构建调色板”