设计系统中颜色规范如何建立？方法帮你总结好了
本文探讨如何零基础创建一套完整的颜色规范体系。我们将原理掰开来讲，梳理了实现步骤使其清晰明确易上手，即便没有相关经验，遵循这套方法也能为产品创建一套优质的颜色规范系统。
设计系统三大元素（色彩、字体和图形）中，色彩是非常重要的一环。产品设计中，我们需要定义好系统的色彩架构体系，建立完成后，所有的设计都将围绕着这些色彩进行。定义色彩之前，有一些概念需要提前了解，他们会在定义过程中用到，比如深入了解 HSB 颜色模式的原理和细节，以及由此推导出来的颜色定义方法，再如邻近色和对比色等概念梳理。了解了原理才能更得心应手。
RGB 色彩模式是以颜色发光的原理来设计的，当红光（Red）、绿光（Green）和蓝光（Blue）相互叠合时，色彩相混，亮度相加，是显示器的默认色彩模式，但对人来说并不直观，即便获取对应的 RGB 值也很难想象对应的色彩。相比之下，HSB（Hue 色相、Saturation 饱和度、Brightness 明度）色彩模式更易于理解，使用时能够获得更明确的预期。HSB 也称 HSV(Hue 色相、Saturation 饱和度、Value 值)。
HSB 颜色模式中的 H 指色相（Hue），色值处于 0° 到 360° 之间，即为颜色在色环中的位置。
S 指饱和度（Saturation），值处于 0 到 100 之间，100 为最饱和的颜色，0 为完全没有颜色的灰色；
B 为亮度（Brightness），值处于 0 到 100 之间，值为 0 时颜色为黑色（无论色相和饱和度为多少），值为 100，同时饱和度为 0 时，颜色才为白色，否则会呈现为非常亮的有彩色。
为什么 Brightness 的值会这么表现？我们可以把其想象为一个密闭房间里的灯泡，值为 0 时即为灯关掉了，此时没有光源，无论色相和饱和度怎么变化，都没有光的反射，所以最终的结果呈现为黑色；当值变大时即为灯泡发光强度变大，值为 100 时灯泡亮度达到峰值，此时若颜色的饱和度不为零，即为强光照射在有色物体身上，颜色属性并不会消失。
另外一个重要的点是在 HSB 中黑色和白色并不是对立的存在，想一下我们怎么在取色器中获取白色：将选取框向左上角移动，即为减小其饱和度的同时增大亮度。而黑色是怎么获得呢？只需将选取框向下拉到底，即为将亮度降到最低，不用改变色相和饱和度。
依据这个原理，我们可以对比一下生产颜色序列的两种方法：第一中为仅改变亮度（和获取黑色的方法一致），第二种为同时改变饱和度和亮度（和获取白色的方法一致，提高饱和度的同时降低亮度或降低饱和度的同时提高亮度）。我们可以看到通过第一种方式产出的颜色序列比较呆板，第二种比较丰富自然。
最后一点，HSL（Hue、Saturation、Lightness） 颜色模式和 HSB（Hue、Saturation、Brightness) 颜色模式有什么区别？这两者除了 Lightness 和 Brightness 的区别外，其他都一致。HSL 中的 Lightness 和 HSB 中的 Brightness 的含义是不一致的：Lightness 控制向颜色中添加白的量，为 0 时颜色呈现黑色，为 100 时颜色呈现为白色（无论色相和饱和度为多少）；Brightness 控制白光的强度，为 0 时颜色呈现为黑色，为 100 时颜色呈现与饱和度相关。
HSL 中的黑色和白色是对立的，而 HSB 不是。当 HSL 中 Lightness 的值大于 50 并往上升的时候，和 HSB 中向白色靠拢的逻辑一致（亮度上升&饱和度下降）；当 HSL 中 Lightness 的值小于 50 并往下降的时候，和 HSB 中向黑色靠拢的逻辑一致（亮度下降&饱和度不变）。
下图为 RGB 颜色模式转向 HSB（HSV） 和 HSL颜色模式的原理。
为了更直观的进行色彩定义，我们选用 HSB 作为我们创建颜色规范的颜色模式。
类似色为色环上色相（Hue）相差30°以内的颜色，如绿色的类似色为黄绿和蓝绿，类似色冷暖一致，色调统一和谐，情感特性一致，色相过渡也柔和自然，是非常自然的配色方案。这种配色的组合最常见于自然界，如秋季变化的树叶形成的类似色组合，采用此种配色方案符合日常生活中的颜色感受经验。
同类色指色相性质相同，但色度有深浅之分的一对颜色。（是色相环中15°夹角内的颜色）。
邻近色指色环中相差 60° 的颜色，属于中对比度的色相组，如红色与黄橙色、蓝色与黄绿色等，可以看成色相间隔扩大的类似色。
同类色和类似色的每组颜色之间包含更多对方的色相，过渡更柔和，如朱红以红为主，里面有少量黄色，桔黄以黄为主，里面有少许红色。而相邻色之间则色相差距更大，过渡相对生硬，因此在生成辅助色的时候，建议视具体情况采取同类色或类似色的逻辑。
对比色或互补色可以缓解单色带来的单一视觉刺激和色彩情感，弱化两种颜色的缺点，突出相互的优点，达到一种视觉平衡并让想传递的信息更加明显。在设计系统中我们可以将主色的对比色作为辅助色来使用。
对比色为在色相上具有对比关系的一对颜色，在色相环中的夹角为 120°-180°，夹角越大，对比越强。
在色环中相距 180° 的两个色相的颜色互为互补色，可以认为互补色属于对比色中对比最大的情况。
了解了以上概念之后，我们正式开始设计系统中颜色规范的建立，第一步是确定产品的品牌色（产品主色），品牌色是表现品牌特性的重要视觉元素之一。品牌色的定义过程在这里不做细致说明，一般先确定产品定位，结合调研和相关数据提炼出品牌关键词，通过此关键词去定义品牌色的初始色值，然后考虑可用性等因素去细调颜色的色相、饱和度和亮度。
这里我们采用毒App 的品牌色极光蓝 #00CBCC（H180 S100 B80） 作为主色开始色彩定义。
主色确定之后可通过其确定辅助色，辅助色起到中和主色的作用，在不同的业务需求和场景中通过主色和辅助色的搭配达到最佳效果，同时也可以缓解主色带来的视觉疲劳。通过上面讲的同类色、类似色的原理可获得同色系辅助色，通过对比色的原理可获得对比色系辅助色。另外辅助色还包含中性色，中性色一般不带色彩倾向。
第一步，我们将主色（H180 S100 B80）的色相加减 30° 获得其类似色，即同色系辅助色（H150 S100 B80）和（H210 S100 B80）。
第二步，将主色的色相（H180 S100 B80）加上 180° 获得其互补色，即对比色系辅助色（H360 S100 B80）。
第三步，为了和主色的类似色做对应，取互补色的同类色（色相加减 15°）和类似色（色相加减 30°）。从中选取需要的颜色作为最终的对比色系辅助色。
根据色彩需求取同类色2（H345 S100 B80）和类似色1（H30 S100 B80）作为最终的对比色系辅助色，这样，我们得到了主色和四个辅助色。
上面获得的颜色组会存在亮度不一致和色彩倾向不满足使用场景等问题，这时我们需要对其进行校正，目的是使各个颜色感官明度一致，由图可知：尽管各个颜色的饱和度和明度一致，因为色相不同，感官明度也不同：青色的发光度最高，蓝色就偏低一些。我们可以调整饱和度和明度，使各个颜色感官明度保持一致，维持视觉统一性。
我们如何确定颜色的亮度数值呢？根据国际电联 BT.601 规定的 RGB 到卢马换算公式我们可以获取颜色的亮度数值，由此即可量化调整颜色的亮度。公式如下：Y = 0.299*R + 0.587*G + 0.114*B，其中的 R、G 和 B 即为颜色在 RGB 模式下的各个数值，颜色中红绿蓝的值对亮度的影响并非1:1:1,而是接近3:6:1，绿色含量越多，亮度越大。转换为百分百亮度: (0.299*R + 0.587*G + 0.114*B)/255*100，根据此公式分别计算出颜色组中各个颜色的百分百亮度。
由上图可知，各颜色的亮度并不一致，数值上差距明显，我们希望辅助色的亮度可以和主色统一。增大明度（B）或降低饱和度（S）可提高颜色的亮度值。因不同颜色的感官明度不同，如橙色感官明度比较高，需要区别对待。最终通过数值和感官明度的结合调整颜色使其一致。
获得确定的主色和辅色之后，要根据他们生成对应的颜色序列以满足不同的场景需求。这里有三种方法，一种是在颜色上覆盖不同透明度的黑和白生成颜色序列；第二种和第三种是通过同时改变饱(S)和度和明度(B)的方法获得。
先来讲第一种，通过在颜色上叠加 10%、30%、40% 和 90%（获得最浅的颜色）透明度的白色，叠加 10%、30%、40%、60% 和 70% 透明度的黑色来获得颜色序列。
第二种方法中S 值以 S/5 递减，B 值以 (100-B)/5 递增，获取浅色序列；S 值以 (100-S)/5 递增，B 值以 B/5 递减，获取深色序列。
第三种方法为获取浅色序列时，饱和度(S)依次减 16，明度(B)依次加 5;获取深色序列时，饱和度(S)依次加 5，明度(B)依次减 15（最深颜色的饱和度最多在基准色的基础上加 16）。Ant Design 采用此方法时还会做色相的旋转，这里我们想要获得更通透纯净的视觉观感，不做色相旋转。
对比下来，第三种方法生成的颜色序列过渡顺滑，观感自然舒适，最符合我们的要求。
中性色一般指由黑色、白色及由黑白调和的各种深浅不同的灰色系列，通常无色偏，能调和色彩搭配，也更能衬托有彩色，有利于拉开内容层次，使用户更专注于内容。中性色主要用于文本、背景、图标、边框和分隔线。
中性色需要满足各种不同使用场景，不带色偏的中性色适应性更高，其层级要根据具体需求和场景复杂度去定义。
考虑到中性色在各种场景中（深色，浅色和有彩色）的使用，为确保其视觉上的纯净度，在落地时统一使用透明度来实现。在浅色背景下使用黑色透明度的方式来使用，在深色背景下使用浅色透明度的方式来使用。
通过以上分析，我们得到了一套完整的颜色序列，下一步就是要在实际设计过程中使用并验证其适用性，若有问题可再做调整。通过在产品设计中使用，归纳定义每种颜色的使用场景并做成组件。
但进入实际使用阶段，可能会碰到一个问题：颜色以 Hex 值或者 RGB 值的方式被使用，如 #00CBCC 和 RGB(0,203,204)，这对设计师和工程师都是不直观的，难以预想其效果和使用场景，另外如果系统复杂，也不利于后期维护。
为了解决这个问题，我们引入 Color token，它是 Design token 中的一部分。Lightning Design System 中对 Design token 定义如下：「Design Token 是设计系统中的视觉设计原子。它们是一组有着统一命名规则的实体，用于存储视觉设计部分的具体参数，比如 HEX 色值、间距、尺寸的像素等。使用它可以有帮助为 UI 开发工作维护一套具备可扩展性、一致性的视觉体系。」我们可以将其可理解为一个储存参数的变量（和 CSS 中的类名 Class Name 相似），也可以简单理解为替参数或参数集加上一个容易理解的名称。
简单来说，设计系统中建立颜色规范就以下几步：1.确定主色 2.确定辅助色 3.生成辅助色的序列色 4.在设计中使用并调整 5.建立 Color token，但需求和场景千变万化，实际操作不能那么程式化，最终还是要回归到具体使用场景去定义，文章里面的规则和公式只是指导，在必要的时候可以打破。
我们什么时候需要定义颜色规范？第一种是从零开始的定义，这是最理想的状况，但很多时候都是产品设计发展到一定程度，出现一系列规范问题时才开始梳理和定义，此时之前的设计包袱比较重，颜色规范的建立过程可能就变成了：1.梳理和总结现有颜色规则以及使用场景，确定需要改进的部分 2.优化主色 3.确定辅助色 4.生成辅助色的序列色 5.回到实际使用场景验证颜色方案并优化 6.建立 Color token。
毒App 的颜色定义就是出于第二种背景，现在我们定义了颜色方案，接下来就要在产品设计中铺开试用，发现此方案在实际使用中的问题 ，并根据得到的反馈进行颜色或方法的调整。
无论哪种情形，只要我们对颜色的理解足够，建立一个优秀的颜色规范都不是问题。
参考链接：
Carbon Design System
lightning Design System/Design Tokens
RGB Color Model
HSL and HSV Color Model
Ant Design/Color
The HSB Color System: A Practitioner's Primer
Material Design/Color
Tint and Shade Functions
Ant Design 色板生成算法演进之路
Fast, small color manipulation and conversion for JavaScript
颜色序列生成原理
Understanding Color
