首页 / 颜色工具 / 深色模式转换器

深色模式转换器

把浅色配色翻成深色版本,不是反色。规则全部写在页面上,结果可以自己复算,每对颜色的对比度都会标出来。

选一套浅色配色

只列出背景足够亮的配色,点一下就开始推导

或者自己填三个色值

转换规则

规则只有三条,都写在下面。改掉任何一个数值结果就会变,所以这套推导可复现,不是黑箱。

结构化角色,明度写死

背景压到 L9,卡片 L14,正文提到 L93,次级文字 L70,描边 L26。深色模式不是把明度倒过来,而是把元素重新分到几个固定的层。

饱和度衰减

结构角色的饱和度乘 0.30 到 0.40,并设上限(背景不超过 16,正文不超过 12)。深底上高饱和会刺眼,这是深色模式最常见的翻车点。

品牌色与功能色只提亮

主色、功能色、强调色不动色相,明度提到 L55 到 L78。原样搬进深底会糊成一团,压暗又会失去品牌感。

库里配色的推导示例

下面三套浅色配色按上述规则算出的深色版本,对比度都是实测值。它们不是库里的条目,是这套规则的输出。

静湖蓝WEB 端在库里查看 →
浅色原版

Aa

深色版本

Aa

  • 正文在背景上15.18:1AAA
  • 主色在背景上5.93:1AAA · 大字
  • 正文在卡片上13.27:1AAA
朱墨红WEB 端在库里查看 →
浅色原版

Aa

深色版本

Aa

  • 正文在背景上15.14:1AAA
  • 主色在背景上4.60:1AAA · 大字
  • 正文在卡片上13.15:1AAA
生鲜橙小程序端在库里查看 →
浅色原版

Aa

深色版本

Aa

  • 正文在背景上15.45:1AAA
  • 主色在背景上6.82:1AAA · 大字
  • 正文在卡片上13.26:1AAA

为什么不是简单反色

把每个通道取反得到的是照片负片,不是深色模式:暖灰背景会变成诡异的冷蓝,品牌色会跳到完全不同的色相区间。

真正的深色模式要保持色相、重排明度层级、压掉一部分饱和度。人眼在暗环境里对颜色更敏感,同样的饱和度放到深底上看起来更吵。

验证时看哪三个数

正文在背景上:低于 4.5:1 就别交付,深色模式最常见的投诉就是字看不清。

主色在背景上:按钮描边、链接、图标靠它辨认,3:1 是非正文元素的底线。

正文在卡片上:卡片比背景亮一层,这一步常被漏掉,但列表页几乎全在卡片里读。