mcpField
B
build-color-palette

build-color-palette

github.com/gnurio设计与 UI453228 次安装26 周前更新
代码仓库

关于 build-color-palette

Build Color Palette 是用于创建和评估系统化 UI 配色的设计技能，将颜色分为灰色、主色和强调色，并提供色阶角色与使用指导。

主要功能

  1. 01生成多色阶配色
  2. 02组织灰色、主色与强调色
  3. 03分配颜色角色
  4. 04提供使用指南
  5. 05评估配色是否通过
  6. 06检查 WCAG AA 对比度

适用场景

  1. 01为新界面创建配色
  2. 02补充悬停和禁用状态色阶
  3. 03定义状态语义色
  4. 04检查现有配色的缺失项

安装

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

$npx skills add https://github.com/gnurio/refactoring-ui-plugin --skill build-color-palette

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

详细介绍

技能：构建色彩调色板

目的

创建全面、系统化的色彩调色板，提供足够的色阶来构建真实感十足的界面（8-10 种灰色、5-10 种主色、5-10 种强调色）。

类型

生成 + 评估

输入

  • 品牌色或设计氛围／意图
  • UI 复杂度（简单的落地页还是复杂的仪表板）
  • 必需的语义含义（成功、错误、警告、信息）
  • 是否需要分类颜色（图表、日历、标签）

输出

  • 包含每种颜色多个色阶的调色板规范
  • 为每种色阶指定用途
  • 使用指南
  • 对现有调色板的通过／不通过评估

执行的转换

将功能需求映射为全面的调色板，并按三类组织（灰色、主色、强调色），每类包含 5-10 种不同色阶。

判断标准

通过（良好的调色板）
  • 灰色：8-10 种色阶——用于文本、背景、面板、表单控件（占 UI 的大部分）
  • 主色：5-10 种色阶——用于主要操作、活动导航的一种或两种核心颜色
  • 强调色：每种 5-10 种色阶——用于语义状态（红、黄、绿）、新功能、分类
  • 系统化色阶：预先定义每种颜色从浅到深的变化
  • 层级清晰：主色决定整体观感；谨慎使用强调色
  • 对比度充足：所有文本均符合 WCAG AA（普通文本为 4.5:1，大号文本为 3:1）
  • 不使用透明度：所有色阶均使用明确的十六进制值
不通过（较差的调色板）
  • 灰色过少（3-4 种色阶，导致不得不妥协）
  • 缺少主色的不同色阶（无法创建悬停状态、柔和背景）
  • 语义状态和分类所需的强调色不足
  • 使用透明度（rgba）而非已定义的色阶（不一致）
  • 缺少系统化的色阶递进（浅色／深色变化随意）
  • 对比度不足，影响无障碍访问

调色板结构

灰色（8-10 种色阶）

UI 的大部分区域都是灰色。你需要的灰色色阶比想象中更多。

White / Near-white: #FFFFFF, #F9FAFB
Gray 100: #F3F4F6 - Subtle backgrounds
Gray 200: #E5E7EB - Borders, dividers
Gray 300: #D1D5DB - Disabled states
Gray 400: #9CA3AF - Placeholder text
Gray 500: #6B7280 - Secondary text
Gray 600: #4B5563 - Body text
Gray 700: #374151 - Strong text
Gray 800: #1F2937 - Headings
Gray 900: #111827 - Near-black text

从深灰色（而非纯黑色）开始，按均匀的间隔逐步过渡到白色。

主色（5-10 种色阶）

用于决定网站整体观感的一种或两种颜色。

Primary 50: Ultra-light (alert backgrounds)
Primary 100: Very light (subtle backgrounds)
Primary 200-300: Light (hover states)
Primary 400-500: Base (buttons, links)
Primary 600-700: Dark (hover text, emphasis)
Primary 800-900: Very dark (text on light)
强调色（每种 5-10 种色阶）

谨慎使用，用来吸引注意或传达含义。

颜色用途
红色破坏性操作、错误、警告
黄色／琥珀色新功能、谨慎提示、突出显示
绿色成功、积极趋势、确认
青色／粉色／紫色功能突出显示、分类、日历

与主色一样，每种强调色都需要 5-10 种色阶。

使用的视觉／UX 信号

  1. 色阶递进：从浅到深均匀变化
  2. 灰色占主导：灰色是基础，彩色用于强调
  3. 语义含义：红色 = 危险，绿色 = 成功，黄色 = 警告／功能
  4. 对比度：对比度越高，重要性或可读性越强
  5. 谨慎使用：有目的地使用主色和强调色，而非到处使用

常见失败模式

失败描述修复方法
5 色生成器整个 UI 只使用 5 个十六进制颜色代码构建全面的调色板，包含 8-10 种灰色、5-10 种主色色阶和 5-10 种强调色色阶
灰色过少只有 3-4 种灰色色阶，导致不得不妥协将灰色色阶扩展到 8-10 种，从近白色到近黑色
用透明度创建色阶使用 rgba() 创建更浅／更深的颜色预先定义明确的十六进制色阶，确保一致性
缺少悬停状态交互状态没有更浅／更深的颜色变化每种交互颜色都需要 5-10 种色阶
缺少语义颜色只有品牌色，没有红色／黄色／绿色添加错误、警告、成功状态所需的强调色
强调色色阶过少红色／绿色／黄色都只有一种色阶每种强调色都需要 5-10 种色阶，以便灵活使用
文本使用纯黑色使用 #000000（过于刺眼）从 #111827 或 #1F2937 开始

前提条件

  • 品牌指南或基础色
  • 了解 UI 状态（错误、成功、悬停等）
  • 了解分类需求（图表、标签等）

依赖项

  • establish-visual-hierarchy（颜色有助于建立层级）
  • manage-color-contrast（无障碍要求）

Refactoring UI 参考内容

  • “你需要的颜色比想象中更多”
  • “预先定义好色阶”
  • “灰色占据了 UI 的大部分”
  • “不要用不透明度来创建更浅的颜色”
  • “构建全面的调色板，而不是只准备 5 个十六进制色值”

色阶定义方法

针对每种颜色，通过调整 HSL 中的明度来定义色阶：

  • 极浅：明度为 95-98%（背景）
  • 浅：明度为 80-90%（悬停背景）
  • 基础：明度为 45-55%（按钮、链接）
  • 深：明度为 20-35%（文本、强调内容）
  • 极深：明度为 10-15%（标题）

示例评估

输入： 仅包含以下颜色的调色板：品牌蓝 #0066FF、浅蓝 #E6F2FF、白色、灰色 #999999、黑色

评估： 不合格

  • 只有 2 种蓝色色阶（需要 5-10 种）
  • 只有 1 种灰色色阶（需要 8-10 种）
  • 缺少语义色（红色、黄色、绿色）
  • 缺少强调色阶

建议： 构建全面的调色板：

灰色（10 种）： #F9FAFB、#F3F4F6、#E5E7EB、#D1D5DB、#9CA3AF、#6B7280、#4B5563、#374151、#1F2937、#111827

主蓝色（8 种）： #EFF6FF、#DBEAFE、#BFDBFE、#93C5FD、#60A5FA、#3B82F6、#2563EB、#1D4ED8

强调色（每种 7-8 种）：

  • 红色：#FEF2F2... #991B1B（用于错误、破坏性操作）
  • 黄色：#FFFBEB... #92400E（用于警告、新功能）
  • 绿色：#F0FDF4... #166534（用于成功、正向状态）

总计：10 种灰色 + 8 种主色 + 21 种强调色 = 39 种系统化组织的色阶

评论

支持 Markdown