mcpField
C
Color Palette Generator

Color Palette Generator

github.com/jmsktm设计与 UI10246 次安装40 周前更新
代码仓库

关于 Color Palette Generator

Color Palette Generator 是用于品牌与界面配色的设计技能，可生成并审查色彩系统。它结合配色规则与 WCAG 检查，并提供使用指南和实现变量。

主要功能

  1. 01生成品牌与界面配色
  2. 02构建色阶和语义色
  3. 03从图像提取并协调颜色
  4. 04检查 WCAG 对比度并建议修正
  5. 05导出 Tailwind/CSS 变量

适用场景

  1. 01创建无障碍品牌色彩系统
  2. 02定义明暗模式界面颜色
  3. 03从标志或图像提取配色
  4. 04检查现有颜色的对比度

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/jmsktm/claude-settings --skill color-palette-generator

安装后在 Claude Code 中输入/color-palette-generator确认已加载。

详细介绍

色彩调色板生成器

一位色彩理论专家，可为任何项目创建和谐、易于访问的调色板。此技能结合色彩理论原则、无障碍标准（WCAG）和现代设计趋势，生成适用于数字媒体和印刷媒体的协调配色方案。

无论你需要鲜明的品牌形象、令人平静的 UI 调色板，还是大胆的营销配色方案，此技能都能提供有科学依据的色彩组合，并附上详细的使用指南、对比度和实现代码。

核心工作流

工作流 1：创建品牌调色板
  1. 收集需求：
    • 品牌个性（专业、活泼、大胆、简约等）
    • 行业背景
    • 目标受众
    • 期望的情绪反应
  2. 生成主色选项（3-5 个）
  3. 构建互补调色板：
    • 主色：品牌主色
    • 辅色：辅助点缀色
    • 中性色：灰色/背景色
    • 语义色：成功、警告、错误、信息
  4. 验证无障碍性（符合 WCAG AA/AAA）
  5. 提供使用指南和代码
工作流 2：UI/UX 调色板
  1. 明确界面需求：
    • 支持浅色/深色模式
    • 所需状态数量
    • 内容类型（数据密集型、内容导向型等）
  2. 创建系统化色阶：
    • 基础色及其 9-11 个明暗变化
    • 具有匹配色阶的语义色
    • 用于背景/文本的中性色阶
  3. 将颜色映射到 UI 元素：
    • 背景、表面、叠加层
    • 文本层级
    • 交互状态（悬停、激活、禁用）
    • 边框和分隔线
  4. 生成 Tailwind/CSS 变量
  5. 创建使用文档
工作流 3：根据灵感创建调色板
  1. 接收输入：
    • 图片/照片参考
    • 品牌 Logo
    • 竞争对手网站
    • 颜色十六进制代码
  2. 运用色彩理论提取主导色
  3. 调整并协调颜色：
    • 应用色彩协调规则（互补、三分、类似）
    • 调整饱和度/明度以保持一致
    • 确保对比度充足
  4. 构建带有变化色的完整调色板
  5. 与原始内容进行比较
工作流 4：无障碍审查
  1. 接收现有调色板
  2. 测试所有颜色组合：
    • 背景上的文本
    • 按钮状态
    • 交互元素
  3. 计算对比度（WCAG 2.1）
  4. 找出不符合项并提供修复方案：
    • 建议更深/更浅的替代色
    • 显示所需的最小调整幅度
  5. 生成无障碍报告

快速参考

操作命令/触发语
创建品牌调色板"为 [行业] 生成一套 [氛围] 调色板"
UI 配色系统"为 [项目类型] 创建一套 UI 调色板"
从图片中提取"根据这张 [图片/Logo] 构建调色板"
检查无障碍性"审查这些颜色是否符合 WCAG 标准"
扩展单一颜色"根据 #HEX 创建完整调色板"
导出格式"提供 Tailwind/CSS/Figma 变量"

色彩协调体系

单色：使用同一色相，通过改变明度/饱和度形成变化

  • 适用于：简约、精致的设计
  • 最适合：摄影网站、作品集

类似色：色轮上相邻的颜色（相差 30°）

  • 适用于：和谐、自然的氛围
  • 最适合：健康、自然、环保品牌

互补色：色轮上相对的颜色（相差 180°）

  • 适用于：高对比、充满活力的设计
  • 最适合：体育、娱乐、零售

三分色：间隔相等的三种颜色（相差 120°）

  • 适用于：平衡、鲜明的设计
  • 最适合：创意、活泼的品牌

分裂互补色：基色 + 与其互补色相邻的两种颜色

  • 适用于：比互补色更柔和的设计
  • 最适合：专业服务、SaaS

四分色：由两组互补色组成的四种颜色

  • 适用于：丰富、复杂的调色板
  • 最适合：内容密集型、编辑类设计

最佳实践

  • 从目的出发：选择颜色前，先了解其情感效果和品牌个性
  • 注意比例：遵循 60-30-10 法则（60% 主色、30% 辅色、10% 点缀色）
  • 无障碍优先：定稿前务必检查 WCAG 对比度
  • 结合场景测试：颜色在屏幕和印刷品上、在浅色和深色背景上看起来都不一样
  • 提供多种变化：包括浅色调、深色调和柔和色调，以便灵活使用
  • 考虑色盲用户：使用模拟器进行测试，确保关键信息不会只通过颜色传达
  • 记录使用方式：说明各颜色的用途（按钮、文本、背景）
  • 构建系统：创建可随产品发展而扩展的调色板
  • 关注文化差异：颜色在不同文化中有不同含义
  • 奠定中性色基础：每套调色板都需要一组扎实的灰阶
  • 确保语义清晰：成功、警告、错误和信息状态应一目了然
  • 适配深色模式：确保颜色在浅色和深色主题中都适用

交付物格式

PALETTE NAME
Mood: [Adjectives describing the feel]

PRIMARY COLORS
Main Brand: #HEX - [Name] - RGB(r,g,b) - HSL(h,s,l)
  Usage: Primary buttons, headers, brand moments
  Accessible on: White, Light Gray

Secondary: #HEX - [Name]
  Usage: Accents, highlights, links
  Accessible on: White, Dark Gray

NEUTRAL SCALE
Gray-900: #HEX (Darkest - primary text)
Gray-800: #HEX (Secondary text)
...
Gray-100: #HEX (Lightest - subtle backgrounds)

SEMANTIC COLORS
Success: #HEX (Green family)
Warning: #HEX (Yellow/Orange family)
Error: #HEX (Red family)
Info: #HEX (Blue family)

CONTRAST RATIOS
✓ Primary on White: 4.8:1 (AA compliant)
✓ Secondary on Light Gray: 7.2:1 (AAA compliant)
✗ Warning on White: 2.1:1 (FAIL - suggest #HEX instead)

CODE EXPORT
[Tailwind config / CSS variables / Figma styles]

USAGE GUIDELINES
- When to use each color
- Do's and don'ts
- Common combinations

工具集成

  • 使用 Midjourney 生成色彩情绪板
  • 使用 WebSearch 调研行业色彩趋势
  • 使用 Firecrawl 分析竞争对手的配色方案
  • 使用 Playwright 在实时浏览器环境中测试颜色

常见需求

初创企业／科技：蓝色、灰色、鲜明的点缀色
金融：海军蓝、金色、保守的配色
医疗保健：蓝色、绿色、舒缓的色调
食品／餐饮：红色、橙色、温暖的配色
生态／可持续发展：绿色、大地色系、自然风格
奢华：黑色、金色、浓郁的宝石色调
儿童／教育：原色、明亮活泼的色彩
创意／代理机构：大胆、别具一格、醒目的色彩

评论

支持 Markdown