深色模式配色方案:12 套带十六进制色值的夜间配色
十二套深色模式配色方案,附精确十六进制色值:夜里会发光的强调色、会沉下去的强调色、一个强调色通吃两种主题,以及不刺眼的米白文字。
深色模式的配色,不是把浅色那套倒过来用。强调色在深色页面上的表现不一样,文字需要更柔和,有些颜色干脆就失效了。下面是十二套深色配色,每个十六进制色值都列出来,专门展示夜间到底会变什么。
深色模式会翻转你的强调色
在白底上吃力的强调色,往往在深色底上会发光。在白底上看起来扎实的强调色,则可能失去锋芒。这意味着深色主题不能不加检查就直接借用浅色主题的强调色。
下面每套配色都由一个浅色文字色、一个强调色和一个深色底色组成。色块展示了强调色在深色页面和白色页面上的样子。想了解深色主题背后的体系,请看我们的文章深色模式色彩系统。
Lime
Electric Lime #C6F432 在 Graphite #17181C 上:发光
同一强调色在白底上:发虚
Chalk #F2F3EE 在 Graphite 上
Electric Lime 在白底上几乎看不见,在 Graphite 上却会发光。在白底上吃力的颜色,正是夜里闪耀的颜色。
Pink
Hot Pink #FF4F9A 在 Night Plum #1A1218 上:发光
同一强调色在白底上:更弱
Blush White #F6EEF2 在 Night Plum 上
Hot Pink 在白底上偏弱,在 Night Plum 上强得多。
Amber
Amber #FFB020 在 Coffee Black #1B1610 上:发光
同一强调色在白底上:发虚
Warm White #F5F0E6 在 Coffee Black 上
Amber 在白底上是个弱强调色,在 Coffee Black 上则温暖而有力。
Royal
Royal #3B4CCA 在 Midnight #121426 上:沉下去
同一强调色在白底上:很强
Frost #EEF0FA 在 Midnight 上
Royal 是教科书式的浅色模式蓝。在 Midnight 上,它达不到按钮被看成一个形状所需要的程度,同一个色值,换了页面就变了。
同一个色值,不同的页面。Royal 要特别留意:在白底上好用的按钮,到了夜里可能就沉下去了。
一个强调色,两种主题
按钮必须从它所在的页面里跳出来。Waikiki 在浅色页面和深色页面上都做到了,Very Berry 也是。一个色值,两种主题。
Lime Punch 和 Gentian Blue 就不行。它们在一种主题里很漂亮,在另一种里却消失了。
Waikiki
Waikiki
在 Silver Bird #FBF8F1 上:通过
在 Midnight Oil #10141F 上:通过
中间调的青色,在两种页面上都很突出。一个色值,两种主题。
Very Berry
Very Berry
在 French Porcelain #F7F4FB 上:通过
在 Twilight Zone #0F1C16 上:通过
又一个中间调,在浅色页面和深色页面上都好用。
Lime Punch
Lime Punch
在 Ceramic #FBFAF5 上:不通过
在 Infinite Night #171538 上:通过
对浅色模式来说太亮了:在白天的底色上,按钮几乎消失。在 Infinite Night 上,它则会发光。
Gentian Blue
Gentian Blue
在 Open Book #F6EFE5 上:通过
在 Balsamico #1C1612 上:不通过
对深色模式来说太暗了。它在 Open Book 上很强,在 Balsamico 上就消失了。
如果你想要一个强调色通吃两种主题,就选中间调,并检查两遍。否则,就给每种主题各配一个色调。我们的深色模式设计指南讲了如何把第二套主题落地。
米白胜过纯白
近黑底上的纯白是你能得到的最强对比,而这恰恰是问题所在:它刺眼。这些配色里的米白,读起来依然比正文所需的轻松得多。
Material Design 的深色主题把主文字设为 87% 的白,原因相同。给米白加一点暖或一点冷,然后让强调色去说话。
Smoked Salmon
Distant Cloud #E7ECEC 在 Dark Moon #0B1B1F 上
纯白 #FFFFFF 在 Dark Moon 上:刺眼
Smoked Salmon #FF887A 在 Dark Moon 上
偏冷的米白搭配温暖的珊瑚色强调色。强调色不需要任何帮助就足够醒目。
Minted Elegance
Vanilla Sugar #F1EBDF 在 Violet Void #1C1022 上
纯白 #FFFFFF 在 Violet Void 上:刺眼
Minted Elegance #4FCB9C 在 Violet Void 上
Vanilla Sugar 带一点暖意,薄荷色强调色在 Violet Void 上有足够的施展空间。
Malibu
Milk and Cookies #EFE7E7 在 Asphalt #1C140F 上
纯白 #FFFFFF 在 Asphalt 上:刺眼
Malibu #57BAF0 在 Asphalt 上
暖米白配暖近黑,再加一抹穿透而出的天蓝色。
Dream Vapour
Star Magnolia #EAEFE4 在 Black Stallion #0E1A16 上
纯白 #FFFFFF 在 Black Stallion 上:刺眼
Dream Vapour #BB9DF0 在 Black Stallion 上
Star Magnolia 略微偏绿,与柔和的淡紫色强调色很相配。
这四套里的每个强调色在夜间底色上都很醒目,所以文字可以安静一些。
十二套配色一览表
| 配色 | 颜色 | 展示了什么 |
|---|---|---|
| Lime | Chalk #F2F3EE, Electric Lime #C6F432, Graphite #17181C | 在深色上发光 |
| Pink | Blush White #F6EEF2, Hot Pink #FF4F9A, Night Plum #1A1218 | 在深色上更强 |
| Amber | Warm White #F5F0E6, Amber #FFB020, Coffee Black #1B1610 | 在深色上发光 |
| Royal | Frost #EEF0FA, Royal #3B4CCA, Midnight #121426 | 在深色上沉下去 |
| Waikiki | Midnight Oil #10141F, Waikiki #0098A4, Silver Bird #FBF8F1 | 两种主题都好用 |
| Very Berry | Twilight Zone #0F1C16, Very Berry #CE4390, French Porcelain #F7F4FB | 两种主题都好用 |
| Lime Punch | Infinite Night #171538, Lime Punch #B7DD31, Ceramic #FBFAF5 | 只适用于深色 |
| Gentian Blue | Balsamico #1C1612, Gentian Blue #292BAE, Open Book #F6EFE5 | 只适用于浅色 |
| Smoked Salmon | Distant Cloud #E7ECEC, Smoked Salmon #FF887A, Dark Moon #0B1B1F | 米白文字 |
| Minted Elegance | Vanilla Sugar #F1EBDF, Minted Elegance #4FCB9C, Violet Void #1C1022 | 米白文字 |
| Malibu | Milk and Cookies #EFE7E7, Malibu #57BAF0, Asphalt #1C140F | 米白文字 |
| Dream Vapour | Star Magnolia #EAEFE4, Dream Vapour #BB9DF0, Black Stallion #0E1A16 | 米白文字 |
数据,留给需要为选择辩护的你
每一组搭配都用 WCAG 2 对比度公式,对照它所在的底色测量过。这是本文里唯一带比值的表格。
| 配色 | 测试 | 比值 | 结果 |
|---|---|---|---|
| Lime | 强调色在深色底 / 白底上 | 13.84:1 / 1.28:1 | 发光,发虚 |
| Pink | 强调色在深色底 / 白底上 | 5.98:1 / 3.07:1 | 在深色上更强 |
| Amber | 强调色在深色底 / 白底上 | 9.82:1 / 1.83:1 | 发光,发虚 |
| Royal | 强调色在深色底 / 白底上 | 2.66:1 / 6.83:1 | 在深色上沉下去 |
| Waikiki | 按钮在浅色 / 深色上 | 3.2:1 / 5.2:1 | 两者都通过 |
| Very Berry | 开关在浅色 / 深色上 | 3.9:1 / 4.0:1 | 两者都通过 |
| Lime Punch | 按钮在浅色 / 深色上 | 1.4:1 / 11.1:1 | 不通过,通过 |
| Gentian Blue | 播放按钮在浅色 / 深色上 | 8.9:1 / 1.7:1 | 通过,不通过 |
| Smoked Salmon | 米白文字 / 纯白 / 强调色 | 14.7:1 / 17.6:1 / 7.6:1 | 通过,刺眼,通过 |
| Minted Elegance | 米白文字 / 纯白 / 强调色 | 15.4:1 / 18.3:1 / 9.0:1 | 通过,刺眼,通过 |
| Malibu | 米白文字 / 纯白 / 强调色 | 14.9:1 / 18.1:1 / 8.3:1 | 通过,刺眼,通过 |
| Dream Vapour | 米白文字 / 纯白 / 强调色 | 15.2:1 / 17.8:1 / 7.8:1 | 通过,刺眼,通过 |
如何搭建你的深色配色
- 先选深色底色。 像 Graphite #17181C 或 Violet Void #1C1022 这样的近黑,比纯黑更柔和。
- 文字用米白。 加一点暖或一点冷,就像 Vanilla Sugar #F1EBDF 那样。
- 在深色底上测试强调色。 不要不加检查就沿用浅色主题的强调色。
- 决定用一个强调色还是两个。 如果一个强调色要同时服务两种主题,就选中间调,并在两种页面上都检查。否则,给每种主题各配一个色调。
- 把按钮当作形状来检查。 它得从页面里跳出来,而不只是读起来像个标签。
获取每一套的文件
每一套都是 Forge 上的免费色彩集,带点按即可复制的色值、适用于 Figma 和 Adobe 的色板文件(ASE)、CSS 变量和设计令牌。
免费色彩集
深色模式会翻转你的强调色:Lime、Pink、Amber、Royal
每个十六进制色值,外加 ASE 色板、CSS 变量和设计令牌。
免费色彩集
一个强调色,两种主题:Waikiki、Very Berry、Lime Punch、Gentian Blue
每个十六进制色值,外加 ASE 色板、CSS 变量和设计令牌。
免费色彩集
深色模式的米白:Smoked Salmon、Minted Elegance、Malibu、Dream Vapour
每个十六进制色值,外加 ASE 色板、CSS 变量和设计令牌。
常见问题
什么颜色最适合深色模式配色方案?
近黑的底色、用于文字的米白,以及一个在深色上醒目的强调色。Smoked Salmon #FF887A 配 Dark Moon #0B1B1F,文字用 Distant Cloud #E7ECEC,就是个好例子。
深色模式应该用纯白文字吗?
不应该。近黑底上的纯白会刺眼。像 Vanilla Sugar #F1EBDF 这样的米白,读起来依然远比正文所需的轻松,而且更柔和。
浅色和深色模式可以用同一个强调色吗?
只有当它是中间调时才行。Waikiki #0098A4 在两种页面上都醒目。Lime Punch #B7DD31 在浅色上消失,Gentian Blue #292BAE 在深色上消失。
为什么我的蓝色按钮在深色模式下不见了?
在白底上很强的蓝,对深色底来说可能太暗了。Royal #3B4CCA 在 Midnight #121426 上就沉下去了。深色主题请用更浅的蓝。
深色模式的按钮应该是什么颜色?
只要能从深色底上跳出来就行。Electric Lime #C6F432、Hot Pink #FF4F9A 和 Amber #FFB020 都可以,因为明亮的颜色在夜里会发光。
最好的深色模式背景色是什么?
近黑色,比如 Graphite #17181C 或 Coffee Black #1B1610,而不是纯黑。它和米白搭起来更柔和,同时还能让强调色发光。
来源
- 色彩名称和十六进制色值来自 Forge 上的 UX Brainy 色彩集,第 05、09 和 10 期。对比度按 WCAG 2 公式,对照每种颜色所在的底色计算。
- 文字和形状的阈值依据 W3C WCAG 2.2:Contrast (Minimum) 和 Non-text Contrast。
- Material Design 的深色主题把主文字设为 87% 的白:Material Design, Dark theme。
- 最初作为三组轮播图发布于 UX Brainy:在白底上好用的强调色,在深色模式下可能消失、适用于浅色和深色模式的一个强调色,只在中间调有效和深色模式不需要纯白文字。
Want a dark theme designed and tested for your own product, not borrowed from the light one? Our team designs interfaces that hold up in both themes.
Get Started
