SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场Color Palette Generator

Color Palette Generator

设计与创作

查看项目

更新于 10-16 09:10

技能介绍

Color Palette Generator 是一个面向配色设计的专家技能，定位为「色彩理论专家」，能够为任意项目生成和谐且无障碍的配色方案。它把色彩理论原则、无障碍标准（WCAG）和现代设计趋势结合起来，产出可同时用于数字与印刷媒介的统一色彩体系。无论是需要鲜明的品牌识别、平和的 UI 配色，还是大胆的营销方案，该技能都提供有科学依据的色彩组合，并附带详细的使用指南、对比度比例和实现代码。

主要能力与工作流

  1. 品牌配色创建：先收集需求（品牌个性，如专业、活泼、大胆、极简等；行业背景；目标受众；期望的情感反应），生成 3-5 个主色选项；随后构建完整配色，包括主色（品牌主色）、辅助色（支撑性强调色）、中性色（灰阶/背景）、语义色（成功、警告、错误、信息），并验证无障碍性（WCAG AA/AAA 合规），最后提供使用指南和代码。

  2. UI/UX 调色板：定义界面需求（浅色/深色模式支持、需要多少状态、内容类型如数据密集或内容聚焦等），创建系统化色阶（基色配 9-11 个色调/明暗，语义色配对应色阶，背景与文字的中性色阶），把颜色映射到 UI 元素（背景、表面、浮层、文字层级、交互状态如悬停/激活/禁用、边框与分隔线），生成 Tailwind/CSS 变量并编写使用文档。

  3. 从灵感生成配色：接受图片/照片参考、品牌标志、竞品网站或颜色十六进制代码作为输入，运用色彩理论提取主导色，再按色彩和谐规则（互补、三角、类似）精炼与协调，调整饱和度与明度以保持一致，确保足够对比度，构建完整配色及变体，并提供与原稿的对比。

  4. 无障碍审计：接收已有配色，测试所有颜色组合（背景上的文字、按钮状态、交互元素），按 WCAG 2.1 计算对比度比例，找出不合格项并给出修复建议（更浅或更深的替代方案、所需的最小调整），生成无障碍报告。

快速参考（触发方式）

创建品牌配色：输入「Generate a [mood] color palette for [industry]」；创建 UI 色彩系统：输入「Create a UI palette for [project type]」；从图片取色：输入「Build palette from this [image/logo]」；检查无障碍：输入「Audit these colors for WCAG compliance」；扩展单色：输入「Create a full palette from #HEX」；导出格式：输入「Give me Tailwind/CSS/Figma variables」。

色彩和谐系统

单色（Monochromatic）：单一色相配合不同明度/饱和度，适合极简、精致的设计，最适用于摄影网站、作品集；类似色（Analogous）：色轮上相邻颜色（相差约 30°），带来和谐自然的感觉，适合健康、自然、环保品牌；互补色（Complementary）：色轮上相对颜色（相差 180°），高对比、充满活力，适合体育、娱乐、零售；三角色（Triadic）：三种颜色等距分布（相差 120°），平衡而鲜艳，适合创意、活泼品牌；分裂互补（Split-Complementary）：基色加两个与互补色相邻的颜色，比互补色更柔和，适合专业服务、SaaS；四色（Tetradic）：两对互补色共四种颜色，色彩丰富复杂，适合内容密集、编辑类场景。

最佳实践

以目的为先：选色前先理解期望的情感反应和品牌个性。注意比例：遵循 60-30-10 规则（60% 主色、30% 辅助色、10% 强调色）。无障碍优先：定稿前始终检查 WCAG 对比度。在真实场景测试：颜色在屏幕与印刷、浅色与深色背景上表现不同。提供变体：包含色调、明暗和色度以保持灵活性。考虑色盲：使用模拟器测试，确保关键信息不只靠颜色传达。记录用法：说明哪种颜色用于何种用途（按钮、文字、背景）。系统化思考：创建可随产品扩展的配色。文化意识：颜色在不同文化中有不同含义。中性色基础：每个配色都需要稳固的灰阶。语义清晰：成功、警告、错误、信息应能立刻被识别。适配深色模式：确保颜色在浅色和深色主题中都可用。

交付物格式

交付内容包括：调色板名称与情绪（描述感受的形容词）；主色（主品牌色：十六进制、名称、RGB、HSL，注明用途如主按钮/页头/品牌场景，以及可安全搭配的背景如白色、浅灰；辅助色：用途为强调/高亮/链接，可安全搭配白色、深灰）；中性色阶（Gray-900 最深用于主要文字，Gray-800 次要文字，依次到 Gray-100 最浅用于细微背景）；语义色（成功为绿色系、警告为黄/橙色系、错误为红色系、信息为蓝色系）；对比度比例（如主色配白色 4.8:1 符合 AA，辅助色配浅灰 7.2:1 符合 AAA，警告色配白色 2.1:1 不合格并建议改用指定十六进制）；代码导出（Tailwind 配置 / CSS 变量 / Figma 样式）；使用指南（每种颜色何时使用、注意事项、常见组合）。

工具集成

可使用 Midjourney 生成色彩情绪板，使用 WebSearch 研究行业色彩趋势，使用 Firecrawl 分析竞品配色，使用 Playwright 在真实浏览器环境中测试颜色。

常见需求参考

初创/科技：蓝色、灰色、鲜艳强调色；金融：藏青、金色、保守配色；医疗：蓝色、绿色、平静色调；餐饮：红色、橙色、暖色调；环保/可持续：绿色、大地色、自然色调；奢侈品：黑色、金色、深宝石色；儿童/教育：原色、明亮、活泼；创意/代理机构：大胆、非传统、宣言式色彩。

限制与说明

技能资料未提供具体收费、价格、平台支持范围或效果保证等信息，均暂未提供。使用时应以实际输入和输出为准，无障碍合规需结合具体 WCAG 版本与项目要求验证。