UI设计师中，只有极少数天赋异禀的人可以凭借感性与直觉就做出惊艳的色彩搭配，而这份天赋显然不是每个设计师都有的，那么对于大多数设计师来说，有什么 *** 可以帮助我们制定一套优质的色彩系统呢？本文将为你揭晓答案。

各行各业的设计师每天都在和颜色打着交道，UI设计师设计用户界面也不例外。

用户界面是一个设计师用理性思维解决用户感性需求的窗口。如果对色彩的运用不加以克制，界面可能会显得花哨而没有主次；但过于拘谨又容易使界面保守，难以激发用户情绪。所以如何让色彩的搭配平衡，是UI设计师需要修炼的一课。

但色彩毕竟是感性的元素，我们总是仰慕一些对色彩天赋异禀的设计师，总能不拘绳墨给作品带来惊艳的视觉效果。我们难以偷习他们的天赋，但或许你有没有想过，干脆我们另辟蹊径，用理性的推导来制定一套色彩系统？

那么今天我用我的项目示例，教给大家一个科学推导颜色搭配的 *** 。也许能够带你发现一些色彩背后的数学秘密。

一、区分颜色模式

在此之前我们需要先熟悉一下颜色模式。

在PS菜单栏的“图像-模式”下可以看到非常多的颜色模式：RGB、CMYK、Lab等等…那是因为PS是一个需要满足设计行业水平领域的软件，要解决各类设计师需求，所以涵盖的颜色模式非常丰富。

但UI大多数时候需要关注的是线上场景，成果的展示渠道一般是自发光设备。所以弄明白垂直领域软件Sketch中的几种颜色模式其实就足够了。分别是RGB、HSB和HSL。

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色