中性色偏色算法推理

中性色偏色是一种常见的视觉优化手段

将无色彩倾向的中性色「染色」，是常用的提升界面品质的手法，这使界面色彩倾向更加统一。受自然光线影响，日常生活中很难看到纯黑或纯白色，我们看到的大多数颜色都是有色彩倾向的，这样处理，也使界面的色调更符合自然审美。

▲ 无色彩倾向的中性色 vs 偏蓝的中性色

现有的中性色偏色算法

滴墨法

这种偏色算法是由 @竹尔(wenqin.jwq) 提供的，基于 HSB 来计算颜色。
大部分设计师或前端都习惯基于 HSB （又称 HSV）来计算颜色，因为这个色彩模型的值非常直观。
H 是色相，即色彩倾向 [0,255]
S 为饱和度，可以理解为混入白色的量 [0%,100%]
B 是明度，可以理解为混入黑色的量 [0%,100%]

滴墨法的操作：
第一步：获取色相，例如 Ant Design 主色蓝为 HSB（209，91，100） ，色相 H 值则固定为 209；

第二步：确定明度，将 Ant Design 中性色的明度值取了出来：

第三步：确定饱和度值，当洗白衣服时，几滴蓝色墨水滴入，衣服很容易就变成浅蓝；当洗黑衣服时，相同的墨水滴入，衣服几乎看不出蓝色在衣服上有留存。基于这个思路，开始进行「滴墨试验」，往「更白的衣服里滴少点」「更黑的衣服里滴多点」，在上百次尝试后，最终得到一套「滴入墨水」数值。

填入各色值，得到带偏色的中性色：

叠色法

这是在 Andrewchen 的文章中看到的，通过加入一点点品牌色来让文本呈现色彩倾向。具体方法就是，分别在#222、#555、#888、#b3b3b3的一、二、三级中性文本色代表的色块上，覆盖一层10%透明度的品牌色。最后得出了四个层次的文本色。

以上两种算法的缺陷

一、叠色法无法应用与较浅的中性色

叠色法的缺陷更明显，叠色法在文本色上的效果简单直接，但无法应用在较浅背景色上。中性色使用场景如下：

而浅色用于填充背景，填充面积较大，叠加后颜色过重。

二、色相偏移时滴墨法产生的颜色感知明度不同

不同色相对比度不同，即用户感知到的明度不同。通过滴墨法，染色后的中性色对比度高于默认中性色，随着色相的偏移，甚至差距会更大。

三、滴墨法无法应用于暖调主色

摄影中存在白平衡的概念，光线越强，色调越冷，光线越暗，色调越暖。因此当色调偏向暖色会给人昏暗不清的感觉，当中性色偏向暖色时，并不能使内容更加清晰易读。因此以上两套算法都无法对主色偏暖情景做出正确处理。此处需要增加人为干涉。

中性色偏色算法

算法主要基于竹尔的滴墨法，同时需要修复以下两个问题：
1、修正对比度差
2、暖色调主色的中性色不进行染色；

一、修正感知明度问题

通过计算默认中性色序列对比度值，直接固定 CST（对比度） 值，从下图可以看出不同色相 CST 基本保持一致。

二、人为设定冷色调的初始饱和度序列

对比度确定后，调整滴墨浓度即饱和度。实际滴墨法原理更适用于 HSL 模型而不是 HSB 模型。

HSL	HSV/HSB
H是色相 — Hue S是饱和度 — Saturation L是亮度 — Lightness	前面我们提到 H 是色相，即色彩倾向 S 为饱和度，可以理解为混入白色的量 B 是明度，可以理解为混入黑色的量 因此这里的饱和度并非真正的滴墨量

经过和资深设计师的讨论，中性色染色饱和度不能过高。因为中性色大量用于文本，长时间阅读高饱和度的文本，更易疲劳；与此同时，过强的色彩倾向，风格感重，也很容易审美疲劳。因此再次调低了「滴墨」量，初始饱和度序列如下：

三、对暖色调不进行染色处理

在色相朝暖色旋转时，逐步降低饱和度，设定四个节点逐步降低饱和度，在 H=30 时饱和度为 0。

这三个值可以在更多设置中，饱和度旋转阶梯设置。

四、增加 LightMode 下中性色转透明色算法

在 #FFF 背景色下透明色和实色呈现一致。

亮背景下透明色	亮背景下实色	暗背景下
默认用于前景内容（类同 Material 的 “on”color），对背景的兼容性佳	用于无论在何种背景下都保持背景一致	深背景时使用，例如焦点按钮，深底导航；

其他

S 值实际是人为设置的，如何找到最优 S 值实际我们还没有清晰的想法，其实比较期待有专业的视觉设计师来调试。

图中实现算法的工具是由 Kitchen 的工程师编写的，暂未对外开放，有一定可能会在 antd 5.0 中发布。

这篇文章时去年做偏色算法时的记录，做完没多久 materila 3 就发布了，其中关于感知明度的问题在 Google 新发布的 HCT 色彩模型得到了很好的解决。https://material.io/blog/dynamic-color-harmony