60-30-10 法则已被打破：真正有效的现代色彩系统
60-30-10 法则是一种室内设计捷径，设计师们常常将其强加于产品设计中。而现代色彩系统则采用以下方法。
60-30-10 法则 是大多数设计师学习色彩搭配时首先接触到的原则，也是大多数严肃的产品团队在发布实际界面时最先悄悄放弃的原则。60% 的主色，30% 的辅助色，10% 的点缀色。
简洁明了，易于引用。但一旦品牌拥有按钮、禁用状态、通知、图表、深色模式和文档网站，这条原则就完全失效了。
这条规则本身并没有错，只是它针对的是另一个问题。目前最优秀的设计系统使用的并非比例，而是基于角色的 令牌 系统。本文将探讨 60-30-10 规则失效的原因、它的替代方案，以及五个大规模应用该方案的实际设计系统。
60-30-10 规则的由来
60-30-10 规则源于 20 世纪中期室内装饰领域的一种简便方法，后来被一些需要引用规则的人套用到数字设计领域。
它的起源是住宅设计。一个房间通常包含一个主色（墙壁）、一个辅助色（软装、窗帘）和一个点缀色（靠垫、艺术品）。60、30、10。这套规则适用于房间，因为房间是单一的静态表面，每次只有一个人观看，而且颜色保持不变，直到有人重新粉刷。
然而，这些假设在产品设计中都站不住脚。数字产品并非静态表面，而是由数百个表面组成，每个表面都有其自身的状态、主题和上下文。这套规则从未针对数字产品设计，这一点显而易见。
为什么它在产品设计中失效
60-30-10 规则假设只有一个静态表面和一个观看者，这与产品设计的运作方式完全不符。
真实的界面包含禁用按钮、悬停状态、焦点环、错误提示、成功提示、图表数据序列、空白状态、加载框架以及用于表示破坏性操作的语义颜色。这些都不能简单地对应到“画布的 60%、30% 或 10%”。它们不是画布，而是行为。
一旦添加了深色模式，这条规则就失效了。原本 60% 的浅色中性色现在必须变成 60% 的深色中性色，30% 的辅助色必须改变色调以保持层级关系，而 10% 的强调色通常必须提亮或彻底改变色调才能保持可访问性。这不是比例问题，而是系统问题。
可访问性是压垮骆驼的最后一根稻草。WCAG 对比度 并不关心页面上蓝色占多大比例。他们关心的是特定按钮上的特定蓝色与它背后的特定背景是否有足够的对比度。你无法用面积比例来解决这个问题。
现代色彩系统采用的替代方案
目前最优秀的界面所使用的系统，用基于角色的标记层级取代了比例规则。这些标记层级描述的是颜色的功能，而非其数量。
| 层级 | 功能 | 标记示例 |
|------|--------------|---------------------|
| 表面 | 背景图层和立面 | bg-default, bg-subtle, bg-raised, bg-overlay |
| 内容 | 表面上的文本和图标 | text-default, text-muted, text-on-accent |
| 强调色 | 品牌色和主要操作色 | accent-primary, accent-primary-hover, accent-secondary |
| 状态 | 交互状态和反馈状态 | state-hover, state-focus, state-disabled |
| 语义 | 含义丰富的信号 | success, warning, critical, info |
每个标记都描述一个角色。“这种颜色是卡片背后的底色。”“这种颜色是强调色上方的文字。”
设计师无需在“辅助色或30%强调色”之间进行选择。他们只需在系统已定义的角色之间进行选择。
这种做法的优势是叠加的。添加深色模式只需将相同的标记映射到不同的原始值，而无需重新绘制界面。添加新的品牌主题只需在强调色层级进行单个标记的替换。可访问性在标记级别强制执行，而不是逐页检查。
五大优秀设计系统
这些系统采用基于角色的调色板，并已实现大规模应用，确保在浅色模式、深色模式以及用户接触的任何表面上都能保持色彩一致性。
Material Design 3
Material Design 3 在色彩转换方面最为明确。该系统定义了诸如“主色”、“主色之上”、“表面”、“表面之上”、“反主色”等颜色角色，每个角色都预先配对了对比度。设计师无需选择颜色，只需选择角色，系统会自动解析为当前主题对应的正确值。
值得借鉴之处： “on-” 命名约定。on-primary 表示位于主表面上的文本/图标，它将辅助功能直接编码到标记名称中。
Radix Colors
Radix Colors 为每个色调提供 12 个色阶，每个色阶都预先分配了一个角色（应用背景、柔和背景、UI 元素、悬停、聚焦、激活、纯色、文本、高对比度文本）。没有比例逻辑。每个色阶都是一个角色。
值得借鉴之处：带有角色注释的编号色阶。它为设计师提供了一套共享的词汇表，从而消除了 90% 的“我应该使用哪种灰色”的争论。
Shopify Polaris
Polaris 按组件角色组织颜色：背景（表面）、文本（内容）、图标、边框和交互。每个角色都有悬停、按下、禁用和选中等子角色。该系统从结构上限制了设计师使用超出定义范围的颜色。
值得借鉴之处：角色分组。将“边框”标记与“表面”标记分开，可以强制组件级别进行有意识的颜色使用。
两个品牌已在生产环境中应用
以上设计系统文档仅供参考。这两个品牌就是最好的证明。Stripe 和 Linear 每天都在产品层应用基于角色的颜色，并且都证明了这种模式在实际使用中依然有效。
Stripe
Stripe 发布的是一个完整的品牌，而不仅仅是一份设计系统文档。其公开网站展示了基于角色的颜色在生产环境中的实际应用效果。
几乎所有内容都采用中性表面和中性内容。紫色是强调色，它出现在操作、链接和品牌标识所在的位置。没有比例逻辑，只有角色逻辑。
值得借鉴之处：保持强调层颜色简洁的原则。Stripe 的 强调色 使用得非常谨慎，因为它的作用是限定性的。如果将强调色用于装饰，就失去了用它们来发挥功能的能力。
Linear
Linear 比几乎所有大规模生产的品牌都更注重中性色的使用。整个产品由多层深色表面标记组成，只有一种强调色（紫色）承担了所有功能性的作用。任何比例规则都无法实现这一点。这是一个纯粹基于角色的系统，“强调”层是一种克制使用的单一颜色，“表面”层则是一个完整的立体堆叠。
值得借鉴之处：让强调层只使用一种颜色的自信。许多新的设计系统过度使用了强调色。 Linear 证明，精心挑选并始终如一地使用一种强调色，比三种不同比例的强调色更能建立强大的品牌识别度。
如何构建基于角色的调色板
这种构建调色板的方法比选择三种颜色并分配百分比要花费更多时间，但设计师在首次添加深色模式时就能收回成本。
这个过程与大多数设计师的学习方式相反。不是先选择颜色再确定其角色，而是先确定角色再确定颜色。
-
定义角色层级。 从表面、内容、强调色、状态和语义层级开始。大多数产品只需要这五个层级。有些产品可能需要第六个层级用于数据可视化。
-
在选择十六进制值之前编写标记。 每个标记都应该描述一个角色（
surface-subtle、content-muted、accent-primary-hover）。如果标记名称描述的是颜色（例如“浅蓝色”），则需要重命名。 3. 首先填充中性色阶。 实际界面的大部分都是中性色。在处理品牌颜色之前，先构建一个完整的色阶（Radix 使用 12 个色阶是有原因的）。 -
最后添加强调色层级。 强调色通常是 品牌标识 唯一实际存在的地方。在此过程中，克制至关重要。
-
通过重新解析标记来实现深色模式，而不是重新设计。 如果你的系统是基于角色的，那么深色模式就是替换标记值，而不是彻底改变颜色。
-
在标记层强制执行可访问性。 每个
on-surface标记与其配对表面的可访问性比应为 4.5:1。将此检查集成到设计中。
一个诱人的捷径是定义三个角色（主色、次色、强调色），宣布胜利，然后发布。这其实是披着符号外衣的 60-30-10 法则。它恰恰在第一个真正的组成部分上失效了。
为了更全面地了解色彩决策在用户理解之前是如何被解读的，设计中的色彩心理学 涵盖了意义层面。为了更全面地了解色彩系统如何在更大的系统上下文中发挥作用，设计系统指南 提供了完整的图景。
常见问题解答
60-30-10 法则真的有用吗？
是的。单面设计仍然受益于它。例如海报、社交媒体帖子、营销重点区域、包装、编辑页面等等。任何交付物都是一次性使用的场景，该法则都能提供快速的比例捷径。但产品设计并非如此。
设计系统应该有多少种颜色？
原始十六进制颜色值比你想象的要少，但组织成的标记数量却比你想象的要多。大多数设计系统包含 8 到 12 个中性色级、8 到 12 个强调色级和 3 到 5 个语义族，所有这些都解析为基于角色的标记。原始颜色数量很少，但角色数量很多。
调色板和色彩系统有什么区别？
色彩调色板 是一组颜色。色彩系统是一组角色、一组关于这些角色如何交互的规则，以及一个从角色到颜色的映射，该映射会根据主题而变化。调色板回答“品牌包含哪些颜色”。系统回答“在这个主题下，这个元素在这个状态下是什么颜色”。
停止用百分比来衡量颜色
60-30-10 法则并非邪恶，只是超出了我们的讨论范围。
产品设计不是一间房间。这是一个由表面、状态和角色构成的系统，会随着用户的移动而变化。
用百分比来衡量颜色就像用页面百分比来衡量排版一样毫无意义。你不会说“30% 的文本是标题”，而是会说“标题是一种具有明确样式的角色”。颜色也应该如此运作。
那些提供最佳缩放效果的品牌，例如 Material、Radix、Polaris、BRAND9 和 BRAND4，都明白这一点并以此为基础进行构建。照搬他们的百分比是不得要领的，关键在于复制他们的角色结构。
如果你的调色板只有三种颜色和一个模糊的分配规则，那你拥有的就不是颜色系统，而只是一种颜色偏好。构建颜色层级，命名角色，让十六进制颜色值成为你最后争论的话题。
Need a color system built to scale, not just to swatch? Brainy builds palettes with token tiers, dark mode, and accessibility baked in.
Get Started
