color-system

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Color System

色彩系统

Overview

概述

Color is one of the most powerful tools in design. It communicates emotion, establishes brand identity, guides attention, and conveys meaning. Yet color is also one of the most misused design elements.

This skill teaches you to think about color systematically: choosing colors with intention, ensuring accessibility, supporting theming and dark mode, and using color to guide users without overwhelming them.

色彩是设计中最强大的工具之一，它传递情感、塑造品牌形象、引导注意力并表达含义。然而，色彩也是最常被误用的设计元素之一。

本技能将教你系统性地思考色彩：有目的地选择色彩、确保无障碍性、支持主题定制与深色模式，以及运用色彩引导用户而不造成视觉负担。

Core Methodology: Color Harmony

核心方法：色彩和谐

Rather than choosing colors randomly, use color theory to create harmonious palettes that feel intentional and professional.

不要随机选择色彩，而是运用色彩理论打造和谐的调色板，让设计显得更具目的性与专业性。

Color Harmony Techniques

色彩和谐技巧

1. Monochromatic Use different tints, shades, and tones of a single hue.

Primary: #3B82F6
Tints (lighter): #93C5FD, #DBEAFE, #EFF6FF
Shades (darker): #1D4ED8, #1E40AF, #0C2340

Use Case: Minimalist, sophisticated designs. Good for focusing attention.

2. Analogous Use colors that are adjacent on the color wheel (30-60 degrees apart).

Primary: #3B82F6 (blue)
Secondary: #8B5CF6 (purple) - 60° away
Tertiary: #06B6D4 (cyan) - 60° away

Use Case: Harmonious, pleasing designs. Good for creating unity.

3. Complementary Use colors that are opposite on the color wheel (180 degrees apart).

Primary: #3B82F6 (blue)
Complementary: #F59E0B (amber)

Use Case: High contrast, energetic designs. Use sparingly to avoid visual chaos.

4. Triadic Use three colors evenly spaced on the color wheel (120 degrees apart).

Primary: #3B82F6 (blue)
Secondary: #F59E0B (amber)
Tertiary: #10B981 (green)

Use Case: Vibrant, balanced designs. Good for applications with multiple categories.

1. 单色法 使用单一色调的不同明度、暗度和色调变体。

Primary: #3B82F6
Tints (lighter): #93C5FD, #DBEAFE, #EFF6FF
Shades (darker): #1D4ED8, #1E40AF, #0C2340

适用场景： 极简、精致的设计，有助于聚焦用户注意力。

2. 邻近色法 使用色轮上相邻的颜色（间隔30-60度）。

Primary: #3B82F6 (blue)
Secondary: #8B5CF6 (purple) - 60° away
Tertiary: #06B6D4 (cyan) - 60° away

适用场景： 和谐、悦目的设计，有助于营造统一感。

3. 互补色法 使用色轮上相对的颜色（间隔180度）。

Primary: #3B82F6 (blue)
Complementary: #F59E0B (amber)

适用场景： 高对比度、充满活力的设计，需谨慎使用以避免视觉混乱。

4. 三色法 使用色轮上均匀分布的三种颜色（间隔120度）。

Primary: #3B82F6 (blue)
Secondary: #F59E0B (amber)
Tertiary: #10B981 (green)

适用场景： 鲜艳、平衡的设计，适用于包含多个类别的应用。

Choosing Your Primary Color

选择主色调

Your primary color is the foundation of your color system. Choose it based on:

Brand Identity — What emotion do you want to convey?
Accessibility — Does it have good contrast with white and black?
Versatility — Does it work well with other colors?
Distinctiveness — Is it unique enough to differentiate your brand?

Color Psychology:

Blue — Trust, calm, professional (tech, finance)
Green — Growth, health, nature (health, sustainability)
Red — Energy, urgency, passion (sales, alerts)
Purple — Creativity, luxury, mystery (creative, premium)
Orange — Warmth, enthusiasm, friendly (consumer, social)
Yellow — Optimism, attention, caution (warning, energy)

主色调是色彩系统的基础，选择时需考虑以下因素：

品牌形象 — 你想要传递何种情感？
无障碍性 — 它与白色和黑色的对比度是否达标？
通用性 — 它能否与其他颜色良好搭配？
独特性 — 它是否足够独特以区分你的品牌？

色彩心理学：

蓝色 — 信任、冷静、专业（科技、金融领域）
绿色 — 成长、健康、自然（健康、可持续发展领域）
红色 — 活力、紧迫、热情（促销、提醒场景）
紫色 — 创意、奢华、神秘（创意、高端领域）
橙色 — 温暖、热情、友好（消费、社交领域）
黄色 — 乐观、醒目、警示（警告、能量相关场景）

Building a Color System

构建色彩系统

Layer 1: Global Colors

第一层：全局色彩

Define your base colors:

javascript

module.exports = {
  theme: {
    colors: {
      // Primary color with full spectrum
      primary: {
        50: '#EFF6FF',
        100: '#DBEAFE',
        200: '#BFDBFE',
        300: '#93C5FD',
        400: '#60A5FA',
        500: '#3B82F6', // Base
        600: '#2563EB',
        700: '#1D4ED8',
        800: '#1E40AF',
        900: '#1E3A8A',
        950: '#0C2340',
      },
      
      // Secondary color
      secondary: {
        50: '#F3E8FF',
        500: '#8B5CF6',
        950: '#2E1065',
      },
      
      // Semantic colors
      success: '#10B981',
      warning: '#F59E0B',
      error: '#EF4444',
      info: '#06B6D4',
      
      // Neutral colors (grayscale)
      neutral: {
        50: '#F9FAFB',
        100: '#F3F4F6',
        200: '#E5E7EB',
        300: '#D1D5DB',
        400: '#9CA3AF',
        500: '#6B7280',
        600: '#4B5563',
        700: '#374151',
        800: '#1F2937',
        900: '#111827',
        950: '#030712',
      },
    },
  },
};

定义基础色彩：

javascript

module.exports = {
  theme: {
    colors: {
      // Primary color with full spectrum
      primary: {
        50: '#EFF6FF',
        100: '#DBEAFE',
        200: '#BFDBFE',
        300: '#93C5FD',
        400: '#60A5FA',
        500: '#3B82F6', // Base
        600: '#2563EB',
        700: '#1D4ED8',
        800: '#1E40AF',
        900: '#1E3A8A',
        950: '#0C2340',
      },
      
      // Secondary color
      secondary: {
        50: '#F3E8FF',
        500: '#8B5CF6',
        950: '#2E1065',
      },
      
      // Semantic colors
      success: '#10B981',
      warning: '#F59E0B',
      error: '#EF4444',
      info: '#06B6D4',
      
      // Neutral colors (grayscale)
      neutral: {
        50: '#F9FAFB',
        100: '#F3F4F6',
        200: '#E5E7EB',
        300: '#D1D5DB',
        400: '#9CA3AF',
        500: '#6B7280',
        600: '#4B5563',
        700: '#374151',
        800: '#1F2937',
        900: '#111827',
        950: '#030712',
      },
    },
  },
};

Layer 2: Semantic Colors

第二层：语义色彩

Assign meaning to global colors based on context:

javascript

module.exports = {
  theme: {
    colors: {
      // Semantic colors (light mode)
      'bg-primary': 'var(--color-bg-primary)', // {neutral.50}
      'bg-secondary': 'var(--color-bg-secondary)', // {neutral.100}
      'bg-tertiary': 'var(--color-bg-tertiary)', // {neutral.200}
      
      'text-primary': 'var(--color-text-primary)', // {neutral.950}
      'text-secondary': 'var(--color-text-secondary)', // {neutral.600}
      'text-tertiary': 'var(--color-text-tertiary)', // {neutral.500}
      'text-inverse': 'var(--color-text-inverse)', // {neutral.50}
      
      'border-primary': 'var(--color-border-primary)', // {neutral.200}
      'border-secondary': 'var(--color-border-secondary)', // {neutral.300}
      
      'interactive-primary': 'var(--color-interactive-primary)', // {primary.500}
      'interactive-hover': 'var(--color-interactive-hover)', // {primary.600}
      'interactive-active': 'var(--color-interactive-active)', // {primary.700}
      'interactive-disabled': 'var(--color-interactive-disabled)', // {neutral.300}
    },
  },
};

根据上下文为全局色彩赋予含义：

javascript

module.exports = {
  theme: {
    colors: {
      // Semantic colors (light mode)
      'bg-primary': 'var(--color-bg-primary)', // {neutral.50}
      'bg-secondary': 'var(--color-bg-secondary)', // {neutral.100}
      'bg-tertiary': 'var(--color-bg-tertiary)', // {neutral.200}
      
      'text-primary': 'var(--color-text-primary)', // {neutral.950}
      'text-secondary': 'var(--color-text-secondary)', // {neutral.600}
      'text-tertiary': 'var(--color-text-tertiary)', // {neutral.500}
      'text-inverse': 'var(--color-text-inverse)', // {neutral.50}
      
      'border-primary': 'var(--color-border-primary)', // {neutral.200}
      'border-secondary': 'var(--color-border-secondary)', // {neutral.300}
      
      'interactive-primary': 'var(--color-interactive-primary)', // {primary.500}
      'interactive-hover': 'var(--color-interactive-hover)', // {primary.600}
      'interactive-active': 'var(--color-interactive-active)', // {primary.700}
      'interactive-disabled': 'var(--color-interactive-disabled)', // {neutral.300}
    },
  },
};

Layer 3: Component Colors

第三层：组件色彩

Define colors for specific components:

javascript

module.exports = {
  theme: {
    colors: {
      // Button colors
      'button-primary-bg': 'var(--color-interactive-primary)',
      'button-primary-text': 'var(--color-text-inverse)',
      'button-secondary-bg': 'var(--color-bg-secondary)',
      'button-secondary-text': 'var(--color-text-primary)',
      
      // Card colors
      'card-bg': 'var(--color-bg-primary)',
      'card-border': 'var(--color-border-primary)',
      
      // Input colors
      'input-bg': 'var(--color-bg-primary)',
      'input-border': 'var(--color-border-primary)',
      'input-text': 'var(--color-text-primary)',
    },
  },
};

为特定组件定义色彩：

javascript

module.exports = {
  theme: {
    colors: {
      // Button colors
      'button-primary-bg': 'var(--color-interactive-primary)',
      'button-primary-text': 'var(--color-text-inverse)',
      'button-secondary-bg': 'var(--color-bg-secondary)',
      'button-secondary-text': 'var(--color-text-primary)',
      
      // Card colors
      'card-bg': 'var(--color-bg-primary)',
      'card-border': 'var(--color-border-primary)',
      
      // Input colors
      'input-bg': 'var(--color-bg-primary)',
      'input-border': 'var(--color-border-primary)',
      'input-text': 'var(--color-text-primary)',
    },
  },
};

Accessibility and Contrast

无障碍性与对比度

WCAG Contrast Requirements

WCAG对比度要求

Level	Normal Text	Large Text	Graphics
AA	4.5:1	3:1	3:1
AAA	7:1	4.5:1	3:1

Large text is defined as 18px+ (or 14px+ if bold).

等级	常规文本	大文本	图形
AA	4.5:1	3:1	3:1
AAA	7:1	4.5:1	3:1

大文本定义为18px及以上（或加粗的14px及以上）。

Checking Contrast

检查对比度

Use tools like WebAIM Contrast Checker or Polished to verify contrast:

javascript

// Using Polished library
import { readableColor } from 'polished';

const backgroundColor = '#3B82F6';
const textColor = readableColor(backgroundColor); // Returns #FFFFFF or #000000

使用WebAIM Contrast Checker或Polished等工具验证对比度：

javascript

// Using Polished library
import { readableColor } from 'polished';

const backgroundColor = '#3B82F6';
const textColor = readableColor(backgroundColor); // Returns #FFFFFF or #000000

Color-Blind Friendly Palettes

色弱友好型调色板

Design for color-blind users by:

Not relying on color alone — Use patterns, icons, or text labels
Using sufficient contrast — Ensures visibility regardless of color perception
Testing with color-blind simulators — Use tools like Coblis or Color Oracle

Color-Blind Friendly Palette:

Primary: #0173B2 (blue, visible to all)
Secondary: #DE8F05 (orange, visible to all)
Accent: #CC78BC (purple, visible to most)
Neutral: #CA9161 (brown, visible to all)

为色弱用户设计时需注意：

不单独依赖色彩 — 使用图案、图标或文本标签辅助
确保足够对比度 — 无论色彩感知如何，都能保证可见性
使用色弱模拟器测试 — 使用Coblis或Color Oracle等工具

色弱友好型调色板示例：

Primary: #0173B2 (blue, visible to all)
Secondary: #DE8F05 (orange, visible to all)
Accent: #CC78BC (purple, visible to most)
Neutral: #CA9161 (brown, visible to all)

Dark Mode

深色模式

Implementing Dark Mode

实现深色模式

Define semantic colors that change based on color scheme:

css

/* Light mode (default) */
:root {
  --color-bg-primary: #F9FAFB;
  --color-bg-secondary: #F3F4F6;
  --color-text-primary: #030712;
  --color-text-secondary: #4B5563;
  --color-border-primary: #E5E7EB;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #030712;
    --color-bg-secondary: #111827;
    --color-text-primary: #F9FAFB;
    --color-text-secondary: #D1D5DB;
    --color-border-primary: #374151;
  }
}

定义随配色方案变化的语义色彩：

css

/* Light mode (default) */
:root {
  --color-bg-primary: #F9FAFB;
  --color-bg-secondary: #F3F4F6;
  --color-text-primary: #030712;
  --color-text-secondary: #4B5563;
  --color-border-primary: #E5E7EB;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #030712;
    --color-bg-secondary: #111827;
    --color-text-primary: #F9FAFB;
    --color-text-secondary: #D1D5DB;
    --color-border-primary: #374151;
  }
}

Dark Mode Best Practices

深色模式最佳实践

Don't use pure black — Use dark grays (#111827 instead of #000000)
Reduce saturation — Colors feel too bright in dark mode
Increase contrast — Text needs more contrast on dark backgrounds
Test readability — Dark mode can hide readability issues
Respect user preference — Use
```
prefers-color-scheme
```
media query

不使用纯黑色 — 使用深灰色（如#111827而非#000000）
降低饱和度 — 深色模式下色彩会显得过于明亮
提高对比度 — 深色背景上的文本需要更高的对比度
测试可读性 — 深色模式可能会隐藏可读性问题
尊重用户偏好 — 使用
```
prefers-color-scheme
```
媒体查询

Common Color Patterns

常见色彩模式

Pattern 1: Status Colors

模式1：状态色彩

javascript

colors: {
  'status-success': '#10B981',
  'status-warning': '#F59E0B',
  'status-error': '#EF4444',
  'status-info': '#06B6D4',
}

javascript

colors: {
  'status-success': '#10B981',
  'status-warning': '#F59E0B',
  'status-error': '#EF4444',
  'status-info': '#06B6D4',
}

Pattern 2: Interactive States

模式2：交互状态

javascript

colors: {
  'interactive-default': '#3B82F6',
  'interactive-hover': '#2563EB',
  'interactive-active': '#1D4ED8',
  'interactive-disabled': '#D1D5DB',
  'interactive-focus': '#3B82F6', // with outline
}

javascript

colors: {
  'interactive-default': '#3B82F6',
  'interactive-hover': '#2563EB',
  'interactive-active': '#1D4ED8',
  'interactive-disabled': '#D1D5DB',
  'interactive-focus': '#3B82F6', // with outline
}

Pattern 3: Elevation

模式3：层级色彩

javascript

colors: {
  'elevation-1': '#FFFFFF', // Highest
  'elevation-2': '#F9FAFB',
  'elevation-3': '#F3F4F6',
  'elevation-4': '#E5E7EB', // Lowest
}

javascript

colors: {
  'elevation-1': '#FFFFFF', // Highest
  'elevation-2': '#F9FAFB',
  'elevation-3': '#F3F4F6',
  'elevation-4': '#E5E7EB', // Lowest
}

How to Use This Skill with Claude Code

如何结合Claude Code使用本技能

Create a Color System

创建色彩系统

"I'm using the color-system skill. Can you create a color system for me?
- Primary color: #3B82F6 (blue)
- Brand personality: Modern, professional, trustworthy
- Include: primary, secondary, semantic, and component colors
- Ensure WCAG AA contrast compliance
- Support both light and dark modes
- Provide Tailwind config"

"I'm using the color-system skill. Can you create a color system for me?
- Primary color: #3B82F6 (blue)
- Brand personality: Modern, professional, trustworthy
- Include: primary, secondary, semantic, and component colors
- Ensure WCAG AA contrast compliance
- Support both light and dark modes
- Provide Tailwind config"

Audit Your Color System

审核色彩系统

"Can you audit my current color system?
- Are my colors harmonious?
- Do all text/background combinations meet WCAG AA?
- Are my colors used consistently?
- Is my dark mode accessible?
- Are my colors color-blind friendly?
- What improvements would you suggest?"

"Can you audit my current color system?
- Are my colors harmonious?
- Do all text/background combinations meet WCAG AA?
- Are my colors used consistently?
- Is my dark mode accessible?
- Are my colors color-blind friendly?
- What improvements would you suggest?"

Create Color-Blind Friendly Palette

创建色弱友好型调色板

"Can you create a color-blind friendly palette?
- Primary color: blue
- Secondary color: orange
- Accent color: purple
- Ensure all combinations are visible to color-blind users
- Provide contrast ratios for verification"

"Can you create a color-blind friendly palette?
- Primary color: blue
- Secondary color: orange
- Accent color: purple
- Ensure all combinations are visible to color-blind users
- Provide contrast ratios for verification"

Implement Dark Mode

实现深色模式

"Can you help me implement dark mode?
- Define semantic color tokens for light and dark modes
- Ensure contrast is sufficient in both modes
- Provide CSS variables and Tailwind config
- Test readability in both modes"

"Can you help me implement dark mode?
- Define semantic color tokens for light and dark modes
- Ensure contrast is sufficient in both modes
- Provide CSS variables and Tailwind config
- Test readability in both modes"

Design Critique: Evaluating Your Color System

设计评审：评估你的色彩系统

Claude Code can critique your colors:

"Can you evaluate my color system?
- Are my colors harmonious?
- Do they support my brand personality?
- Are all contrast ratios sufficient?
- Is my dark mode accessible?
- Are my colors color-blind friendly?
- What's one thing I could improve immediately?"

Claude Code可以为你的色彩提供评审：

"Can you evaluate my color system?
- Are my colors harmonious?
- Do they support my brand personality?
- Are all contrast ratios sufficient?
- Is my dark mode accessible?
- Are my colors color-blind friendly?
- What's one thing I could improve immediately?"

Integration with Other Skills

与其他技能的集成

design-foundation — Color tokens and system
typography-system — Text color and contrast
component-architecture — Component colors
accessibility-excellence — Contrast ratios, color-blind friendly
interaction-design — Color in animations and states

design-foundation — 色彩令牌与系统
typography-system — 文本色彩与对比度
component-architecture — 组件色彩
accessibility-excellence — 对比度比例、色弱友好设计
interaction-design — 动画与状态中的色彩运用

Key Principles

核心原则

1. Color Harmony Matters Use color theory to create palettes that feel intentional and professional.

2. Accessibility is Non-Negotiable All text/background combinations must meet WCAG AA contrast requirements.

3. Semantic Colors Enable Flexibility By separating global, semantic, and component colors, you can support theming and dark mode.

4. Consistency Builds Trust Use colors consistently across your product to build trust and reduce cognitive load.

5. Color-Blind Friendly Design Benefits Everyone Designing for color-blind users results in better designs for everyone.

1. 色彩和谐至关重要 运用色彩理论打造具有目的性与专业性的调色板。

2. 无障碍性是硬性要求 所有文本与背景的组合必须满足WCAG AA对比度要求。

3. 语义色彩提升灵活性 通过分离全局色彩、语义色彩与组件色彩，可支持主题定制与深色模式。

4. 一致性建立信任 在产品中一致地使用色彩，以建立用户信任并降低认知负荷。

5. 色弱友好设计惠及所有人 为色弱用户设计的同时，也能为所有用户带来更优质的设计。

color-system

Original

Translation

Color System

色彩系统

Overview

概述

Core Methodology: Color Harmony

核心方法：色彩和谐

Color Harmony Techniques

色彩和谐技巧

Choosing Your Primary Color

选择主色调

Building a Color System

构建色彩系统

Layer 1: Global Colors

第一层：全局色彩

Layer 2: Semantic Colors

第二层：语义色彩

Layer 3: Component Colors

第三层：组件色彩

Accessibility and Contrast

无障碍性与对比度

WCAG Contrast Requirements

WCAG对比度要求

Checking Contrast

检查对比度

Color-Blind Friendly Palettes

色弱友好型调色板

Dark Mode

深色模式

Implementing Dark Mode

实现深色模式

Dark Mode Best Practices

深色模式最佳实践

Common Color Patterns

常见色彩模式

Pattern 1: Status Colors

模式1：状态色彩

Pattern 2: Interactive States

模式2：交互状态

Pattern 3: Elevation

模式3：层级色彩

How to Use This Skill with Claude Code

如何结合Claude Code使用本技能

Create a Color System

创建色彩系统

Audit Your Color System

审核色彩系统

Create Color-Blind Friendly Palette

创建色弱友好型调色板

Implement Dark Mode

实现深色模式

Design Critique: Evaluating Your Color System

设计评审：评估你的色彩系统

Integration with Other Skills

与其他技能的集成

Key Principles

核心原则

Checklist: Is Your Color System Ready?

检查清单：你的色彩系统是否就绪？