开篇小故事：产品要上线深色模式，你打开作图软件，选中所有图层，找到颜色替换工具，把界面中的白色换成黑色，把黑色换成白色，把灰色系全部倒转。前后花了不到二十分钟。

看着屏幕上的结果，你说不出哪里不对，但就是不对。背景变黑了，文字变白了，按钮的蓝色还在，但整个界面像是一个廉价的"暗色皮肤"，而不是 iOS 或 macOS 那种深色模式该有的感觉。你以为是哪个颜色值没调对，于是逐一检查，花了两个小时，还有没有找到问题。

浅色模式的层级逻辑

理解反转用色为什么不行，就要从浅色模式的层级逻辑说起。

浅色模式用阴影建立层级。背景是白色或浅灰，卡片浮在背景上方，靠轻微的阴影和背景拉开距离；弹窗浮在卡片上方，阴影更深、扩散范围更大。文字用深灰或黑色，在浅色背景上形成高对比。品牌色点缀在按钮、链接、高亮区域。整套系统设计的核心规则就是：层级越高，颜色越深。深色的影子投在浅色背景上，对比清晰，层次分明。

把这套系统配色反转，表面上逻辑自洽，但有四个具体的问题，如果处理不好，每一个都会把界面设计方向搞偏。

问题一：背景色不能是纯黑

反转操作通常第一步就是把白色背景换成 #000000。但纯黑背景会带来两个麻烦。

第一个是光晕效应。浅色文字或图形放在纯黑背景上，人眼会感知到一种扩散感——浅色内容的边缘像在向外渗透、发光。这是视觉系统处理高对比边缘的正常反应，对于用户而言，这种 UI 用起来非常不舒服，长时间阅读时眼睛会持续疲劳。

左图纯黑 （#000000） 高对比度 + 暗环境，眼睛持续疲劳，右图深灰 #121212）明度 6%–12%，为层级保留上升空间

第二个是层级空间被压死。深色模式需要靠明度差区分层级：背景最暗，卡片比背景稍亮，弹窗比卡片再亮一点。背景已经是绝对黑（明度 0），上面每一层就只能往亮处走。但纯黑到浅灰之间的跨度太大，每层需要跳跃很多才能和背景拉开，结果是层级差距要么太小看不出来，要么太大感觉断裂。

成熟的深色模式设计系统都不会用纯黑背景。Material Design 的背景色是 #121212，明度约 7%，带一点深灰的感觉。iOS 深色模式背景虽然是 #000000，但那是针对 OLED 屏幕省电的特殊考量，Apple 在文字和图层上做了大量透明度处理来补偿纯黑带来的问题。通用方案是明度在 6%–12% 之间的深灰。

背景色还有一个细节需要好好处理，那就是在灰色里加入微量主色色相。纯灰（饱和度为 0）的背景和有色相的界面元素放在一起，整体会有轻微的割裂感。把背景灰的饱和度调到 3%–6%、色相和主色一致，整体协调很多。这和做中性色时要带主色色相是同一个道理，而这在深色模式里效果更加明显。