build-color-palette

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: Build Color Palette

Skill：构建配色方案

Purpose

目的

Create a comprehensive, systematic color palette with sufficient shades to build realistic interfaces (8-10 greys, 5-10 primary shades, 5-10 accent shades).

创建一套完整、系统化的配色方案，包含足够的色调以构建真实界面（8-10种灰色调、5-10种主色调、5-10种强调色调）。

Type

类型

Generative + Evaluative

生成型 + 评估型

Input

输入

Brand color(s) or design mood/intent
UI complexity (simple landing page vs. complex dashboard)
Required semantic meanings (success, error, warning, info)
Need for categorical colors (charts, calendars, tags)

品牌色或设计风格/意图
UI复杂度（简单着陆页 vs 复杂仪表盘）
所需语义含义（成功、错误、警告、信息）
是否需要分类色彩（图表、日历、标签）

Output

输出

Color palette specification with multiple shades per color
Role assignment for each shade
Usage guidelines
Pass/Fail assessment of existing palette

包含每种颜色多色调的配色方案规范
每个色调的角色分配
使用指南
现有配色方案的通过/不通过评估

Transformation Performed

执行的转换

Maps functional needs to a comprehensive palette organized into three categories (greys, primary, accents), each with 5-10 distinct shades.

将功能需求映射到一套分为三类（灰色、主色、强调色）的完整配色方案，每类包含5-10种不同色调。

Decision Criteria

判定标准

PASS (Good Color Palette)

通过（优秀配色方案）

Greys: 8-10 shades - For text, backgrounds, panels, form controls (majority of UI)
Primary: 5-10 shades - One or two core colors for primary actions, active navigation
Accent: 5-10 shades each - For semantic states (red, yellow, green), new features, categorization
Systematic shades: Each color has light to dark variants defined upfront
Clear hierarchy: Primary color defines overall look; accents used sparingly
Sufficient contrast: All text meets WCAG AA (4.5:1 for normal, 3:1 for large)
Not using opacity: Explicit hex values for all shades

灰色：8-10种色调 - 用于文本、背景、面板、表单控件（UI的主要部分）
主色：5-10种色调 - 一种或两种核心颜色，用于主要操作、活跃导航
强调色：每种5-10种色调 - 用于语义状态（红、黄、绿）、新功能、分类
系统化色调：每种颜色预先定义从浅到深的变体
清晰层级：主色定义整体风格；强调色少量使用
足够对比度：所有文本符合WCAG AA标准（普通文本4.5:1，大文本3:1）
不使用透明度：所有色调使用明确的十六进制值

FAIL (Poor Color Palette)

不通过（糟糕配色方案）

Too few greys (3-4 shades leading to compromises)
Missing shades of primary color (can't create hover states, subtle backgrounds)
Not enough accent colors for semantic states and categorization
Using opacity (rgba) instead of defined shades (inconsistency)
Missing systematic shade progression (arbitrary light/dark variants)
Insufficient contrast for accessibility

灰色调太少（3-4种，导致妥协）
缺少主色调的变体（无法创建悬停状态、柔和背景）
语义状态和分类的强调色不足
使用透明度（rgba）而非定义好的色调（不一致）
缺少系统化的色调递进（随意的深浅变体）
无障碍对比度不足

The Palette Structure

配色方案结构

Greys (8-10 shades)

灰色调（8-10种）

The majority of your UI is grey. You need more than you think.

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

Start with dark grey (not true black) and work up to white in steady increments.

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

从深灰色（而非纯黑）开始，逐步递增到白色。

Primary Colors (5-10 shades)

主色调（5-10种）

One or two colors that define the overall look of your site.

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)

一种或两种定义网站整体风格的颜色。

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)

Accent Colors (5-10 shades each)

强调色调（每种5-10种）

Used sparingly to grab attention or communicate meaning.

Color	Use Case
Red	Destructive actions, errors, warnings
Yellow/Amber	New features, caution, highlights
Green	Success, positive trends, confirmation
Teal/Pink/Purple	Feature highlights, categorization, calendars

Each accent needs 5-10 shades just like primary colors.

少量使用以吸引注意力或传达含义。

颜色	使用场景
红色	破坏性操作、错误、警告
黄色/琥珀色	新功能、提醒、高亮
绿色	成功、积极趋势、确认
蓝绿色/粉色/紫色	功能高亮、分类、日历

每种强调色需要和主色一样有5-10种色调。

Visual/UX Signals Used

使用的视觉/UX信号

Shade progression: Steady increments from light to dark
Grey dominance: Greys are the foundation; colors accent
Semantic meaning: Red = danger, Green = success, Yellow = warning/feature
Contrast ratios: Higher contrast = more importance or readability
Sparingly used: Primary and accents used intentionally, not everywhere

色调递进：从浅到深的稳定递增
灰色主导：灰色是基础；彩色用于强调
语义含义：红色=危险，绿色=成功，黄色=警告/新功能
对比度比例：对比度越高=重要性或可读性越强
少量使用：主色和强调色需有意使用，而非随处可见

Common Failure Modes

常见失败模式

Failure	Description	Fix
5-Color Generator	Using only 5 hex codes for entire UI	Build comprehensive palette with 8-10 greys, 5-10 primary shades, 5-10 accent shades
Too Few Greys	3-4 grey shades leading to compromises	Expand to 8-10 greys from near-white to near-black
Opacity for Shades	Using `rgba()` to create lighter/darker	Define explicit hex shades upfront for consistency
Missing Hover States	No lighter/darker variants for interactions	Each interactive color needs 5-10 shades
Missing Semantic Colors	Only brand colors, no red/yellow/green	Add accent colors for errors, warnings, success
Too Few Accent Shades	Only one shade of red/green/yellow	Each accent needs 5-10 shades for flexibility
True Black Text	Using #000000 (harsh)	Start with #111827 or #1F2937

失败类型	描述	修复方案
5色生成器	仅用5个十六进制代码构建整个UI	创建包含8-10种灰色调、5-10种主色调、5-10种强调色调的完整配色方案
灰色调太少	3-4种灰色调导致妥协	扩展为8-10种从近白到近黑的灰色调
用透明度生成色调	使用 `rgba()` 创建深浅变体	预先定义明确的十六进制色调以保证一致性
缺少悬停状态	没有用于交互的深浅变体	每种交互色需要5-10种色调
缺少语义色彩	只有品牌色，没有红/黄/绿	添加用于错误、警告、成功的强调色
强调色调太少	红/绿/黄仅有一种色调	每种强调色需要5-10种色调以保证灵活性
纯黑文本	使用#000000（刺眼）	从#111827或#1F2937开始

Prerequisites

前置条件

Brand guidelines or base color
Understanding of UI states (errors, success, hover, etc.)
Knowledge of categorical needs (charts, tags, etc.)

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

Dependencies

依赖项

```
establish-visual-hierarchy
```
(colors support hierarchy)
```
manage-color-contrast
```
(accessibility requirement)

```
establish-visual-hierarchy
```
（色彩支持层级）
```
manage-color-contrast
```
（无障碍要求）

Refactoring UI References

Refactoring UI参考

"You need more colors than you think"
"Define your shades up front"
"Greys are the majority of your UI"
"Don't use opacity to create lighter colors"
"Build a comprehensive palette, not 5 hex codes"

"你需要的颜色比想象中更多"
"预先定义你的色调"
"灰色是UI的主要部分"
"不要用透明度创建浅色"
"构建完整的配色方案，而非5个十六进制代码"

Shade Definition Method

色调定义方法

For each color, define shades by adjusting lightness in HSL:

Ultra-light: 95-98% lightness (backgrounds)
Light: 80-90% lightness (hover backgrounds)
Base: 45-55% lightness (buttons, links)
Dark: 20-35% lightness (text, emphasis)
Very dark: 10-15% lightness (headings)

对于每种颜色，通过调整HSL中的亮度来定义色调：

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

Example Assessment

示例评估

Input: Palette with only: Brand Blue #0066FF, Light Blue #E6F2FF, White, Grey #999999, Black

Evaluation: FAIL

Only 2 blue shades (need 5-10)
Only 1 grey (need 8-10)
Missing semantic colors (red, yellow, green)
Missing accent shades

Recommendation: Build comprehensive palette:

Greys (10): #F9FAFB, #F3F4F6, #E5E7EB, #D1D5DB, #9CA3AF, #6B7280, #4B5563, #374151, #1F2937, #111827

Primary Blue (8): #EFF6FF, #DBEAFE, #BFDBFE, #93C5FD, #60A5FA, #3B82F6, #2563EB, #1D4ED8

Accents (7-8 each):

Red: #FEF2F2... #991B1B (for errors, destructive)
Yellow: #FFFBEB... #92400E (for warnings, new features)
Green: #F0FDF4... #166534 (for success, positive)

Total: 10 greys + 8 primary + 21 accents = 39 shades organized systematically

输入： 仅包含以下颜色的配色方案：品牌蓝#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种系统化组织的色调