用理性与数学，推导产品色彩系统
RGB是指通过R（Red：红）、G（Green：绿）、B（Blue：蓝）三个颜色通道的变化以及它们相互之间的叠加得到各式各样的颜色。三个通道分别有“0-255”这256个值，这些值分别代表着各通道的亮度层级。
虽然RGB在机器表现上很友好，但并不够人性化。因为人们判断颜色，往往是通过“这是什么颜色？是不是太鲜艳了？亮了还是暗了？”这样的感官维度，而很难通过红绿蓝的亮度层级去判断。所以人们后来基于RGB衍生出了HSB模式和HSL模式。
HSB是指通过H（Hue：色相）、S（Saturation：饱和度）、B（Brightness：明度）来控制颜色。Hue（色相）的取值范围是色环上0-360°的圆心角度；而Saturation（饱和度）与 Brightness（明度）是在0-100%的量占比。
HSL中的H、S与HSB相同，都是指Hue（色相）、Saturation（饱和度）。但L所指的则是Lightness（亮度）。
HSL和HSB稍微有一些不同，我们在两个颜色模式下输入相同的数值，会发现颜色实际是不一样的。虽然H、S指代的都是色相和饱和度，但L（Lightness：亮度）与B（Brightness：明度）分别被认为是“颜色中白色的量”和“颜色中光线的量”。
Lightness和Brightness的概念要深度研究下去的话其实是计算机算法领域的问题了，感兴趣的朋友可以查阅更多资料，但我个人认为对于UI来说没有太大必要。
关于HSB、HSL的使用场景，与UI务必记住以下两点即可：
- 前端CSS代码里支持的是HSL，而不是HSB。如果和前端对接时UI给到的是HSB的色值，那么最终落地的颜色效果会与设计稿有出入；
- 我们接下来讲到的配色推导，是基于HSB颜色模式的，因为它更容易理解，数值变化在色系坐标中的产生的结果更加直观。
二、配色推导
支付宝Alipay Design团队提出过一个配色原则：
以同色系配色为主导 多色搭配为辅同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。
那么知道了这个原则，我们又该如何科学、合理地得出产品的色彩系统呢？接下来我就用我的一个项目示例给大家做讲解。
步骤一：找到符合产品调性的品牌色
我负责的该项目主要业务与高校支付、缴费相关，所以希望整个产品视觉风格首先要给用户带来安全感。又因为主要用户群体是高校师生居多，新潮、年轻化是主要用户的一大标签，所以我们选择了用饱和度较高的蓝色来作为品牌色。
最终选择品牌色的Hex值为 #1585FF ，H S B = （211,92,100）。
步骤二：提取24色
选定了品牌色之后，以品牌色的H（色相）为基础，不断地递增、递减15，在0-360之间可以得出24个颜色。也就是将360°色环分割为24份，可以得到24色。
为什么要提取24色，并且以15为公差呢？
我们知道，想得到邻近色、类似色、互补色这一系列的颜色，我们就会使用到色环。
- 邻近色 色相差值15°以内的颜色为邻近色;
- 类似色 色相差值30°以内的颜色为类似色;
- 互补色 色相差值180°的颜色为互补色。
而24色色板是帮助我们提取辅助色的便捷工具。
步骤三：找到同色系配色
同色系是指与品牌色H（色相）一致，通过改变S（饱和度）与B（明度）变化产生的色组。同色系色组的推导需要借助拾色板坐标。
我们建立一个基于S（饱和度）与B（明度）的平面坐标系，设定当前品牌色为色值为（S₀，B₀），连接品牌色色值点与右上纯白点（0，100）、右下纯黑点（100，0），得到两条线段。
我们各在两条线段上均分取得5个点坐标（包含首位两点）。这样两条线段一共就会产生11个（S，B）坐标值，对应着11个同色系色组。
经过上图的计算，我们可以得到基于品牌色的同色系色阶。
步骤四：多色搭配
用于搭配的辅助色应满足以下两个条件：
- 和品牌色有明显区分：尽量避免所选辅助色感官上给用户视觉区别与品牌色差距不大，传递的调性太过一致；
- 不能过于突兀：根据色彩原理来说，互补色是最能与品牌色本色产生视觉感官对比的颜色，但可能会有些突兀。为了让颜色的辅助起到丰富画面的作用，而不是反而让整个版面显得不和谐，所以我们选择互补色的邻近色作为辅助色，而不要直接使用互补色。
于是根据以上条件，基于品牌色可衍生出3个辅助色：一个与品牌色传递调性有明显区分的类似色；两个互补色的邻近色。
步骤五：感官明度校准
经过计算后，我们已经得出了品牌色和三个辅助色。
可以看出，虽然我们提取出的辅助色明度色值都一致，但因为颜色本身自带的感官明度属性有所区别。为了让辅助色和品牌色的感官明度尽量一致，我们要对第一次提取出的辅助色进行感官明度校准。
校准方式是：依次在辅助色上叠加一层纯黑图层，将该纯黑图层颜色模式调整为Hue（色相），就可以通过无彩色系下的明度色值，进行对比。
这样我们终于得到以品牌色为基准的3个辅助色了。
步骤六：全色系输出
将得到的辅助色依次进行步骤三的计算，可以得到辅助色的同色系色阶。
但因为明度过低时，颜色已经非常接近于黑色，色相在肉眼上几乎已经趋于一致。所以删除最左边的三种同色系颜色。最后得到基于品牌色推导出的全色系色阶色板。
三、总结
完成了以上的工作，当然还不算结束。一套标准的色彩系统还会包含中性色规范、颜色的使用规范等等。但相信解决了大部分的需求，剩下的工作也难不倒大家了。毕竟以上的方式只是给大家提供了一个理性科学的方法，色彩的使用最终还是要融合设计师个人的共情能力。
比如许多产品有了一套自己的色彩方案后，设计师还会根据具体的业务场景去赋予icon、卡片背景等元素不一样的色彩方案。
希望这个方法能够带你发现一些色彩背后的数学秘密。
作者：UCD耍家；公众号：UCD耍家（ID：ucdplayer）
本文作者 @UCD耍家 。
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
