/引言

基于前两篇“由理有剧”对暗黑模式的探讨，此篇文章则围绕在暗黑模式下的可视化配色进行展开探讨。

网络上可参考的官方配色如AntDesign、MaterialDesign都给出了相应的黑、白模式下的调色原理及自动化调色系统（输入一个颜色值，便可得到相应的渐变色板）。但经过尝试，两套系统生成的颜色并不适用于我们的产品特性，换句话说：自动生成出来的颜色与我们想要的差强人意。

“那怎样结合我们自己的产品特性，并基于暗黑模式，调配出理想的颜色”便是作者想要研究的问题，此篇文章则深入挖掘的是一个问题中的分支——“调配出理想的、在暗黑模式下的可视化图表配色”。

/“由理有剧”系列篇03：暗黑模式-可视化配色分析及研究

文章大纲

1、一个颜色的解构；

2、颜色中参数之间是怎样互相影响的；

3、利用这种影响关系，调配出理想的可视化颜色；

4、这样做的意义

一、一个颜色的解构

以作者在工作中常用到的主题色作为参考示例：#5477FF（定义为商务蓝）背景色：#141414

参数释义：

H色相：通过调整颜色的色相值，可以区分不同的色彩倾向，保证在相同背景上颜色之间的区别性。

S饱和度：通过调整颜色的饱和度值，可以区分同一色相颜色的纯灰程度，提升颜色的延展性。

B明度：通过调整颜色的明度值，可以区分同一色相、饱和度颜色的亮暗程度，同样提升颜色的延展性。

CR对比度：参考一个颜色与背景的对比度参数，同时遵循WCAG-Web内容无障碍指南，保证在相同背景上每个颜色的识别性、可读性，更好地建立可视化颜色的使用规范。

（图中展示的CR数值是#5477FF与背景色#141414的对比度）

参数分析：

变量：H、S、B

因变量：CR、Hex

变量、因变量之间的关系：H、S、B是一个颜色的三个维度，基于人类对于颜色的色彩感知，明确地帮助我们描述颜色三个维度的特性，三个参数的调整使一个颜色发生变化，一个颜色发生变化会相应地影响Hex标签代码以及该颜色与其他颜色（这里指背景色）的CR对比度参数变化

在这里我们选择HSB颜色模型，正是为了更好地表达我们我们对于一个颜色的感知，帮助我们通俗地理解一个颜色的构成

二、颜色中参数之间是怎样互相影响的

上面我们通过解构颜色，归类出变量及因变量两组参数，下面我就来看一下变量参数的调整是怎样影响因变量参数的，看看我们能够从中发现、挖掘出怎样的有效信息

首先，我们可以选取色相明确的两个H值来建立对应的色彩表，从而发现其影响规律

这里我们挑选两个识别度较高的色彩倾向：红色、蓝色

在取色器上分别取H值：0/360、228 (我们在显示器上看到的两个取色器的颜色，都基于S值为100、B值为100)  

基于已选好的H值，我们将S值和B值取10～100之间的整十数进行交叉排列

横向为明度B值、纵向为饱和度S值，将每个颜色与当前深色背景颜色的色彩对比度标记到其颜色内

通过上面的色彩表，我们对于变量对于因变量的影响感知可能稍弱一些，我们可以变换一个角度来看这两个图表，

于是我们建立了相对应的折线图，折线图能够更好地帮助我们理解其相互影响关系

折线图一：固定H色相和S饱和度的参数值，看看B明度的参数变化对CR对比度的影响

图表结论：

深色背景上，色相（H=0/360、288）、饱和度（S=100%）两个参数固定的情况下

这个颜色的明度参数值（B）越大，与背景的对比度也就越大

可以得到两者成正比关系

折线图二：固定H色相和B明度的参数值，看看S饱和度的参数变化对CR对比度的影响

图表结论：

深色背景上，色相（H=0/360、288）、明度（B=100%）两个参数固定的情况下

这个颜色的明度参数值（S）越大，与背景的对比度也就越小

可以得到两者成反比关系

折线图三：将上面两组表格结合起来看，看看H色相对CR对比度的影响是怎样的

图表结论：

深色背景中，饱和度（S）、明度（B）两个参数相同的情况下

色相（H）相对比较，颜色越冷，与背景对比度越低

综上所述：

根据图一与图二得出的结论：

在调整一个颜色时，保持其色相不变的情况下，调高明度B、降低饱和度S会提高这个颜色与背景的对比度，反之则降低，所以，我们在调整颜色的各项参数时注意明度、饱和度对颜色对比度的影响

根据图三（两张图表结合）得出的结论：

相同饱和度和明度、色相不同的颜色越冷，与背景的对比度越低，反之越暖，则越高，所以，我们在调整颜色的各项参数时注意色相的冷暖（冷和暧是相对，不是绝对）

通过上述结论，我们就可以在深色背景上，有理有据地调整相应参数，得到理想的颜色，但这还不够，我们想要怎样的颜色呢？下面我们继续探讨

三、利用这种影响关系，调配出理想的可视化颜色

要调配出理想的可视化颜色，首先考虑我们想要怎样的颜色？

我们需要参考公司产品在浅色模式下所使用的可视化配色

颜色分为基础数据和特殊数据两个部分，特殊数据颜色一般用于映射金融类数据、提示类信息

从上图可以看出：

直观感受：当前所有项目系统中的可视化数据颜色（上图），给予我们的直观视觉感受：明亮、醒目、活力；

色彩调性：浅色模式下颜色的使用偏向高亮、高饱和度、高亮度调性，这些颜色很好地保证了在浅色背景下颜色之间的区别度、识别度

我们将这些颜色放到深色背景上

从上图可以看出：

部分颜色放到直接放到深色背景上，还是能够保持其与背景不错的对比度、协调性，

但个别颜色（带有橘色标签的颜色）与其他颜色相比，明显出跳，个别颜色产生了视觉震动

我们可视化图表演示一下

视觉效果一目了然，将图表的颜色保持不变，从浅色模式直接放置到深色模式下，可以明显地感觉到：右侧图中部分颜色明显不融于整体，过亮和过暗的颜色块都会让我们视觉失衡

不协调的部分包括：红色-过于高亮，纯度过高；紫色亮度较低，与背景的对比度稍差；青色亮度过高，与背景的对比度太大

我们再用文字演示一下

右侧的文字颜色明显出跳，且长时间观看这样的颜色，会让我们视觉疲劳、厌倦

究其原因：

在深色模式中产生的不适感，其实就是“明度差”的作用

明度差其实是色彩与背景环境之间产生的一种关系，这种关系用来比喻“人”与“社会环境”比较贴切

一个高明度、高饱和度的颜色（活泼热情的人），放到一个明亮的背景中（开放和谐的环境），我们会觉的这个颜色（这个人）在当前背景中非常和谐，因为明亮的背景可以消解颜色中的高亮因素，不会过于跳跃；但是，当我们把它放入到昏暗的背景中（保守沉闷的环境），不舒服的感觉开始出现了，个别颜色过于跳跃，验证了我们上面所点名的几个颜色

而颜色还是那个颜色（人还是那个人），只是背景色（环境）变了

引用一个实例来验证明度差

总结规律：

当背景为亮色时，明度最暗的地方会被最先注意、识别；当背景为深色时，明度最亮的地方会被最先注意、识别

“高明度差”帮助我们在一个背景中快速地识别颜色，但是却不适合我们长时间观看，就像我们看亮（对比度高的）的东西瞳孔会缩小、暗的（对比度低的）东西瞳孔会放大，它们会让我们的眼部神经产生疲劳

所以我们想要的颜色：

在深色背景中，我们需要的是和谐的色彩关系，并且延续浅色背景中颜色“高识别度”的特性

要注意的问题：

1、浅色主题中的颜色直接置入到深色主题中，我们要经过一定的考量，尽量避免直接使用

2、要制造和谐的色彩关系就需要消除高低不平的“明度差”

配色借鉴：

在调配过程中我们增加了一个小环节，结合ECharts、MaterialDesign两套系统的可视化配色进行了简单的研究，我们不妨借鉴一下它们的配色，也许这能给我们调配理想的可视化颜色提供一些借鉴性的思路

首先引出ECharts可视化图表配色

图表简述：

色彩模式：ECharts可视化图表所使用的色彩模式分为：‘defalt-常规’、‘light-高亮’、‘dark-暗黑’，前两者模式的背景色均为浅色，这里所引用的案例模式为第三种‘深色模式/暗黑模式’

图表类型：图表案例引用‘南丁格尔玫瑰图’，此类型多用于表示周期性、时间性的数据对比，扇形颜色块半径越大、所代表映射的数据量也就越大，两者成正比关系

色彩感知：

直观感受：ECharts案例整体使用的色彩给予我们的视觉直观感受：柔软、稳重、舒适、和谐，不会产生突兀、刺激的视觉效果，个别颜色有些许陈旧、年代感（是个伏笔）

色彩调性：整体颜色的使用偏向中灰调、低饱和度，这类颜色在深灰色背景上的呈现效果和谐适中

颜色运用：

有色：有色模式下，图表使用的每个颜色都有较为明确的色彩倾向，保持了较高的色彩识别度，对于普通的观者人群来说能够得到较好的阅读体验

去色：去色模式下，图表使用的临近颜色使用了不同的明度，通过图表可以清晰地判断出每个区块的面积以及区块之间的分界，对于患有色彩分辨障碍的人群来说也能够得到较好的阅读体验

提取颜色：

颜色规律：

色彩对比度（CR）：在深色背景上，色彩倾向不同的颜色，其使用的对比度≤6.5，处于3.5～6.25间隔区间内； 

色彩饱和度（S）：在深色背景上，其使用的颜色饱和度参数≤65，处于27～65间隔区间内；

明度（B）：在深色背景上，其使用的颜色明度都≥63，处于63～100间隔区间内

其次引出MaterialDesign可视化图表配色

图表简述：

色彩模式：MaterialDesign移动端的颜色应用于UI设计分为浅色主题和黑色主题，这里引用两种模式进行颜色对比

图表类型：图表案例引用柱状图、条形图，这两种图表多用于表示一个维度的不同主体之间数据量的大小对比

色彩感知：

直观感受：MaterialDesign案例整体使用的色彩给予我们的视觉直观感受：高亮、醒目、活力，颜色从浅色主题过渡到深色主题依然能够保持响亮的特点且不突兀刺激

色彩调性：黑色主题整体颜色的使用偏向高亮、中饱和度调性，这类型颜色在深色背景中能够给人响亮的视觉感受

颜色运用：

浅色背景：MaterialDesign在浅色背景上使用的颜色普遍都呈现明确的色彩倾向，色彩识别度极高，且与浅色背景产生鲜明的对比，更加倾向于通过颜色吸引用户的关注度

深色背景：在深色背景上如果继续使用原颜色（例：两组中处于中间的数据卡片），形状或文字都可以很明显地感觉到视觉震动，对比度低且阅读困难，MaterialDesign通过降低原颜色饱和度以适应深色背景

颜色提取：

颜色规律：

1、色彩对比度（CR）：在深色背景上，色彩倾向不同的颜色，其使用的对比度约为≈6.4（平均值）

2、色彩饱和度（S）：在深色背景上，其使用的颜色饱和度参数≈50（平均值）

3、明度（B）：在深色背景上，其使用的颜色明度参数≥99

我们从中借鉴：

MaterialDesign更倾向于使用中纯度、高亮度的颜色，整体呈现对比度、识别度较高的特性，与我们想要的颜色基本一致，这为我们提供了确定性、方向性更加明确的颜色参数配比，所以我们的配色方法论可以从这一参数配比进行入手研究

所以，根据分析两个可视化系统配色所得出的结论，并结合色彩理论常识，可以总结出我们从参数配置方面得到的规律和结论

开始调色：

1、列举需要调整的颜色

还是拿出我们产品浅色模式下的可视化颜色

从品牌延续来看：第一个品牌色#5477FF在深色背景也依然保持了很好的对比度和识别度，且为了保证品牌设计的延续性，这个颜色我们默认参数保持不变，继续沿用

从直观感受来看：青色和淡黄色过高，对比刺激不舒服；紫色对比度较低，影响了可读性；红色和粉色保持了不错的对比度，但从饱和度角度来看这两个颜色稍稍偏高

针对品牌色的对比度为4.78，我们可以将这个数值作为一个标准，调整我们对于对比度的需求，我们可以将“对比度：3.5≤CR≤7.0”调整为“对比度：4.5≤CR≤7.0”，（4.5:1的对比度符合WCAG的AA级标准，即文本图像至少4.5:1的对比度）

选色标准：

1、对比度：4.5≤CR≤7.0

2、饱和度：50≤S≤65

3、明度：70≤B≤100

4、色相：基本保持不变，依据实际情况适当调整

这样做可以帮助我们在之后的研究中缩小选择范围，让我们更加精准地找到所需的颜色

2、依据选色标准，建立色彩表

根据我们总结出来的选择标准，建立对应色相的色彩表，选定基本颜色

基本数据色-1

基本数据色-2

基本数据色-3

在调制黄色的时候，遇到了一个问题，紫色所框选出来的颜色看上去偏向土黄色，单纯从视觉上来看，显得有些“脏”；从色彩理论上来看，在纯色中混入灰度，会使这个颜色显得无序，“无序”意味逐渐失去色彩倾向

这里的“脏”指的是不美观，颜色暗淡无活力，这并不符合我们想要的颜色特性

所以，这里我们可以寻找方法解决这个问题：结合到我们上面的调色规则，色相H值我们可以视情况调整

我们在36之上直接剪掉10个数值，用26作为H基本值去尝试一下

基本数据色-4

基本数据色-5

与调整之前的原有颜色进行对比

将两组颜色分别代入图表中，检验颜色的适应性

从两侧的图表中可以看出相对微妙的色彩变化，从浅色模式过渡到深色模式，映射数据的可视化颜色即能够比较好的保持颜色的色彩倾向（识别度），也能够保证在深色背景上的视觉平衡，不会看到某个颜色出跳于界面，相应地降低了阅读疲劳，提升了图表的可读性。

四、这样做的意义

我们积极努力地去向ECharts和MaterialDesign这两个可视化系统学习，它们的配色标准可以用来借鉴甚至直接使用，但我们需要自己建立一个适合我们当前项目在深色主题下的配色标准，这个体系可以保证我们选择颜色的可持续性甚至未来的延展性，这为我们日后的工作提供一套流程，让选择颜色有理可依，而不仅仅靠感受和直觉；

可持续性意味着这个体系需要有很好的适用性，简单来讲是需要在深浅程度不同的背景上，通过这个选色标准都可以找到适合当前环境的颜色，我们所选定的背景色经过了反复斟酌思考，根据不同的环境都需要重新调整可视化配色，日后会慢慢补充、丰富这个体系，让这个体系成为我们的配色依据和标准。

希望以此篇内容作为产品优化阶段的小结，记录整个思考过程，归纳理论、总结经验。