Colorpod 色彩工具 – 探索之路

1. 什么是美的图表配色？

我们认为需要符合三个基础标准：数量合理、足够区分、和谐韵律。

关于配色这件感性的事情，每个设计师定义美的角度和方式是不同的，正如一千个人心中有一千个哈姆雷特一样。Google、阿里巴巴、百度、Adobe 等公司都给出过一系列配色方案，但是基于不同的应用场景、平台规范和品牌特性，在实际呈现上各有不同，所以很难去定义一套通用且美的图表配色。于是我们思考有没有可能总结一些基础的评判标准并尝试生成一套合理的图表配色色板呢？

首先，我们觉得第一点是数量合理，不能数量太少以至于根本无法满足实际应用的需要，也不能数量太多，因为会带来色彩是否可以被区分的问题。第二点是要有足够的区分度，无论是色相还是明暗程度，一套分类色板中的所有色彩一定是可以被人眼区分的。第三点是配色在整体视觉上要和谐，通过调整色彩的排序来形成一系列的韵律感。于是，我们带着这三点标准，开始一步步解决配色过程中遇到的问题。

2. 一套分类色板应包含多少个色彩？

我们认为一套应用于图表配色的分类色板，应该包含 8~10 个色彩。

关于色彩数量，我们花时间去了解了业界熟知的两个研究，想从已有的研究结果中找到一些可以参考的信息。

第一个是色彩命名实验，我们从一名研究计算机科学的教授 Colin Ware 的一本名叫《2013 Information Visualization Perception for Design》的书中了解了这个实验。在1986年，教授 Post 和 Greene 在一个暗光源的房间中，放置了一台电子显示器，实验参与者需要对 210 个色彩进行快速命名。结果表明，有 8 个色相（红、橙、黄、绿、青、蓝、紫、粉红，其中不包括白色）的识别正确率达到了 75% 以上。虽然这个实验是在特定的暗光源下进行的，但是在色彩分类上给了我们一些启发。

第二个是孟塞尔颜色系统，是由美国艺术家孟赛尔在1898年创制一套通过明度、色相和彩度三个维度来描述颜色的方法，在1930年代被美国农业部采纳为泥土研究的官方颜色描述系统，至今仍是一个较为通用的比较颜色的标准。在这个系统中，色相被均分成 5 种主色，然后再互相调和成 5 种中间色，于是得到了 10 个色相：红（R）、红黄（YR）、黄（Y）、黄绿（GY）、绿（G）、绿蓝（BG）、蓝（B）、蓝紫（PB）、紫（P）、紫红（RP）。

结论：一套分类色板包含 8～10 个不同色相的色彩比较合理。

3. 如何生成一套分类色板？

我们认为使用色彩关系进行取色是生成一套包含 8-10 个色彩分类色板的一种比较稳定的方法。

为了给 ADUI （微信广告设计规范）提供一套图表配色，我们尝试了三种方法进行取色，分别是分区间取色法、色彩关系取色法和经典比例取色法，每种方法各有利弊。

分区间取色法

我们在 HSB 色彩空间中通过控制色相，饱和度，明度进行取色，色相被分成了 8 个区间，通过 2 个不同的区间集合可以生成 9 个颜色。每个步骤都有特定的生成逻辑，主要是以 30° 的倍数取目标色旋转的角度，再调整饱和度和明度为固定值，生成其他颜色。第一步，先以 ADUI 的主题色绿色为目标色，落在蓝绿色区间中，顺时针旋转 60°的同时，饱和度和明度均改为固定值 90，可以得到第二个颜色蓝色。然后，把第二个蓝色按照区间中对应的逻辑再生成第三个颜色黄色。第二步，把ADUI 主题色绿色、生成的蓝色和黄色放在第二个区间集合中，具体集合内的生成逻辑如下图中所示，一共可以生成 6 个颜色。这个方法为了将生成颜色在色相上形成差别，人工干预的程度比较大，生成逻辑比较复杂，对于开发来说成本比较大。

优点：9色之间有差别，色相均匀

缺点：生成逻辑复杂，开发成本大

色彩关系取色法

我们通过相似、邻近、中差、对比、邻近互补和互补这 6 种色彩关系可以依据一个主题色生成另外11个颜色，使用 HSB 的色值度量，S 和 B 值保持不变，只在 H 值上进行变化取色，过程中我们通过人眼识别的方式去除了和主题色相似的绿色以及和红色相似的玫红色，就得到了一个包含 10 个颜色的色板。这个方法用常规的色彩关系来生成颜色，可以保证生成结果的稳定性，但是过程中还是需要人工来辨识相似的色彩以确保颜色在色相上的差别。

优点：生成结果可控，色相均匀

缺点：需要人工辨识相似色来确保色相可区分

经典比例取色法

我们尝试用经典的数学或者音律比例在色环上进行取色，依然使用 HSB 的色值度量，S 和 B 值保持不变，用主题绿色的 H 值上乘以三个比例值来进行取色，分别是黄金比例 1.618、音乐和弦 Perfect 4th 1.333和自然底数 2.618。可以看出在三个比例影响下生成的结果中，黄金比例的方法相对较好，可以生成 9 个不同色相的颜色；用音乐和弦 Perfect 4th 方法生成的颜色局限在四个色相中，只能随着取色数量的增加在整体上发生偏移以获得更多的色相，这种对于随机取色来说意义不大。用自然底数的方法生成前四个颜色的结果是比较好的，从第五个颜色开始就产生了相同色相的颜色，虽然会每隔出现一个不同色相的颜色，但是总体来说也只能生成 6 个色相不同的颜色，之后也只能随着取色数量的增加以获得更多的色相。

优点：生成数量符合要求

缺点：生成结果不可控，需要人工辨识来去除相似色

结论：使用 “色彩关系取色法” ，生成结果稳定，色板包含的色相数量最多，后续可以依据色相差距的数值来判定色相相似的情况以替代人工辨识的方法，从而保证生成颜色的色相可区分。

4. 如何检验色板中的色彩区分度？

我们认为色彩区分度可以通过 CIELab 色彩空间中的色彩距离进行量化。

用色彩关系取色法生成的这套 10 色色板仅仅是看上去可以被区分，于是我们在想如何科学地量化色彩区分度。CIE（国际照明委员会）创造了第一个采用数学方式来定义的色彩空间 CIEXYZ，它几乎是所有其他色彩空间的基础；然后他们通过一系列单色视觉实验，确定了电子屏幕上可显示的色域 CIE RGB，然后再通过模拟人眼的非线性感知，确定了人眼在电子屏幕上可识别的色域 CIE Lab。

首先，CIE Lab 作为一个感知上统一的色彩空间，其中给定的数字变化也对应于相似的感知颜色变化，我们可以通过欧几里得公式，以 CIEDE2000 为标准计算出两个颜色的距离，这个距离可以映射到相似的色彩区分度。

其次，色彩距离需要有一个标准参考值。目前两个理论支撑比较全面的色彩工具给到我们的答案是，Colorgorical 会把生成色彩之间的距离控制在 25 以上，i want hue 标注了容易分辨的色彩之间的距离需要大于 60。

最终，我们有了一把评判区分度的标尺，当人眼没有任何视觉障碍时，色彩距离在 25 到 60 之间，是可以被人眼分辨的，通过测试我们还发现最小值达到 18 时，人眼也可以分辨，但是小于 18 时人眼就不易分辨了，所以我们设定可以分辨的色彩距离在 18 到 60 之间，容易分辨的色彩距离是大于 60，不易分辨的色彩距离是小于 18。（注：此处描述为前期对区分度制定的基础规则，下文检验功能章节会着重解释 CIE Delta E 2000 的最新评判标准）

结论：容易分辨的色彩距离为 X ＞ 60，可以分辨的色彩距离为 18 ≤ X ≤ 60，不易分辨的色彩距离为 X ＜ 18

5. 如何调出和谐有韵律感的色板？

我们认为通过调整色彩亮度可以生成视觉和谐、有韵律感的色板。

首先，我们发现不和谐的原因是整体亮度不够统一，才会出现脏色、颜色太深的情况，通过一篇早期研究亮度、对比度和人类视觉关系的论文了解到，对于人眼感知来说，在 CIElab 色彩空间中明亮舒适的亮度范围是 50 到 90 之间。

然后我们通过 Colorgorical 这个工具，在色相不变的情况下，控制亮度的区间只在 50 到 90 之间，这样就可以得到一组亮度均匀且合适的颜色，我们发现结果中深蓝色和紫色的色彩距离小于 18，代表这两个颜色的区分度很低，因为已经有一个天蓝色了，所以就去掉了这个深蓝色，得到了下方的 9 色色板。

确定了 9 色之后，我们开始考虑韵律感这件事情，其实就是找色彩的变化规律。我们尝试用色彩关系结合亮度节奏进行实验，在实验过程中会限制两个相邻色彩的亮度差尽量在 20 以内，红色作为一个比较特殊的色彩放在最后，实验结果可以总结为三个比较典型的形态，双峰双谷、单峰单谷和峰谷交替，在数据可视化应用中也分别带来了跳跃感、连续感和反差感三种不同的韵律感。

生成的 ADUI （用于微信广告数据可视化）和 Onedesign （用于腾讯广告投放平台）两套图表配色，作为预设色板内嵌在 Colorpod 里面。

6. 序列色生成如何再进化？

我们的目标是：保证亮度的均匀性、优化色彩的普适性以及智能生成最多 20 阶序列色。

序列色（Sequential Colors）是一种通过在2个端点颜色做渐变（或者通过一个主色调的较亮和较暗版本作为渐变的端点），得到的一组颜色。通常在序列色生成算法中，只需通过一个主色调，来生成其不同明暗的色彩渐变。这在UI设计、数据可视化设计中，应用广泛。下方是ColorBrewer的序列色示例。

目前市面上序列色的生成工具种类繁多，然而我们在实际业务的应用中，发现它们存在一些问题，往往需要对生成的结果进行较多的人工干预。

为此，在开发自己的工具之前，我们对这些工具进行了调研，总结出以下一些共性的问题：

1. 色相漂移

比如 google material color tool 中，序列色部分生成结果与主色调偏差较大（下图左侧）。

2. 明暗区分度过低

比如 coolors.co 中部分颜色在序列中过于接近，难以分辨（下图中间）。

3. 颜色过渡不平滑

有些部分又会发生颜色的突变，视觉上过渡不够均匀（下图右侧）。

4. 相同级别，亮度差异大

通过亮度比较（右图）可以明显看出，对于相同级别的序列色，亮度差异较大。

解决方案

针对以上问题，我们进行了有针对性的序列色生成算法设计。

其目标是：

1. 保证亮度的均匀性

相同级别亮度近似相同，不同级别间的过渡均匀平滑。

2. 色彩普适性

适配所有输入色彩，保证色相稳定不偏移

3. 智能生成

只需配置一个主色，通过科学的算法规则自动生成整个序列

具体来说，针对问题亮度过渡均匀性，辨识度，以及相同级别颜色亮度的稳定性问题（问题2，3，4），我们根据需要生成的颜色数量，动态划分每个序列色级别可用的亮度的区间。

通过计算主色的亮度位置，推导出每个序列色在亮度区间中的具体位置，通过这种对亮度分割+限制的策略，保证每个颜色的亮度都与相邻级别的颜色，有着相同的亮度距离。同时保证不同主色调，相同级别颜色之间，亮度差异尽量小。

接着，针对色相偏移的问题（问题1），我们固定色相分量不变，通过调整除色相外的其他分量，来搜索出亮度与目标值匹配的颜色，从而能够得到色相稳定的序列色结果。

优化结果对比

通过对比可以看到（如下图），Colorpod优化后的序列色生成算法，在色相的保持度，以及颜色亮度区分、均匀性上，都有效地解决了现有工具的问题。

序列区分度、色相保持度良好

不仅如此，Colorpod支持生成至多 20 个序列色级别，提供更多的颜色供设计师选择。

7. 色彩需要哪些检验方式？

基础检验方式包含区分度检验和色盲模拟检验。

基于 CIE Delta E 的区分度检验

Colorpod 和很多其他色彩工具一样，内置了WCAG 2.1对比度检验能力。通过标准的普通文字/大文字/图形和用户界面组件三个维度，得到颜色在不同背景下的对比度，是否能够保证足够的人眼辨识效率，从而有效指导UI设计中的色彩选择。用户可以自由选择色板中的颜色进行对比，实时预览、查看结果。

WCAG 2.1的检测针对UI设计中，前景和背景这两种不同语义的颜色的对比，是有很效的；然而我们发现，对于其他应用场景，如数据可视化，对颜色的语义往往会对应图表中的系列颜色，它们的颜色语义显然与WCAG检测中的不符。并且在实际应用中，常见的图表系列颜色（比如图中的蓝色和绿色）也往往难以通过WCAG的检测。

为了解决这个问题，我们通过调研，选择 CIE Delta E 2000 作为相同语义颜色间区分度的评判标准，主要是基于以下的考虑：

与人眼感知更加线性，即delta值相差越大，视觉感受差异等比例变大
数值大小具有实际感官意义：

≤ 1.0: 人眼无法区分

1-2: 通过仔细观察可区分

2-10: 可区分

11-49: 是临近而非互补的颜色

≥ 50: 是互补而非临近的颜色

100: 颜色互为反色

因此，更加适合上述的应用场景。同时为了用户能够得到一个更加直观、有指导性的结果，我们把delta E的值，划分为通过、警告、错误的三个阈值范围，帮助用户避免出现色板中颜色难以辨识的情况。

为了与 CIE Delta E 检测相适应，我们还重新设计了与之相匹配的检测示例图形。通过电视信号的测试图形中得到启发，用户可以根据新的检测图形，观察块面的对比、线条的细节、以及不同方向和尺度渐变下的分辨效果。

色盲模拟功能

我们也从颜色的角度，针对色盲人群，提供无障碍的帮助。

针对现有的色盲模拟工具，模拟结果存在各种差异的情况，我们依据论文[9]重新实现了模拟算法，并对结果进行了正确性验证，使得模拟效果更精准。

在 Colorpod 中，提供了多种色盲模拟的效果预览。并结合基于前文所述的CIE Delta E区分度检验，对色盲状态下相冲突的颜色，实时显示警告和分组高亮，从而方便用户进行高效地处理。

8. Colorpod 的使用场景有哪些？

基础的使用场景包括：序列色应用、通用组件配色检验和色板导入 Figma。

序列色应用

如果要给一个激活态的卡片按钮配色，设计师会直接使用规范的序列色，但是遇到了角标的底色有点深，而规范的序列色色阶不够用的问题时怎么办？通常做法是设置透明度，然后再吸取画面中的颜色，改成纯色色号，这个过程中需要多次调整。

现在有了 Colorpod，就可以通过规范的主题色生成最多 20 个色阶的序列色，直接选择 02 号色，就可以达到之前的效果了。

对于常规 10 色阶的使用有一些建议可供大家参考，例如在做文章卡片的时候，图形背景可以用 01-03 浅色区，文字部分可以用主题色向上的临近深色区，在做图标设计的时候，遇到渐变效果，可以考虑中间隔一个色号取色。

组件配色检验

在工具里面包含了wcag检验工具，可以满足日常对UI组件进行无障碍检验的工作，输入文字和背景颜色就可以查看对比度是否达标。

色板导入 Figma

目前可以通过 figma tokens 来同步配色规范，需要手动复制代码，粘贴到插件中完成色板更新，这里我们也在考虑更人性化的体验操作。

参考文献

Colorgorical: Creating discriminable and preferable color palettes for information visualization Connor C. Gramazio, Student Member, IEEE, David H. Laidlaw, Fellow, IEEE, Karen B. Schloss
ColorBrewer.org: An Online Tool for Selecting Colour Schemes for Maps Mark Harrower1 and Cynthia A. Brewer2
2013 Information Visualization Perception for Design Colin Ware
Moderncolormodelshandprint-handprint: modern color models
Color Use Guidelines for Mapping and Visualization CYNTHIA A. BREWER*
Theory of brightness and color contrast in human vision Author links open overlay panelDorotheaJamesonLeo M.Hurvich
Light Energy and Brightness Sensation R. W. G. HUNT
Wyszecki, Günther (November 1963). “Proposal for a New Color-Difference Formula”. JOSA. 53 (11): 1318–1319. doi:10.1364/JOSA.53.001318.
Machado, G. M., Oliveira, M. M., & Fernandes, L. A. (2009). A physiologically-based model for simulation of color vision deficiency. IEEE TVCG