设计 核心 C · 行业惯例

Color Palette

色彩体系

色彩体系(Color Palette)是一组规划好的颜色,每个颜色都分配给明确的用途、状态或表面。

看看怎样运作
也有人这样说 Color Palette配色色彩系统

看看怎样运作

原创情境示例色彩体系

另一个例子

品牌蓝和成功、警告、危险操作使用的颜色会清楚分开。

主要部分

  1. 01基础或 Token
  2. 02应用后的组件
  3. 03可见状态与规则

什么时候用

用它让不同主题保有自己的外观,同时保持稳定的状态含义。

什么时候不要用

不要让同一个强调色代表所有操作和状态。

代码里的名称

semantic color tokens

上线前要检查

检查内容先后顺序、共用设计变量、组件一致性、对比度、缩放,以及页面能否随屏幕大小调整。验证每个主题、语言与状态;有动态效果时,也要提供同样完整的减少动态效果版本。

可以直接复制的需求

预期结果:定义或使用 色彩体系 (Color Palette),做出清楚、一致又好用的视觉体验。 用户场景:品牌蓝和成功、警告、危险操作使用的颜色会清楚分开。 要运用的设计概念:色彩体系 (Color Palette)。 适用理由:用它让不同主题保有自己的外观,同时保持稳定的状态含义。 不应使用的情况:不要让同一个强调色代表所有操作和状态。 设计要求:定义内容先后顺序、可复用的设计变量(Token)与组件。说明页面如何随屏幕大小和状态改变。分清必要的设计方向与纯装饰。 包容性与韧性:检查对比度、缩放、多语言、主题切换与减少动态效果。不能只靠颜色或特效表达含义。 验收标准:在手机、桌面、缩放、各种主题与所有支持语言中仍清晰可读。每个交互状态都一致且容易理解。 证据与限制(证据边界):没有一份官方标准能涵盖全部内容。不同团队、平台或框架的用法可能不同。 待确认:品牌限制、内容多少、支持的主题与语言、目标设备,以及现有设计系统规则。

检查这份需求

请 AI 编程助手检查当前如何使用 色彩体系 (Color Palette)。 定义:色彩体系(Color Palette)是一组规划好的颜色,每个颜色都分配给明确的用途、状态或表面。 生产环境检查:检查内容先后顺序、共用设计变量、组件一致性、对比度、缩放,以及页面能否随屏幕大小调整。验证每个主题、语言与状态;有动态效果时,也要提供同样完整的减少动态效果版本。 修改程序前,先列出看到的证据、缺口、严重程度,以及最小且安全的修正。

C
这个术语有多正式?

行业惯例

工作中经常会用到这个术语。列出的来源可能说明用法或限制,但不会定义全部内容。

没有一份官方标准能涵盖全部内容。不同团队、平台或框架的用法可能不同。

适用范围
只包含来源有说明的内容:正式名称、定义、使用指南、避免事项
文档状态
稳定
核验日期
2026-07-30

证据来源与适用范围

正式来源 · Google · 稳定 Material Design 3 适用范围: 正式名称、定义、使用指南、避免事项 本页用途: 提供背景,不是正式定义 来源涵盖内容: 正式名称, 定义, 使用指南, 避免事项

自行复制

浏览器无法自动复制。请选择下方文字,再自行复制。