揭秘 Arco 设计公司的调色板算法

Arco Design 色彩在线调试： arco.design/palette/lis…

什么是调色板

先说说什么是调色板吧，在Wiki里是这么解释的。

在电脑图形学中，调色板（英语：Palette）要么是指用于数字图像管理的给定有限颜色组（颜色表），要么是屏幕上一组有限选择的小图形单元（诸如“工具选板”）。

如下，就是一个调色板

不过对于组件库来说，调色板是一个基于某个给定颜色，生成的一份渐变色的颜色表。比如主色、警告色、成功色等，给定一个颜色，生成的渐变色颜色表可以使用在 hover , focus , active 等场景中，方便设计师和研发根据场景去选取合适的颜色。如下，就是一个渐变色的颜色表：

所以，其中最关键的就是，生成这个渐变色颜色表的算法。这篇文章我们就一起，从一头雾水慢慢理清头绪吧。

概念

现在我们一样，处于一个毫无头绪的状态，这时候我们先把一些色彩上基础的概念学习一下。

在颜色系统中，比较常用的颜色模式是 RGB 和 HSV、HSB、HSL。

RGB 模式，即通过红(R)、绿(G)、蓝(B)三基色的通道的变化和相互之间的叠加来得到各式各样的颜色，这个颜色模式也是应用最广泛的一种。

后三个在理念上是差不多的，H(Hue) - 色相，S(Saturation) - 饱和度。

HSV(Value) - 明度，HSB(brightness) - 亮度，HSL(Lightness) 亮度。

色相(Hue) - 色相是指色彩的相貌，在色彩的三种属性中　色相被用来区分颜色，根据光的不同波长，色彩具有红色、黄色或绿色等性质，这被称之为色相。黑白没有色相，为中性。

饱和度(Saturation) - 指的是色彩的纯度，纯度越高，表现越鲜明，纯度较低，表现则较黯淡。

明度(Value/Brightness/Lightness)（亮度）- 明度指颜色的明暗程度。色调相同的颜色，明暗可能不同。例如，绛红色和粉红色都含有红色，但前者显暗，后者显亮。

其实根据上述的了解，首先可以排除 RGB，HSV 模式是更符合我们视觉和需求的一种模式。

初次尝试

一份渐变色，对于我们的视觉，最直观的感觉就是一份从亮到暗的颜色集合，从这个角度，我们不考虑其他因素，单单来通过改变亮度，看看会有什么样的效果。

我们假设需要得到一个包含 10 种渐变色的调色板，我们把基准色放在中间第六个，名为为 name-6，那么往下递减的 name-5，name-4等，我们依次把亮度调高 10%，而向上递增的 name-7，name-8等，我们把亮度依次调低10%。于是我们得出了这么一个调色板。

嗯，确实是渐变色，有这个意思了。

改进

上面的方法，我们仅仅改变了基准色的亮度，所以得到的渐变色很生硬。

我们知道，饱和度决定了色彩的鲜艳程度，明度决定了色彩的明暗程度，我们预期的渐变色是，越往上亮度越大，越不鲜艳，越往下，越鲜艳，亮度越小。

根据这个规律，在数次调整饱和度和明度递变的数值之后，我们得出了一个比较顺眼的调色板。

灰色比较特殊，灰色是中性色，灰色的渐变其实是从白色到黑色的一个渐变。

看到这里你可能注意到了一个很不舒服的地方，就是文字和颜色的对比度，有很多颜色跟字体融为了一体，很难区分。

这里我们需要了解一个概念，叫色彩对比度。

WCAG 2.0 中的色彩对比度

1.4.3对比度（最小）： 文本视觉呈现和文本图像至少要有4.5：1的对比度，以下部分除外：（AA级）

大号文本： 大文本和大文本图像至少有3：1的对比度;

1.4.6对比度（加强）： 文本视觉呈现和文本图像至少有7：1的对比度，以下部分除外：（AAA级）

大号文本： 大文本和大文本图像至少有4.5：1的对比度;

也就是说，当背景颜色和字体的对比度至少要为 4.5 : 1，最好是大于 7 : 1，我们的眼睛才能更好的去分辨背景和字体。

从上图的调色板来看，暗淡的颜色，更适合使用白色字体。我们经过颜色对比度的计算，以 7 : 1 为标准，决定字体是显示白色还是黑色，于是我们得到：

动态梯度算法

以上的方法，通过调整饱和度和明度，得到了一个更具有区分度的渐变色，整体的方向是正确的。但是上述的方法对饱和度和明度的要求很苛刻，因为梯度是固定的16，如果饱和度小于69的话，生成的梯度色就不是最均匀的梯度，如果饱和度小于53的话，就会得到两个饱和度完全一样的颜色，这个算法就不生效了。

基于上述的考量，我们不再固定饱和度和明度递变的值，而是固定色板的最大/最小饱和度（保证这个渐变色的起点和终点的饱和度和明度是固定的），最大/最小明度，然后动态去计算饱和度和明度递变的值，这样，不管基准色的饱和度和明度是多少，我们总能得到一个相对均匀的渐变色。

基准色依旧为6，向上为5份，向下为4份，向上的梯度：(s - min) / 5，向下的梯度：(max - s) / 4。同时为了在过渡的过程中更符合人眼对色彩的认知，微调色相，让冷色更冷，暖色更暖。

通过这个算法，我们得到这样一个色板：

肉眼可以发觉到，这个渐变色的梯度变化更加明显了，而且对饱和度和明度的要求大大降低。

PS：当然，如果想要得到最佳的梯度变化，那么饱和度最佳为 60 左右，明度最佳为 60 左右。

暗黑模式

在浅色色板基础上，主要通过调整S值，来得到暗黑色板：

深色模式的H值、B值与浅色色板H值、B值反向相对应，规律保持不变。

浅色7号色对应深色5号色

浅色8号色对应深色4号色

浅色9号色对应深色3号色

浅色10号色对应深色2号色

浅色5号色对应深色7号色

浅色4号色对应深色8号色

浅色3号色对应深色9号色

浅色2号色对应深色10号色

深色1号色H值、B值需要特殊处理，依据浅色色板的逻辑，延展出深色1号色H值、B值

1. 判断H值区间

以浅色模式6号色为基准：

• 当H值在0-49之间，浅色模式下6号色S值-15，得到深色模式6号色S值
• 当H值在50-190之间，浅色模式下6号色S值-20，得到深色模式6号色S值
• 当H值在191-360之间，浅色模式下6号色S值-15，得到深色模式6号色S值

2. 计算1号-5号颜色梯度色值（往深走）

在以上基础上得到深色6号色S值：

6号色S值为x，（100-x）/ 5 = y 取整

5号色S值为x+y

4号色S值为x+y+y

3号色S值为x+y+y+y

2号色S值为x+y+y+y+y

1号色S值为x+y+y+y+y+y

3. 计算7号-10号颜色梯度色值（往浅走）

在以上基础上得到深色6号色S值：

6号色S值为x，（x-9）/ 4 = y 取整

7号色S值为x-y

8号色S值为x-y-y

9号色S值为x-y-y-y

10号色S值为x-y-y-y-y

更多内容

微信搜索 Arco Design 关注官方公众号，获取更多精品内容～