转换规则
规则只有三条,都写在下面。改掉任何一个数值结果就会变,所以这套推导可复现,不是黑箱。
结构化角色,明度写死
背景压到 L9,卡片 L14,正文提到 L93,次级文字 L70,描边 L26。深色模式不是把明度倒过来,而是把元素重新分到几个固定的层。
饱和度衰减
结构角色的饱和度乘 0.30 到 0.40,并设上限(背景不超过 16,正文不超过 12)。深底上高饱和会刺眼,这是深色模式最常见的翻车点。
品牌色与功能色只提亮
主色、功能色、强调色不动色相,明度提到 L55 到 L78。原样搬进深底会糊成一团,压暗又会失去品牌感。
库里配色的推导示例
下面三套浅色配色按上述规则算出的深色版本,对比度都是实测值。它们不是库里的条目,是这套规则的输出。
为什么不是简单反色
把每个通道取反得到的是照片负片,不是深色模式:暖灰背景会变成诡异的冷蓝,品牌色会跳到完全不同的色相区间。
真正的深色模式要保持色相、重排明度层级、压掉一部分饱和度。人眼在暗环境里对颜色更敏感,同样的饱和度放到深底上看起来更吵。
验证时看哪三个数
正文在背景上:低于 4.5:1 就别交付,深色模式最常见的投诉就是字看不清。
主色在背景上:按钮描边、链接、图标靠它辨认,3:1 是非正文元素的底线。
正文在卡片上:卡片比背景亮一层,这一步常被漏掉,但列表页几乎全在卡片里读。