你挑了五个喜欢的颜色,一股脑铺到设置页上,结果看起来……很吵。不算坏,就是噪——像整个设计在喊叫。解法几乎从来不是"换个更好的颜色",而是"少用几个,并且给每个颜色分配职责"。这就是 60-30-10 法则的全部思想——它是区分"设计出来的配色"和"拼出来的配色"的唯一比例系统。
本指南讲清这套数学、如何给每个颜色分配角色、如何挑选真正扛大旗的那一个强调色,以及如何在明暗两套主题下验证结果。想动手时,我们的本地配色生成器会自动按比例拆分,并在真实 UI 元素上预览——完全在你的浏览器里完成。
法则本身
百分之六十、三十、十。这是每个色彩家族应占据的表面积:
- 60% —— 主色。通常是一个中性色:米白、浅灰,或(深色模式下)近黑。它构成背景、大卡片,以及让内容得以呼吸的留白。
- 30% —— 次色。第二个中性色或低饱和色调,负责页面结构:文字、分隔线、侧栏、边框和次级表面。
- 10% —— 强调色。饱和度最高的颜色,只留给少数你希望视线最先找到的元素:主按钮、活跃链接、焦点环和关键行动点。
这套法则的力量在于克制。强调色之所以"跳",恰恰因为它稀有。把它铺满半个页面,它就什么也不是了。
为什么有效(一点点数学)
人眼通过对比度和稀缺度判断重要性。当屏幕上 90% 的区域共享一个平静、低对比的色彩家族时,剩下 10% 的高饱和色就成了磁铁。设计师从室内设计和电影摄影里借来这套思路:受控的色彩场让单点高光显得有意为之。60-30-10 只是那个稳定产出这种效果、又不至于滑向单调或混乱的比例。
角色分配,一步一步来
不要从强调色开始。从主色开始,因为它定调整体情绪:
- 先选主色中性色。亲和型产品用暖米白,技术型产品用冷灰,重专注的仪表盘用近黑。
- 从主色派生次色。通常是主色明度偏移 8–15%。它必须足够区分以显出结构,但永远不能和内容抢戏。
- 有目的地选一个强调色。匹配品牌或想唤起的情绪:蓝代表信任,绿代表增长,橙/红代表能量或紧迫。饱和度保持高,面积保持小。
- 语义色最多加一个。错误的红、成功的绿可以有,但把它们算进 10%,不要当成额外的强调色。
明暗主题:翻转角色,保留强调色
法则可以干净地迁移到深色模式,但比例要向背景翻转:
- 亮色模式的 60% 是浅色表面;深色模式的 60% 是深色表面。
- 30% 变成稍亮的表面(卡片、文字),而不是更暗的。
- 10% 强调色保持同一色相——但确保明度足够高,能在深色底上读清。一个在白底上很亮的午夜蓝,在纯黑上可能直接消失。
两套主题都要预览。亮色模式下平衡的配色,到深色模式经常崩掉,因为对比度关系全变了。修法几乎总是微调明度,而不是换色相。
常见错误
- 强调色膨胀。每个按钮、徽章、边框都染成强调色,页面失去锚点。把强调色控制在 10% 左右。
- 两个大声的强调色。红和蓝都在喊,结果互相抵消。选一个主角。
- 追色相,忽视对比度。再漂亮的颜色,正文达不到 WCAG AA(4.5:1)就没用。定稿前先查对比。
- 在空白样机上测试。颜色在真实内容前的表现完全不同。用真实文本和组件验证。
本地生成与预览
我们的配色生成器默认按 60-30-10 模型生成,并把你的颜色渲染在示例 UI 区块上(按钮、卡片、文本),写一行 CSS 之前就能看到平衡效果。由于 100% 运行在浏览器里,你尚未发布的品牌色永远不会离开你的机器——当配色属于未发布产品的一部分时,这件事比想象中重要。
常见问题
问:60-30-10 配色法则到底是什么? 答:它是一个比例系统:大约 60% 的表面使用主色(通常是中性色),30% 使用承担结构作用的次色,10% 留给高饱和强调色——只用在少数你希望视线最先找到的元素上,比如主按钮或活跃链接。
问:60-30-10 也适用于深色模式吗? 答:适用,但角色要翻转。深色模式下 60% 是近黑背景,30% 是稍亮的表面和正文,10% 强调色保持同一饱和色。强调色明度要够高才能在深底上保持可读。
问:可以用不止一个强调色吗? 答:可以,但所有强调色的总面积要控制在 10% 附近。多个强调色会稀释焦点。常见的安全做法是一个主强调色,加一个用于错误/成功的语义色,克制使用。
问:怎么确保配色可访问? 答:查对比度,而不只是色相。正文相对背景应达到 WCAG AA(普通文本 4.5:1)。对比度不达标时先调明度再考虑换色相,因为明度对可读性影响最大,还能保住整体情绪。
问:有没有工具能生成 60-30-10 平衡配色? 答:有。Plobi-kit 的配色生成器在浏览器本地生成平衡配色,并支持在 UI 样例元素上预览,写任何 CSS 之前就能看到 60-30-10 的实际效果。你的设计不会被上传。