如何快速实现界面配色问题：#369c法则

设计过程中有时会采用两种不同的色彩模式，常用于白天与晚间模式切换

当背景色由熟悉的白色变为深色，情况就不一样了。

原本在白色背景下，文字有多种色阶，而到了深色背景下，不同字符该用什么颜色，一时间反而没有了头绪。于是，当时有很多字段都使用#FFFFFF进行处理

但这么做，显然不太妥当。

设计过程中发现大家常用的文字颜色规范： #333333、#666666、#999999、#CCCCCC    简称“369C”  非常实用也好记，后来发现也是有一定规律的

打开软件在调色盘后，将RGB（红Red、绿Green、蓝Blue）切换成HSB（色相Hues、饱和度Saturation、亮度Brightness），你会发现 #333333、#666666、#999999、#CCCCCC 在HSB中蕴含一个规律：四种颜色的Brightness分别为：20、40、60、80（亮度范围是0~100）

而黑色#000000刚好对应Bri为0，白色#FFFFFF对应的Bri为100

页面中分割线采用的色值为#E6E6E6，对应的Bri数值为90

根据HSB中发现的字色规律：“369C”不同字符亮度相差的20，Bri 0~100进行五等分，梳理出一套可以用于iPad暗黑模式上文字配色规范：

· 分析思路

首先，基于“369C”不同字色，亮度相差的20这个规律，可以得出：

    · 标题字符#333333（HSB 0,0,20）与白色背景#FFFFFF（HSB 0,0,100），亮度相差80

    · 内容字符#666666（HSB 0,0,40）与白色背景#FFFFFF（HSB 0,0,100），亮度相差60

    · 辅助字符#999999（HSB 0,0,60）与白色背景#FFFFFF（HSB 0,0,100），亮度相差40

    · 置灰字符#CCCCCC（HSB 0,0,80）与白色背景#FFFFFF（HSB 0,0,100），亮度相差20

在白色背景下，标题字符用@333333（HSB 0,0,20）

那在暗黑模式下，标题字符应该用什么颜色？是否应该用白色#FFFFFF？

根据文字配色的基本原则：纯白背景上不要出现纯黑字色，黑色背景上不要出现纯白字色。因为这两种方式都会增大眼疲劳（Eye Strain）

解决方法是用“浅灰”背景代替纯白色；或是在黑色背景里将浅灰作为字色。这两种方式都可以降低眼疲劳，令人在阅读内容时感到更加舒适。

既然在黑暗模式下不适合选用#FFFFFF，那显然使用#CCCCCC是一个比较好的选择。

这样一来可以得出一个黑暗模式下的配色方案：

    · 标题字符#CCCCCC（HSB 0,0,80）

    · 内容字符#999999（HSB 0,0,60）

    · 辅助字符#666666（HSB 0,0,40）

    · 置灰字符#333333（HSB 0,0,20）

这样方案可以确保不同文案之间的对比度相对均衡。

· 思路延展

上述的解决方案遗留一个问题，即标题色与背景色的亮度对比度差值无法得到保障。

要知道，白色#FFFFFF （HSB 0,0,100）背景色     标题字符#333333 （HSB 0,0,20）与背景色亮度差值普遍在80（Brightness ）

如果黑暗模式下标题字符为#CCCCCC （HSB 0,0,20）要与背景色亮度差值保持在80 （Brightness ），那暗黑模式的背景色必须是#000000 （HSB 0,0,0）。如果暗黑模式采用全黑，页面将无法通过阴影等效果构建视觉层次，如下图：

有没有一个简洁的办法，可以在保障不同字色对比度均匀的同时，保障标题色与背景色的对比度呢？

有个显而易见的办法：先确认背景色，再依次提高亮度，这要就得出了一套兼顾两者的字色规范，如下图：

不过这个方案有个缺点，就是上推后的标题色，很容易接近白色，故不考虑。

这样一来，如果继续在0~100里大转似乎很难得出好的解决方案。

这个时候，不妨换一种视角，用不透明度（Alpha）重新理解“369C”的规律，从中可以得出以下结果：

    · #333333（HSB 0,0,20）= #000000，Alpha 80%

    · #666666（HSB 0,0,40）= #000000，Alpha 60%

    · #999999（HSB 0,0,60）= #000000，Alpha 40%

    · #CCCCCC（HSB 0,0,80）= #000000，Alpha 20%

暗黑模式下，字色可采用

    · 标题字符 #FFFFFF，Alpha 80%；

    · 内容字符 #FFFFFF，Alpha 60%；

    · 辅助字符 #FFFFFF，Alpha 40%；

    · 置灰字符 #FFFFFF，Alpha 20%.

依靠改变不透明度（Alpha）实现的字色规范。可以同时满足：

    1.字与背景色的对比度

    2.字与白色的对比度

    3.字与字的对比度

这三个限定条件。

另外，即便暗黑模式下背景色有些许差异，也同样适用。下面是白色+不透明度在三种暗色背景上呈现的不同色值：

通过上图可知，采用透明度的方案，可以避免因为背景调整而调整字色。