界面里的颜色，首先管的不是「好不好看」，而是节奏：哪里该安静，哪里该被看见。疏密得当、张弛有度，配色才不会变成一场同时说话的合唱。
60-30-10：先分配，再上色
60% 主色、30% 辅助色、10% 强调色。 主色通常是大面积底，辅助色托住结构和文字，强调色只留给真正要行动的那一下。
这个配比让人可以逐渐感知所有视觉元素，而不是第一眼就被三四种高饱和色同时抓住。辅助色和强调色还可以各生出一组相关色——同一色相里的深浅变化，用来分层，而不是再开一条新的色相。
Airbnb 房源页是一个干净的样本：白、炭黑、品牌红。红几乎只出现在「预订」。眯起眼睛看，你仍然知道按钮在哪——这就是配比在替你做层级。
怎么拓展相关色
强调色只有 10%，但界面常常需要 hover、禁用、背景浅底、描边。它们不该是另一套颜色，而应该是同一色相上的深浅位移——增加层次，同时避免色彩混乱。
工作区里用 HSB 比 HEX 更适合这件事：色相（H）锁定家族，饱和度（S）和明度（B）负责对比。
Step 1，改变对比度。 色相不动。饱和度升高、明度降低，颜色变沉、变硬；饱和度降低、明度升高，颜色变浅、变软。一对深浅，就够做出主按钮和浅底标签。
Step 2，丰富颜色变化。 在对比度成立之后，才微移色相。靠近红、绿、蓝会显得更暗，靠近青、品红、黄会显得更亮。这条规则让「同一蓝」长出海军蓝到天空蓝，而不是跳到另一个品牌色。
对比度不是审美，是能不能看见
配色漂亮，但图标融进底里、字太淡——对色感差的人，界面等于没做完。
典型失败：浅底上的浅图标，标注是「融进去了」「太淡」。不是风格克制，是对比度不够。
同一套图标，给它一个实心底托，对比从 1.7 拉到 3.4，元素才重新成为可点击的对象。渐变可以更优雅，但先要过对比这一关。
对比度衡量的是两种颜色之间的感知亮度差。2:1 几乎看不见，3:1 是图形控件的常见门槛，正文需要更高。白底上的蓝字比黄字好读，不是因为蓝更「高级」，是因为它和白底的亮度差够大。
颜色的工作可以收成三句：先定面积节奏，再在同一色相里长出深浅，最后用对比度确认每个人都看得见。10% 的强调色，只留给你真正希望被按下去的那一个决定。