学会HSB色彩模式，让配色有理有据！

学会HSB色彩模式，让配色有理有据！

在UI设计中，色彩搭配是否和谐直接影响用户体验。HSB（HSV）色彩模式以其更贴近人类感官直觉的特点，在实际工作中被广泛应用。本文将结合具体案例，深入探讨HSB色彩模式在设计中的应用技巧。

RGB与CMYK：色彩表现的基础

我们生活中借助观看而感觉到的“色彩”，可分为光加上颜色之后所透出的“透出色”，以及光照射到物体上反射出的“反射色”。

透过色是以“加色混合”的方式，由红、绿、蓝，共三色混合，表现出各种的颜色，我们的计算机屏幕就使用这种方式表现颜色。这种色彩表现方式，称为RGB色彩。

物体色彩的反射色，是用画具或染料、油墨等“色材”来表现颜色，印刷品基本是由青、洋红、黄、黑四种油墨相互组合而成，所有的颜色皆以“减色混合”的方式表现，这种方式称为CMYK色彩。

RGB和CMYK两大色彩模式是最重要和最基础的。RGB更是与我们的工作密不可分。可是，在实际工作中我们往往很少直接通过RGB模式进行调色。

HSB：更符合人类直觉的色彩模式

当我们看到一个颜色时，往往心中都会闪现这三个问题：“这是什么颜色？鲜不鲜艳？很亮还是很暗？”事实上，人类对于色彩的第一个感知往往是从色相（Hue）开始，即红色橙黄色绿色青色蓝色紫中的一个，然后是它的深浅度。

HSB模式对应的媒介是人眼，在选择色彩这件事上，HSB使用了更贴近人类感官直觉的方式来描述色彩，它把颜色分为色相、饱和度、明度三个因素（将我们人脑的“深浅”概念扩展为饱和度和明度）。

• H—色相/色调：颜色的相貌，颜色的调性，在标准色轮上，色相是按位置度量的，取值在0—360度之间（黑色与白色无色相）。
• S—表示饱和度/纯度：颜色的纯度，取值在0—100之间，饱和度高色彩较艳丽。饱和度低色彩就接近灰色。
• B—表示明度/亮度：颜色的明暗程度。取值也是在0—100之间。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。

工作中，我们常用的设计软件ps、Sketch都是通过拾色器帮助我们选择需要的颜色。HSB模式，可以完美固定HSB中的某一个参数，只对其他两个参数做改变或者只改动其中的一个参数，这一点，完全符合人的色彩直觉，也只有HSB能做到，而RGB、CMYK都是牵一发动全身的节奏。

通过HSB模式，我们可以在已有颜色的基础上，进行饱和度、明度的微调。以及选定主体色之后，根据需要，通过数值的加减改变色相，选取合适的颜色（互补色为180°、对比色为120°到150°、类似色为90°、邻近色为60°、同位色为15°）。

HSB在设计中的实际应用

1. 爆款、预约详情页色卡库

在去年的vivo游戏中心爆款、预约详情页的改版优化中，都运用了HSB色彩模式。使不同游戏可以根据头部氛围图配置出3个相同色相值的近似色并运用到页面中。保证色彩搭配有规律可行，并且展示效果在基准线之上。

系统统一从头部氛围图吸取、确定颜色后，通过调整饱和度和明度值（色值不变），即可得到一套色卡。

2. 联运深色模式中的应用

在双系统的深色模式适配要点中有提到“高饱和的颜色在深色的背景下容易产生视觉抖动，从而导致人眼疲劳”，在深色模式下我们应当选择更浅的颜色以达到更好的可读性。

我通过结合Material Design以及Developer深色模式适配规范中的色彩示例来简单说明，怎样借助HSB，来达到深色模式色彩科学合理的适配。

直到了解到：

「每个颜色都有其专属的“感知明度”，也就是亮度」

将色相环“去色”后，可以明显看出：

每一种颜色（色相），都有着独特的“感知明度”，在S、B相同的情况下，黄，青，洋红的颜色会让人感觉比较亮，结合这点再结合Developer深色模式的适配示例以及得到的基础规律后。可以得出：

将上述我们所得的“HSB配色一般规律”运用在vivo游戏中心联运深色模式主色的推导，以及vivo游戏中心爆款详情页自动吸色系统优化中，使得页面的阅读体验更加良好，整体配色和谐舒适。

HSB在设计工作中的更多应用

HSB在设计工作中的应用当然不止上面讲的这些，比如我们经常碰到的页面中为了区分不同层级的文字，会给予文字不同灰度的颜色（最常见的#000000、#333333、#666666、#999999）也是应用了HSB模式，当我们所要区分的层级多于四种时，就不需要在色板里纠结了，只要按照上述的规律，以不同明度的变化就可以了。

在我寻找资料的过程中，也看到很多通过色相，饱和度，明度的一致或者对比等方式得到协调优秀配色的方法。这些都可以通过方法和HSB模式的结合，快速方便准确帮我们找到合适的颜色。