material-design-3-color

Name: material-design-3-color
Author: shelbeely

github.com/shelbeely设计与 UI536 次安装36 周前更新

代码仓库

关于 material-design-3-color

为 UI 设计与开发提供 Material Design 3 Expressive 色彩和主题实践指南，涵盖动态配色、语义令牌及无障碍对比度，并附 CSS 令牌和示例资源。

主要功能

01五组色调调色板与语义色彩角色
02浅色与深色主题建议
03固定强调色和表面容器层级
04标准、中、高三档对比度指导
05CSS 色彩令牌及示例资源

适用场景

01为界面建立一致的 M3 色彩令牌
02根据来源颜色规划动态配色
03检查文本和交互元素的对比度

安装

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

$npx skills add https://github.com/shelbeely/shelbeely-agent-skills --skill material-design-3-color

安装后在 Claude Code 中输入/material-design-3-color确认已加载。

附带文件examples/color-roles.svgtokens.css

详细介绍

Material Design 3 色彩与动态主题

概述

本技能将指导你运用 Material Design 3（M3）的表现力色彩与主题原则，打造鲜明、易于访问且能引发情感共鸣的用户界面。

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

核心原则

动态色彩系统

Material Design 3 的色彩系统基于动态色彩的概念构建，使界面能够适应用户偏好和使用情境：

色调调色板：使用五种关键色调调色板（主色、次色、第三色、中性色、中性变体），每种调色板包含多个色调（0-100）
颜色角色：将 26 种以上的颜色角色映射到 UI 元素（例如 primary、onPrimary、primaryContainer、onPrimaryContainer）
自适应主题：支持浅色和深色主题，并提供适当的对比度
用户个性化：允许配色方案根据用户壁纸或偏好进行调整（Material You）
固定强调色：提供在浅色和深色主题中保持一致的颜色令牌，以维护品牌形象
强调颜色：对关键 UI 元素使用更大胆、更鲜明的颜色角色，以提高明晰度并增强情感共鸣

调色板结构

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

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

主色：主要交互元素（按钮、激活状态）
主色上的颜色：主色上的文本/图标
主色容器：关键组件醒目的填充色
主色容器上的颜色：主色容器上的文本/图标
固定主色：在浅色和深色主题中保持不变
固定主色上的颜色：固定主色上的文本/图标
固定主色暗色变体：用于固定表面次级强调的暗色变体

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

次色：不那么突出的组件
次色上的颜色：次色上的文本/图标
次色容器：带色调的背景
次色容器上的颜色：次色容器上的文本/图标
固定次色：在浅色和深色主题中保持不变
固定次色上的颜色：固定次色上的文本/图标
固定次色暗色变体：用于固定表面的暗色变体

第三色调色板（对比强调色——如今是品牌塑造和突出显示中醒目的表现性强调色）：

第三色：对比强调色和突出色
第三色上的颜色：第三色上的文本/图标
第三色容器：输入元素
第三色容器上的颜色：第三色容器上的文本/图标
固定第四色：在浅色和深色主题中保持不变
固定第四色上的颜色：固定第四色上的文本/图标
固定第四色暗色变体：用于固定表面的暗色变体

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

表面：组件的默认背景
表面上的颜色：表面上的文本
表面变体：备用表面颜色
表面变体上的颜色：表面变体上的文本
暗色表面：用于降低强调程度的暗色表面
亮色表面：用于提高强调程度的亮色表面
最低层级表面容器：强调程度最低的容器表面
低层级表面容器：强调程度较低的容器表面
表面容器：默认容器表面
高层级表面容器：强调程度较高的容器表面
最高层级表面容器：强调程度最高的容器表面
轮廓：边框和分隔线
轮廓变体：装饰元素
反转表面：用于对比元素（例如，Snackbars）的反转表面
反转表面上的颜色：反转表面上的文本
反转主色：用于反转表面的主色

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

错误、警告、成功，以及对应的“其上”颜色和容器

无障碍指南

对比度级别（M3 Expressive 标准化了三个级别）：
- 标准：适用于大多数用户的默认对比度
- 中等：增强对比度，提升可读性
- 高：为低视力用户或偏好高对比度的用户提供最大对比度
- 三个级别均已令牌化，便于实现
对比度要求：
- 文本对比度：正文文本至少为 4.5:1，大号文本至少为 3:1（WCAG AA）
- 交互元素：与背景的对比度至少为 3:1
- 使用 “On” 颜色确保对比度适当
颜色独立性：
- 绝不要仅依赖颜色传达信息
- 除颜色外，还要搭配图标、文本标签或图案
- 确保颜色组合对色盲用户友好
动态范围：
- 浅色主题：表面使用较高色调（90-99），强调内容使用较低色调（10-40）
- 深色主题：表面使用较低色调（10-20），强调内容使用较高色调（80-90）

实现指南

颜色令牌系统

所有颜色都使用 CSS 自定义属性（变量）。M3 Expressive 引入了 26 种以上颜色角色：

: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;
}

固定强调色

固定强调色是 M3 Expressive 中新增的功能。它们在浅色和深色主题中保持相同的值，适用于品牌标识元素：

/* 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 Expressive 标准化了三个无障碍对比度级别：

/* 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;
}

颜色应用

交互元素：
- 填充按钮：使用 primary 颜色和 on-primary 文本
- 描边按钮：使用 outline 和 primary 文本
- 文本按钮：仅使用 primary 文本
- FAB：使用 primary-container 和 on-primary-container
- 按钮组：使用 surface-container 和 on-surface 文本
表面和容器：
- 主背景：surface
- 高起组件（卡片、对话框）：surface-container 变体
- 输入框：surface-container-highest
- Snackbars：使用 inverse-surface，并搭配 inverse-on-surface 文本
- 底部面板：surface-container-low
状态层：
- 悬停：应用 on-surface 的 8% 不透明度层
- 焦点：应用 on-surface 的 12% 不透明度层
- 按下：应用 on-surface 的 12% 不透明度层
- 拖动：应用 on-surface 的 16% 不透明度层
强调和品牌：
- 对于必须保持一致的品牌元素，使用固定强调色
- 通过颜色饱和度和对比度来强调，而不仅仅依靠色相
- 将 tertiary 用作富有表现力的强调色，适用于引导流程、重点内容和品牌塑造

动态颜色生成

从源颜色生成配色方案时：

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

最佳实践

语义化命名：始终使用语义化颜色令牌（例如 primary、error），而非字面颜色（例如 blue、red）
一致应用：在所有组件中一致地应用颜色
高程着色：使用低不透明度的主色，为高程表面添加微妙的色调
颜色层级：主色用于主要操作，次色用于较不重要的操作，第三色用于富有表现力的点缀
测试两种主题：始终在浅色和深色模式下测试
鲜明表达：在 M3 Expressive 中，采用更丰富、更鲜明的颜色，同时保持无障碍性
关注上下文：根据应用上下文和用户偏好调整颜色强度和调色板
使用固定颜色进行品牌标识：为徽标颜色或主题间必须保持不变的元素使用固定强调色令牌
支持对比度级别：实现标准、中等和高对比度变体，以满足无障碍需求
表面容器层级：使用五个表面容器级别，营造清晰的视觉深度

工具和资源

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/ — 用于生成配色方案的交互式 Web 工具
官方 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 变量和数据属性实现动态主题

应避免的常见问题

❌ 硬编码颜色值，而不使用令牌
❌ 所有状态都只使用一种颜色（没有悬停、焦点、按下状态的变体）
❌ 忽略深色主题，或将其视为事后补充
❌ 文本与背景之间的对比度不足
❌ 过度使用强调色（应仅少量用于突出重点）
❌ 未使用用户实际生成的配色方案进行测试
❌ 仅依赖颜色来传达状态或信息
❌ 忘记为品牌元素定义固定强调色
❌ 未实现多个对比度级别以满足无障碍需求
❌ 使用表面，而非适当的表面容器变体

颜色实现检查清单

实现 M3 颜色系统时，请确保：

支持 Markdown

登录后评论