emengweb
本文探讨如何零基础创建一套完整的颜色规范体系。我们将原理掰开来讲，梳理了实现步骤使其清晰明确易上手，即便没有相关经验，遵循这套方法也能为产品创建一套优质的颜色规范系统。
设计系统三大元素（色彩、字体和图形）中，色彩是非常重要的一环。产品设计中，我们需要定义好系统的色彩架构体系，建立完成后，所有的设计都将围绕着这些色彩进行。定义色彩之前，有一些概念需要提前了解，他们会在定义过程中用到，比如深入了解 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颜色模式的原理。