基于企业标准色快速建立配色方案——HSB颜色模式

2017-02-24 本文已影响616人泱泱悲秋

当拿到企业标准色后，如何基于标准色快速的建立一套可行的界面设计配色方案，HSB色彩模式调节法是其中一个易上手且不容易出错的方法，适合对配色方案不敏感的设计师小伙伴们，虽然效果不那么出彩，但稳重不易出错，适合针对具体企业的项目。

HSB简单解释一下，H代表色相，S代表饱和度，B代表亮度。一众设计师们这里就不用再普及基础的色彩知识了。这里只说方法和应用。

先声明一点，配色玩的66666的请绕道，此文章枯燥无味且会毁了你的设计灵感且会被你不屑一顾。

HSB色彩模式系统的基本原理如下：

基础色的浅色系调节方法：降低饱和度，增加明度，色相调节值靠近60/180/300。

基础色的深色系调节方法：增加饱和度，降低明度，色相调节值靠近0（或360）/120/240。

用张图片表示一下：

HSB调节法.png

这里面最好理解的是明度的调节，增加和降低明度来实现深浅色的变化，那为何要调节饱和度呢？而且越浅的颜色饱和度越低？

依旧用图片说明：

分步骤调节B-S-H色彩的变化.png

我们以中间的颜色为基础色，分别依次调节两个浅色系和两个深色系来进行对比。

第一步，只调节明度值，我以10为一个单位层级，这里可以明显的看出颜色的深浅变化。

第二步，继续调节饱和度，以5为层级，会发现深浅的变化更加明显。

第三步，按上面的原理调节色相靠近指定色值。由于取色的时候不小心刚好取了一个H=0的颜色（补充说明，H=0和H=360是相同的），而上面说过深色系的调节是H靠近0，既然已经是0了，所以深色的调节就无需理会了，浅色的话，因为是0/360，所以调节的时候靠近60（以0为基准）或者300（以360为一准）都是可以的，我是以360为基准，以3为单位层级，得到了最后的渐变色。（如果以0为基准，则对应的前两个颜色的H值分别是H=6和H=3，这是另外一种配色方案，亦可。）

深浅色和饱和度S的相关性我们可以借助ps拾色器理解一下，如下图，当选中S模式时，很明显看到随着S的增加，颜色呈现深→浅的过程，当S调节到0时，达到浅色的极致，即白色。

S值对应的颜色变化.png

而关于调整色相，相对难理解一些，这和每个颜色专属的“感知明度”有关。从色彩的光亮度来说，红、绿、蓝（对应H值0、120、240）最暗而黄、青、洋红（对应H值60、180、300）最亮，这就是调节H值的原则，靠近最暗的色相和最亮的色相。也就是说，在举例时，H=0，已经达到了深色的极值，而我的向300靠近也就是向光亮度更高的洋红色靠近。