material-design-3-color

用途

本技能用于将 Material Design 3（M3）Expressive 的动态色彩与主题原则应用到用户界面中，指导创建鲜明、可访问且富有情感吸引力的色彩系统。当工作涉及调色板、主题、动态色彩、Material You、无障碍配色与颜色令牌时，可参考本技能。

动态色彩系统：基于动态色彩概念，使界面适应用户偏好与上下文。
基调调色板：使用五个关键基调调色板——Primary、Secondary、Tertiary、Neutral、Neutral Variant，每个调色板包含 0-100 多个色调。
颜色角色：将 26 个以上颜色角色映射到 UI 元素（如 primary、onPrimary、primaryContainer、onPrimaryContainer）。
自适应主题：支持亮色与暗色主题，并提供适当对比度。
用户个性化：允许配色方案根据用户壁纸或偏好进行调整（Material You）。
固定强调色：提供在亮色和暗色主题下保持一致的色彩令牌，用于品牌标识。
强调色：使用更醒目、更鲜明的颜色角色突出关键 UI 元素，提升清晰度与情感共鸣。
对比度级别系统：标准化标准、中等、高三种对比度级别，并全部令牌化，便于实现。
内置工具与资源：包含 tokens.css（基于橙色基线调色板 #FF9800 的亮色和暗色 M3 颜色令牌，可直接复制到项目中定制）、examples/color-roles.svg（展示 M3 颜色角色、表面容器色调与主基调调色板的视觉参考图）、material-theme-builder 技能（用于从任意源色程序化生成完整令牌集）等。

颜色令牌系统：使用 CSS 自定义属性（变量）定义所有颜色，M3 Expressive 引入 26 个以上颜色角色。资料给出了 :root 亮色主题与 [data-theme="dark"] 暗色主题的完整令牌示例，覆盖 Primary、Primary Fixed、Secondary、Secondary Fixed、Tertiary、Tertiary Fixed、Surface 与表面容器、Inverse、Outline、Error、Scrim 与 Shadow 等。
固定强调色：固定强调色在亮色与暗色主题间保持相同值，适合品牌标识元素。资料给出 .brand-banner、.brand-accent、.brand-banner-secondary 使用 fixed 与 fixed-dim 令牌的示例。
对比度级别：通过 data-contrast="medium" 与 data-contrast="high" 提供中等与高对比度版本，示例包含 primary 与 primary-container 等调整。
颜色应用：资料详述交互元素（填充按钮、描边按钮、文本按钮、FAB、按钮组）、表面与容器（主背景、提升组件、输入框、Snackbar、底部面板）以及状态层（悬停 8%、聚焦 12%、按下 12%、拖拽 16% 的 on-surface 不透明度层）的配色方式。
动态色彩生成：从源色生成配色方案的步骤包括提取核心色相、使用 HCT 色彩空间生成五个基调调色板、分配 26+ 颜色角色、生成固定变体、生成表面容器、生成对比度变体、验证对比度并支持亮暗主题。