配色别凭感觉：60-30-10 的实际用法

"这个颜色好看"是主观判断，"这套颜色能让人先看哪里"才是设计。60-30-10 是一个很老的法则，但真正用对的人不多。

三个数字分别是什么

把画面里的颜色按面积分成三档：

• 60% 主色：铺底、大面积背景，决定整体气质
• 30% 辅色：卡片、区块、次级信息，负责层次
• 10% 强调色：按钮、链接、关键数字，负责引导视线

注意这是面积比例，不是"用三个颜色"。主色和辅色可以是同一色系的深浅变化，强调色才需要跳出来。

为什么很多页面看着乱

因为强调色的面积超了。一个页面上五六个按钮全是高饱和的橙色，用户的眼睛找不到落点，视觉上就成了"到处都在喊"。正确做法是全页只保留一个主行动按钮用强调色，其余按钮降为次要样式（描边、浅底）。

怎么选这三个颜色

实操顺序是反的：先定强调色，再定主辅色。因为强调色要传达情绪——促销用暖红橙，科技用蓝紫，环保用绿。定好它之后，主色选它的邻近低饱和色，辅色选中性灰或者同色系浅色，整体就协调了。

比如强调色是 #E8590C（橙），主色可以用极浅的暖灰 #FAF7F2，辅色用 #EDE6DC，文字用近黑 #1F1B16。这套看起来很"暖"，但不会腻。

三个容易忽略的细节

对比度。浅灰文字配浅底，好看但读不清。正文对比度至少要达到 WCAG AA（4.5:1），标题可以 3:1。用在线对比度工具测一下，别靠眼睛。

同一颜色在不同设备上不一样。手机屏幕普遍偏艳，显示器偏冷。选色时把饱和度往下压一点，实际观感会更稳。

深色模式要单独配色。不能把浅色模式的颜色直接反转。深色底上的强调色需要提亮、降饱和，否则会刺眼。

一个检查方法

把设计稿转成灰度，如果层级依然清楚（该突出的还突出，该退后的还退后），说明明度关系是对的。如果一团糊，那问题不在色相，在明度。