material-design-3-color

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Material Design 3 Color and Dynamic Theming

Material Design 3 色彩与动态主题

Overview

概述

This skill guides the application of Material Design 3 (M3) Expressive color and theming principles to create vibrant, accessible, and emotionally engaging user interfaces.

Keywords: Material Design 3, M3, dynamic color, theming, color palette, Material You, accessibility, color tokens, surface colors, accent colors, fixed accent colors, emphasis colors, contrast levels

本技能指导如何应用Material Design 3（M3）的动态色彩与主题设计原则，打造生动、无障碍且富有情感吸引力的用户界面。

关键词：Material Design 3、M3、动态色彩、主题设计、色彩调色板、Material You、无障碍设计、色彩令牌、表面色彩、强调色、固定强调色、重点色彩、对比度等级

Core Principles

核心原则

Dynamic Color System

动态色彩系统

Material Design 3's color system is built on the concept of dynamic color, allowing interfaces to adapt to user preferences and contexts:

Tonal Palettes: Use five key tonal palettes (Primary, Secondary, Tertiary, Neutral, Neutral Variant) with multiple tones (0-100)
Color Roles: Map 26+ color roles to UI elements (e.g., primary, onPrimary, primaryContainer, onPrimaryContainer)
Adaptive Theming: Support both light and dark themes with appropriate contrast
User Personalization: Allow color schemes to adapt based on user wallpaper or preferences (Material You)
Fixed Accent Colors: Provide color tokens that remain consistent across light and dark themes for brand identity
Emphasis Colors: Use bolder, more vibrant color roles for key UI elements to improve clarity and emotional resonance

Material Design 3的色彩系统基于动态色彩概念构建，允许界面根据用户偏好和场景进行适配：

色调调色板：使用五个关键色调调色板（主色调、次色调、第三色调、中性色、中性变体色），每个调色板包含0-100的多种色调
色彩角色：将26+种色彩角色映射到UI元素（例如primary、onPrimary、primaryContainer、onPrimaryContainer）
自适应主题：支持浅色和深色主题，并确保合适的对比度
用户个性化：允许色彩方案根据用户壁纸或偏好进行适配（Material You）
固定强调色：提供在浅色和深色主题中保持一致的色彩令牌，以强化品牌识别
重点色彩：为关键UI元素使用更醒目、生动的色彩角色，提升清晰度和情感共鸣

Color Palette Structure

色彩调色板结构

When creating color palettes, follow this structure:

Primary Palette (Main brand color):

Primary: Main interactive elements (buttons, active states)
On Primary: Text/icons on primary color
Primary Container: Standout fill color for key components
On Primary Container: Text/icons on primary container
Primary Fixed: Stays constant across light and dark themes
On Primary Fixed: Text/icons on primary fixed
Primary Fixed Dim: Dimmed variant for secondary emphasis on fixed surfaces

Secondary Palette (Complementary accent):

Secondary: Less prominent components
On Secondary: Text/icons on secondary
Secondary Container: Tinted backgrounds
On Secondary Container: Text/icons on secondary container
Secondary Fixed: Stays constant across light and dark themes
On Secondary Fixed: Text/icons on secondary fixed
Secondary Fixed Dim: Dimmed variant for fixed surfaces

Tertiary Palette (Contrasting accent — now a prominent expressive accent for branding and highlights):

Tertiary: Contrasting accents and highlights
On Tertiary: Text/icons on tertiary
Tertiary Container: Input elements
On Tertiary Container: Text/icons on tertiary container
Tertiary Fixed: Stays constant across light and dark themes
On Tertiary Fixed: Text/icons on tertiary fixed
Tertiary Fixed Dim: Dimmed variant for fixed surfaces

Neutral Palettes (Surfaces and backgrounds):

Surface: Default background for components
On Surface: Text on surface
Surface Variant: Alternate surface color
On Surface Variant: Text on surface variant
Surface Dim: Dimmed surface for reduced emphasis
Surface Bright: Brighter surface for increased emphasis
Surface Container Lowest: Lowest-emphasis container surface
Surface Container Low: Low-emphasis container surface
Surface Container: Default container surface
Surface Container High: High-emphasis container surface
Surface Container Highest: Highest-emphasis container surface
Outline: Borders and dividers
Outline Variant: Decorative elements
Inverse Surface: Inverted surface for contrast elements (e.g., snackbars)
Inverse On Surface: Text on inverse surface
Inverse Primary: Primary color used on inverse surfaces

Error/Warning/Success (Feedback colors):

Error, Warning, Success with corresponding "On" colors and containers

创建色彩调色板时，请遵循以下结构：

主色调调色板（品牌主色）：

Primary：主要交互元素（按钮、激活状态）
On Primary：主色调上的文字/图标
Primary Container：关键组件的突出填充色
On Primary Container：主色调容器上的文字/图标
Primary Fixed：在浅色和深色主题中保持不变
On Primary Fixed：Primary Fixed上的文字/图标
Primary Fixed Dim：固定表面上用于次要强调的暗化变体

次色调调色板（互补强调色）：

Secondary：次要组件
On Secondary：次色调上的文字/图标
Secondary Container：着色背景
On Secondary Container：次色调容器上的文字/图标
Secondary Fixed：在浅色和深色主题中保持不变
On Secondary Fixed：Secondary Fixed上的文字/图标
Secondary Fixed Dim：固定表面上的暗化变体

第三色调调色板（对比强调色 — 现为品牌和高亮元素的突出表达性强调色）：

Tertiary：对比强调色和高亮元素
On Tertiary：第三色调上的文字/图标
Tertiary Container：输入元素
On Tertiary Container：第三色调容器上的文字/图标
Tertiary Fixed：在浅色和深色主题中保持不变
On Tertiary Fixed：Tertiary Fixed上的文字/图标
Tertiary Fixed Dim：固定表面上的暗化变体

中性色调调色板（表面和背景）：

Surface：组件的默认背景
On Surface：表面上的文字
Surface Variant：替代表面色
On Surface Variant：替代表面上的文字
Surface Dim：用于降低强调的暗化表面
Surface Bright：用于增强强调的亮面
Surface Container Lowest：最低强调的容器表面
Surface Container Low：低强调的容器表面
Surface Container：默认容器表面
Surface Container High：高强调的容器表面
Surface Container Highest：最高强调的容器表面
Outline：边框和分隔线
Outline Variant：装饰元素
Inverse Surface：用于对比元素的反转表面（如 snackbar）
Inverse On Surface：反转表面上的文字
Inverse Primary：在反转表面上使用的主色调

错误/警告/成功（反馈色彩）：

Error、Warning、Success 以及对应的"On"色彩和容器色

Accessibility Guidelines

无障碍设计指南

Contrast Levels (M3 Expressive standardizes three levels):
- Standard: Default contrast suitable for most users
- Medium: Enhanced contrast for improved readability
- High: Maximum contrast for users with low vision or high-contrast preferences
- All three levels are tokenized for easy implementation
Contrast Requirements:
- Text contrast: Minimum 4.5:1 for body text, 3:1 for large text (WCAG AA)
- Interactive elements: Minimum 3:1 contrast with background
- Use "On" colors to ensure proper contrast
Color Independence:
- Never rely solely on color to convey information
- Use icons, text labels, or patterns alongside color
- Ensure color-blind friendly combinations
Dynamic Range:
- Light theme: Higher tones (90-99) for surfaces, lower tones (10-40) for emphasis
- Dark theme: Lower tones (10-20) for surfaces, higher tones (80-90) for emphasis

对比度等级（M3 标准化了三个等级）：
- 标准：默认对比度，适用于大多数用户
- 中等：增强对比度，提升可读性
- 高：最高对比度，适用于低视力用户或高对比度偏好者
- 三个等级均已令牌化，便于实现
对比度要求：
- 文字对比度：正文文字最低4.5:1，大文字最低3:1（符合WCAG AA标准）
- 交互元素：与背景的最低对比度为3:1
- 使用"On"色彩确保合适的对比度
色彩独立性：
- 切勿仅依赖色彩传达信息
- 搭配图标、文字标签或图案使用色彩
- 确保色彩组合对色弱用户友好
动态范围：
- 浅色主题：表面使用高色调（90-99），强调元素使用低色调（10-40）
- 深色主题：表面使用低色调（10-20），强调元素使用高色调（80-90）

Implementation Guidelines

实现指南

Color Token System

色彩令牌系统

Use CSS custom properties (variables) for all colors. M3 Expressive introduces 26+ color roles:

css

:root {
  /* Primary */
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005D;
  
  /* Primary Fixed (consistent across themes) */
  --md-sys-color-primary-fixed: #EADDFF;
  --md-sys-color-on-primary-fixed: #21005D;
  --md-sys-color-primary-fixed-dim: #D0BCFF;
  --md-sys-color-on-primary-fixed-variant: #4F378B;
  
  /* Secondary */
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1D192B;
  
  /* Secondary Fixed */
  --md-sys-color-secondary-fixed: #E8DEF8;
  --md-sys-color-on-secondary-fixed: #1D192B;
  --md-sys-color-secondary-fixed-dim: #CCC2DC;
  --md-sys-color-on-secondary-fixed-variant: #4A4458;
  
  /* Tertiary */
  --md-sys-color-tertiary: #7D5260;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD8E4;
  --md-sys-color-on-tertiary-container: #31111D;
  
  /* Tertiary Fixed */
  --md-sys-color-tertiary-fixed: #FFD8E4;
  --md-sys-color-on-tertiary-fixed: #31111D;
  --md-sys-color-tertiary-fixed-dim: #EFB8C8;
  --md-sys-color-on-tertiary-fixed-variant: #633B48;
  
  /* Surface and Surface Containers */
  --md-sys-color-surface: #FEF7FF;
  --md-sys-color-on-surface: #1D1B20;
  --md-sys-color-surface-variant: #E7E0EC;
  --md-sys-color-on-surface-variant: #49454F;
  --md-sys-color-surface-dim: #DED8E1;
  --md-sys-color-surface-bright: #FEF7FF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-surface-container-high: #ECE6F0;
  --md-sys-color-surface-container-highest: #E6E0E9;
  
  /* Inverse */
  --md-sys-color-inverse-surface: #322F35;
  --md-sys-color-inverse-on-surface: #F5EFF7;
  --md-sys-color-inverse-primary: #D0BCFF;
  
  /* Outlines */
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;
  
  /* Error */
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;
  
  /* Scrim and Shadow */
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

[data-theme="dark"] {
  /* Primary */
  --md-sys-color-primary: #D0BCFF;
  --md-sys-color-on-primary: #381E72;
  --md-sys-color-primary-container: #4F378B;
  --md-sys-color-on-primary-container: #EADDFF;
  
  /* Primary Fixed (same as light — these don't change) */
  --md-sys-color-primary-fixed: #EADDFF;
  --md-sys-color-on-primary-fixed: #21005D;
  --md-sys-color-primary-fixed-dim: #D0BCFF;
  --md-sys-color-on-primary-fixed-variant: #4F378B;
  
  /* Secondary */
  --md-sys-color-secondary: #CCC2DC;
  --md-sys-color-on-secondary: #332D41;
  --md-sys-color-secondary-container: #4A4458;
  --md-sys-color-on-secondary-container: #E8DEF8;
  
  /* Secondary Fixed (same as light) */
  --md-sys-color-secondary-fixed: #E8DEF8;
  --md-sys-color-on-secondary-fixed: #1D192B;
  --md-sys-color-secondary-fixed-dim: #CCC2DC;
  --md-sys-color-on-secondary-fixed-variant: #4A4458;
  
  /* Tertiary */
  --md-sys-color-tertiary: #EFB8C8;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-tertiary-container: #633B48;
  --md-sys-color-on-tertiary-container: #FFD8E4;
  
  /* Tertiary Fixed (same as light) */
  --md-sys-color-tertiary-fixed: #FFD8E4;
  --md-sys-color-on-tertiary-fixed: #31111D;
  --md-sys-color-tertiary-fixed-dim: #EFB8C8;
  --md-sys-color-on-tertiary-fixed-variant: #633B48;
  
  /* Surface and Surface Containers */
  --md-sys-color-surface: #141218;
  --md-sys-color-on-surface: #E6E0E9;
  --md-sys-color-surface-variant: #49454F;
  --md-sys-color-on-surface-variant: #CAC4D0;
  --md-sys-color-surface-dim: #141218;
  --md-sys-color-surface-bright: #3B383E;
  --md-sys-color-surface-container-lowest: #0F0D13;
  --md-sys-color-surface-container-low: #1D1B20;
  --md-sys-color-surface-container: #211F26;
  --md-sys-color-surface-container-high: #2B2930;
  --md-sys-color-surface-container-highest: #36343B;
  
  /* Inverse */
  --md-sys-color-inverse-surface: #E6E0E9;
  --md-sys-color-inverse-on-surface: #322F35;
  --md-sys-color-inverse-primary: #6750A4;
  
  /* Outlines */
  --md-sys-color-outline: #938F99;
  --md-sys-color-outline-variant: #49454F;
  
  /* Error */
  --md-sys-color-error: #F2B8B5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8C1D18;
  --md-sys-color-on-error-container: #F9DEDC;
  
  /* Scrim and Shadow */
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

为所有色彩使用CSS自定义属性（变量）。M3引入了26+种色彩角色：

css

:root {
  /* Primary */
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005D;
  
  /* Primary Fixed (consistent across themes) */
  --md-sys-color-primary-fixed: #EADDFF;
  --md-sys-color-on-primary-fixed: #21005D;
  --md-sys-color-primary-fixed-dim: #D0BCFF;
  --md-sys-color-on-primary-fixed-variant: #4F378B;
  
  /* Secondary */
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1D192B;
  
  /* Secondary Fixed */
  --md-sys-color-secondary-fixed: #E8DEF8;
  --md-sys-color-on-secondary-fixed: #1D192B;
  --md-sys-color-secondary-fixed-dim: #CCC2DC;
  --md-sys-color-on-secondary-fixed-variant: #4A4458;
  
  /* Tertiary */
  --md-sys-color-tertiary: #7D5260;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD8E4;
  --md-sys-color-on-tertiary-container: #31111D;
  
  /* Tertiary Fixed */
  --md-sys-color-tertiary-fixed: #FFD8E4;
  --md-sys-color-on-tertiary-fixed: #31111D;
  --md-sys-color-tertiary-fixed-dim: #EFB8C8;
  --md-sys-color-on-tertiary-fixed-variant: #633B48;
  
  /* Surface and Surface Containers */
  --md-sys-color-surface: #FEF7FF;
  --md-sys-color-on-surface: #1D1B20;
  --md-sys-color-surface-variant: #E7E0EC;
  --md-sys-color-on-surface-variant: #49454F;
  --md-sys-color-surface-dim: #DED8E1;
  --md-sys-color-surface-bright: #FEF7FF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-surface-container-high: #ECE6F0;
  --md-sys-color-surface-container-highest: #E6E0E9;
  
  /* Inverse */
  --md-sys-color-inverse-surface: #322F35;
  --md-sys-color-inverse-on-surface: #F5EFF7;
  --md-sys-color-inverse-primary: #D0BCFF;
  
  /* Outlines */
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;
  
  /* Error */
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;
  
  /* Scrim and Shadow */
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

[data-theme="dark"] {
  /* Primary */
  --md-sys-color-primary: #D0BCFF;
  --md-sys-color-on-primary: #381E72;
  --md-sys-color-primary-container: #4F378B;
  --md-sys-color-on-primary-container: #EADDFF;
  
  /* Primary Fixed (same as light — these don't change) */
  --md-sys-color-primary-fixed: #EADDFF;
  --md-sys-color-on-primary-fixed: #21005D;
  --md-sys-color-primary-fixed-dim: #D0BCFF;
  --md-sys-color-on-primary-fixed-variant: #4F378B;
  
  /* Secondary */
  --md-sys-color-secondary: #CCC2DC;
  --md-sys-color-on-secondary: #332D41;
  --md-sys-color-secondary-container: #4A4458;
  --md-sys-color-on-secondary-container: #E8DEF8;
  
  /* Secondary Fixed (same as light) */
  --md-sys-color-secondary-fixed: #E8DEF8;
  --md-sys-color-on-secondary-fixed: #1D192B;
  --md-sys-color-secondary-fixed-dim: #CCC2DC;
  --md-sys-color-on-secondary-fixed-variant: #4A4458;
  
  /* Tertiary */
  --md-sys-color-tertiary: #EFB8C8;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-tertiary-container: #633B48;
  --md-sys-color-on-tertiary-container: #FFD8E4;
  
  /* Tertiary Fixed (same as light) */
  --md-sys-color-tertiary-fixed: #FFD8E4;
  --md-sys-color-on-tertiary-fixed: #31111D;
  --md-sys-color-tertiary-fixed-dim: #EFB8C8;
  --md-sys-color-on-tertiary-fixed-variant: #633B48;
  
  /* Surface and Surface Containers */
  --md-sys-color-surface: #141218;
  --md-sys-color-on-surface: #E6E0E9;
  --md-sys-color-surface-variant: #49454F;
  --md-sys-color-on-surface-variant: #CAC4D0;
  --md-sys-color-surface-dim: #141218;
  --md-sys-color-surface-bright: #3B383E;
  --md-sys-color-surface-container-lowest: #0F0D13;
  --md-sys-color-surface-container-low: #1D1B20;
  --md-sys-color-surface-container: #211F26;
  --md-sys-color-surface-container-high: #2B2930;
  --md-sys-color-surface-container-highest: #36343B;
  
  /* Inverse */
  --md-sys-color-inverse-surface: #E6E0E9;
  --md-sys-color-inverse-on-surface: #322F35;
  --md-sys-color-inverse-primary: #6750A4;
  
  /* Outlines */
  --md-sys-color-outline: #938F99;
  --md-sys-color-outline-variant: #49454F;
  
  /* Error */
  --md-sys-color-error: #F2B8B5;
  --md-sys-color-on-error: #601410;
  --md-sys-color-error-container: #8C1D18;
  --md-sys-color-on-error-container: #F9DEDC;
  
  /* Scrim and Shadow */
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

Fixed Accent Colors

固定强调色

Fixed accent colors are new in M3 Expressive. They maintain the same value across light and dark themes, useful for brand identity elements:

css

/* Fixed colors remain identical in both themes */
.brand-banner {
  background-color: var(--md-sys-color-primary-fixed);
  color: var(--md-sys-color-on-primary-fixed);
}

.brand-accent {
  background-color: var(--md-sys-color-tertiary-fixed);
  color: var(--md-sys-color-on-tertiary-fixed);
}

/* Fixed Dim for secondary emphasis on fixed surfaces */
.brand-banner-secondary {
  background-color: var(--md-sys-color-primary-fixed-dim);
  color: var(--md-sys-color-on-primary-fixed);
}

固定强调色是M3中的新特性，在浅色和深色主题中保持相同的值，适用于品牌识别元素：

css

/* Fixed colors remain identical in both themes */
.brand-banner {
  background-color: var(--md-sys-color-primary-fixed);
  color: var(--md-sys-color-on-primary-fixed);
}

.brand-accent {
  background-color: var(--md-sys-color-tertiary-fixed);
  color: var(--md-sys-color-on-tertiary-fixed);
}

/* Fixed Dim for secondary emphasis on fixed surfaces */
.brand-banner-secondary {
  background-color: var(--md-sys-color-primary-fixed-dim);
  color: var(--md-sys-color-on-primary-fixed);
}

Contrast Level System

对比度等级系统

M3 Expressive standardizes three contrast levels for accessibility:

css

/* Standard contrast (default) */
:root {
  --md-sys-color-contrast-level: 0;
}

/* Medium contrast */
[data-contrast="medium"] {
  --md-sys-color-primary: #5640A0;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #7B68BA;
  --md-sys-color-on-primary-container: #FFFFFF;
}

/* High contrast */
[data-contrast="high"] {
  --md-sys-color-primary: #2D0F6E;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #4E3A87;
  --md-sys-color-on-primary-container: #FFFFFF;
}

M3标准化了三个用于无障碍设计的对比度等级：

css

/* Standard contrast (default) */
:root {
  --md-sys-color-contrast-level: 0;
}

/* Medium contrast */
[data-contrast="medium"] {
  --md-sys-color-primary: #5640A0;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #7B68BA;
  --md-sys-color-on-primary-container: #FFFFFF;
}

/* High contrast */
[data-contrast="high"] {
  --md-sys-color-primary: #2D0F6E;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #4E3A87;
  --md-sys-color-on-primary-container: #FFFFFF;
}

Color Application

色彩应用

Interactive Elements:
- Filled buttons: Use primary color with on-primary text
- Outlined buttons: Use outline with primary text
- Text buttons: Use primary text only
- FABs: Use primary-container with on-primary-container
- Button Groups: Use surface-container with on-surface text
Surfaces and Containers:
- Main background: surface
- Elevated components (cards, dialogs): surface-container variants
- Input fields: surface-container-highest
- Snackbars: inverse-surface with inverse-on-surface text
- Bottom sheets: surface-container-low
State Layers:
- Hover: Apply 8% opacity layer of on-surface
- Focus: Apply 12% opacity layer of on-surface
- Pressed: Apply 12% opacity layer of on-surface
- Dragged: Apply 16% opacity layer of on-surface
Emphasis and Brand:
- Use fixed accent colors for brand elements that must remain consistent
- Apply emphasis through color saturation and contrast, not just hue
- Use tertiary as an expressive accent for onboarding, highlights, and branding

交互元素：
- 填充按钮：使用primary色彩搭配on-primary文字
- 轮廓按钮：使用outline搭配primary文字
- 文字按钮：仅使用primary文字
- 浮动操作按钮（FAB）：使用primary-container搭配on-primary-container
- 按钮组：使用surface-container搭配on-surface文字
表面与容器：
- 主背景：surface
- 悬浮组件（卡片、对话框）：surface-container变体
- 输入字段：surface-container-highest
- Snackbar：inverse-surface搭配inverse-on-surface文字
- 底部工作表：surface-container-low
状态层：
- 悬停：应用8%不透明度的on-surface层
- 聚焦：应用12%不透明度的on-surface层
- 按下：应用12%不透明度的on-surface层
- 拖拽：应用16%不透明度的on-surface层
强调与品牌：
- 对必须保持一致的品牌元素使用固定强调色
- 通过色彩饱和度和对比度实现强调，而非仅依赖色调
- 使用tertiary作为表达性强调色，用于引导页、高亮元素和品牌展示

Dynamic Color Generation

动态色彩生成

When generating color schemes from a source color:

Extract Core Hue: Identify the dominant hue from the source (e.g., user wallpaper)
Generate Tonal Palettes: Create five tonal palettes using HCT (Hue, Chroma, Tone) color space
Assign Color Roles: Map generated tones to semantic color roles (26+ roles)
Generate Fixed Variants: Create fixed accent colors that remain constant across themes
Generate Surface Containers: Create the five-level surface container hierarchy
Generate Contrast Variants: Produce standard, medium, and high contrast versions
Validate Contrast: Ensure all role pairs meet accessibility requirements
Support Themes: Generate both light and dark variants

从源色彩生成色彩方案时：

提取核心色调：从源色彩（如用户壁纸）中识别主导色调
生成色调调色板：使用HCT（色调、色度、色阶）色彩空间创建五个色调调色板
分配色彩角色：将生成的色阶映射到语义色彩角色（26+种角色）
生成固定变体：创建在主题间保持一致的固定强调色
生成表面容器：创建五级表面容器层级
生成对比度变体：生成标准、中等和高对比度版本
验证对比度：确保所有角色组合符合无障碍要求
支持主题：生成浅色和深色变体

Best Practices

最佳实践

Semantic Naming: Always use semantic color tokens (e.g.,
```
primary
```
,
```
error
```
) rather than literal colors (e.g.,
```
blue
```
,
```
red
```
)
Consistent Application: Apply colors consistently across all components
Elevation Tinting: Add subtle tint to elevated surfaces using primary color at very low opacity
Color Hierarchy: Use primary for main actions, secondary for less important actions, tertiary for expressive accents
Test Both Themes: Always test in both light and dark modes
Vibrant Expression: In M3 Expressive, embrace richer, more vibrant colors while maintaining accessibility
Context Awareness: Adapt color intensity and palette based on app context and user preferences
Use Fixed Colors for Branding: Apply fixed accent tokens for logo colors or elements that must not change between themes
Support Contrast Levels: Implement standard, medium, and high contrast variants for accessibility
Surface Container Hierarchy: Use the five surface container levels to create clear visual depth

语义命名：始终使用语义色彩令牌（如
```
primary
```
、
```
error
```
）而非字面色彩（如
```
blue
```
、
```
red
```
）
一致应用：在所有组件中一致应用色彩
悬浮着色：为悬浮表面添加主色调低不透明度的微妙着色
色彩层级：主色调用于主要操作，次色调用于次要操作，第三色调用于表达性强调
双主题测试：始终在浅色和深色模式下进行测试
生动表达：在M3中，在保持无障碍的前提下，大胆使用更丰富、生动的色彩
上下文感知：根据应用场景和用户偏好调整色彩强度和调色板
品牌使用固定色彩：为标志或在主题间不能改变的元素应用固定强调令牌
支持对比度等级：实现标准、中等和高对比度变体以满足无障碍需求
表面容器层级：使用五级表面容器创建清晰的视觉深度

Tools and Resources

工具与资源

tokens.css
: Ready-to-use M3 color tokens (light + dark) based on the orange baseline palette (#FF9800), included in this skill's directory. Copy into your project and customize.
examples/color-roles.svg
: Visual reference SVG showing M3 color roles (primary, secondary, tertiary, error), surface container tones, and the primary tonal palette. Use as a stakeholder reference or documentation asset.
material-theme-builder
skill: Use to generate a complete token set from any source color programmatically.
Material Color Utilities: https://github.com/material-foundation/material-color-utilities — HCT color space, palette generation, and dynamic color algorithms
Material Theme Builder: https://material-foundation.github.io/material-theme-builder/ — interactive web tool for generating color schemes
Official M3 CSS tokens: https://github.com/material-foundation/material-tokens — baseline CSS token files (colors, typography, shape, motion, state, elevation)
M3 color system: https://m3.material.io/styles/color/overview
M3 design tokens overview: https://m3.material.io/foundations/design-tokens/overview
Color Contrast Checker: Validate WCAG compliance for all text and interactive elements
HCT Color Space: Leverage for perceptually uniform color generation
CSS Custom Properties: Implement dynamic theming with CSS variables and data attributes

tokens.css
：现成的M3色彩令牌（浅色+深色），基于橙色基线调色板（#FF9800），包含在本技能目录中。复制到项目中即可自定义使用。
examples/color-roles.svg
：展示M3色彩角色（主色调、次色调、第三色调、错误色）、表面容器色阶和主色调调色板的可视化参考SVG。可作为利益相关者参考或文档资产。
material-theme-builder
技能：用于从任意源色彩程序化生成完整的令牌集。
Material Color Utilities：https://github.com/material-foundation/material-color-utilities — HCT色彩空间、调色板生成和动态色彩算法
Material Theme Builder：https://material-foundation.github.io/material-theme-builder/ — 用于生成色彩方案的交互式网页工具
官方M3 CSS令牌：https://github.com/material-foundation/material-tokens — 基线CSS令牌文件（色彩、排版、形状、动效、状态、悬浮）
M3色彩系统：https://m3.material.io/styles/color/overview
M3设计令牌概述：https://m3.material.io/foundations/design-tokens/overview
色彩对比度检查器：验证所有文字和交互元素的WCAG合规性
HCT色彩空间：用于生成感知均匀的色彩
CSS自定义属性：使用CSS变量和数据属性实现动态主题

Common Pitfalls to Avoid

常见误区

❌ Hard-coding color values instead of using tokens
❌ Using only one color for all states (no hover, focus, pressed variations)
❌ Ignoring dark theme or treating it as an afterthought
❌ Insufficient contrast between text and background
❌ Overusing accent colors (they should be used sparingly for emphasis)
❌ Not testing with actual user-generated color schemes
❌ Relying only on color to communicate state or information
❌ Forgetting to define fixed accent colors for brand elements
❌ Not implementing multiple contrast levels for accessibility
❌ Using surface instead of the appropriate surface container variant

❌ 硬编码色彩值而非使用令牌
❌ 所有状态使用单一色彩（无悬停、聚焦、按下变体）
❌ 忽略深色主题或事后才考虑
❌ 文字与背景对比度不足
❌ 过度使用强调色（应仅用于强调）
❌ 未测试实际用户生成的色彩方案
❌ 仅依赖色彩传达状态或信息
❌ 忘记为品牌元素定义固定强调色
❌ 未实现多对比度等级以满足无障碍需求
❌ 使用surface而非合适的surface-container变体