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

念起

作为一名 UI 设计师每天都要处理颜色，但有时他们总是担心颜色不确定，所以我们匹配的颜色总是“错误的味道”。我结合了最近的一些项目 HSB 与大家分享一些色彩模式应用的组合 HSB（HSV）色彩模式有助于我们进行配色理论和技巧。也欢迎大家一起讨论，共同进步。

什么是色彩模式？

借助观看，我们在生活中感受到的“色彩”可以分为光加色后透出的“透出色”和光照在物体上反射的“反射色”。

通过颜色是通过“颜色混合”的方式，由红色、绿色、蓝色，共三种颜色混合，显示各种颜色，我们的计算机屏幕使用这种方式来显示颜色。这种颜色表达方式，被称为 RGB 色彩。

△ 图1 设计入门教室-色彩设计原则

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

RGB 和 CMYK 这两种颜色模式是最重要和最基本的。RGB 这与我们的工作密不可分。然而，在实际工作中，我们很少直接通过 RGB 调色模式。

简单聊聊 HSB 色彩模式

1. HSB 是什么？

「这是什么颜色？亮还是暗？」当我们看到一种颜色时，这三个问题经常出现在我们的心中。

事实上，人类对色彩的第一种感知往往来自色相（Hue）一开始是红橙绿蓝紫中的一个，然后是它的深度。

HSB 模型对应的媒介是人眼，在选择颜色这件事上，HSB 它使用一种更接近人类感官直觉的方式来描述颜色，它将颜色分为三个因素：色调、饱和度和亮度（将我们大脑的“深度”概念扩展到饱和度和亮度）。

H—色相/色调：颜色的外观和色调。在标准色轮上，色相按位置测量，值在0-360度之间（黑白无色相）。

△ 图2 网络图片-圆形色相环形

S—表示饱和度/纯度：颜色的纯度，值在0-100之间，饱和度高，颜色艳丽。低饱和度的颜色接近灰色。

B—表示亮度/亮度:颜色的亮度和暗度。值也在0-100之间。亮度高，颜色亮，亮度低，颜色暗，亮度最高纯白，最低纯黑。

在工作中，我们经常使用设计软件 ps、Sketch 帮助我们通过拾色器选择所需的颜色。

△ 图3 软件拾色器截图

HSB 模式，可以完美固定 HSB 其中一个参数只改变其他两个参数或只改变其中一个参数，完全符合人的色彩直觉，只有 HSB 能做到，而 RGB、CMYK 都是牵一发动全身的节奏。

通过 HSB 在模式下，我们可以在现有颜色的基础上微调饱和度和亮度。选择主色后，根据需要选择合适的颜色（互补色为 180°、对比色为 120°到 150°、类似色为 90°、邻近色为 60°、同位色为 15°。）

2. 如何在设计中使用？ HSB 色彩模式

通过上述对 HSB 在简要介绍了原理和特点之后，我相信每个人都对它有了基本的了解。下面我将结合工作中的几个案例来解释 HSB 如何在设计中实际应用？

例如，如果我们在设计页面时需要一个近似的颜色，除了主色 HSB 色彩模式。

通过图片，我们可以看到右边颜色的整体视觉效果感觉更加和谐舒适。在界面设计中，我们经常会遇到不同类型的颜色，如背景、按钮等。

在不改变色相的情况下，结合上述例子，以及饱和度和明度的变化规律：

HSB 色彩模式在项目中的实际应用

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

在去年的 vivo 在游戏中心爆款和预约详情页的改版优化中使用 HSB 颜色模式。使不同的游戏能够根据头部氛围图进行配置 3 同色相值的近似颜色应用于页面。确保颜色搭配有规律可行，显示效果高于基准线。

系统从头部氛围图中吸收并确定颜色后，可以通过调整饱和度和亮度值(色值不变)获得一套色卡。

△ 图4 vivo游戏中心预约详细页设计规范

2. 联运深色模式的应用

在双系统的深色模式适应点中，提到“高饱和度的颜色容易在深色背景下产生视觉抖动，导致人眼疲劳”。在深色模式下，我们应该选择更浅的颜色来获得更好的可读性。

我通过结合 Material Design 以及 Developer 简单说明深色模式适应规范中的颜色示例，如何使用 HSB，科学合理地适应深色模式的颜色。

△ 图5 Material Design深色模式适应规范

△ 图6 Developer深色模式适合规范

通过学习和比较两种规范，我们可以看到 Material Design 相对而言，规范更直观、更系统(手把手教你)，Developer 适配比较微妙(只能意识到)，没有明确的解释方法或规律。但是 Developer 例子中的适配更注重视觉表达和色彩的一致性，给人带来更舒适和谐的视觉感受。

重点分析 Developer 在深色适配中的配色示例中，通过 Developer 适应示例的深色模式的颜色值转换为 HSB 之后，发现了它 HSB 数值变化有一定的规律，基本符合规律:

BUT：

在根据 Developer 在总结其规律的过程中，对数值的变化产生了一些疑问：

直到得知：

「每种颜色都有自己的“感知明度”，即亮度」

将色相环“去色”后，可以清楚地看到：

每一种颜色(色相)都有独特的“感知明度” S、B 在同样的情况下，黄、青、洋红的颜色会让人感觉更亮，结合这一点再结合起来 Developer 经过深色模式的适应示例和基本规律。可以得出：

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

△ 图7 vivo游戏中心，联运游戏爆款详情页面

写在最后一句话

HSB 当然，在设计工作中的应用不仅仅是上面提到的。例如，为了区分不同层次的文本，我们经常在页面中遇到不同灰度的颜色（最常见的#00000、#333333、#666666、#9999999)也是应用 HSB 模式，当我们需要区分超过四个层次时，我们不需要纠结于色板，只要根据上述规则，改变不同的亮度。

在寻找信息的过程中，我也看到了很多协调优秀配色的方法，如色相、饱和度、亮度的一致性或对比度。这些可以通过方法和 HSB 结合模式，快速、方便、准确地帮助我们找到合适的颜色。

△ 图8 网络图片-色相环配色图

在日常设计中，一种颜色可以通过个人对颜色的感知和把握来选择，然后通过 HSB 快速选择相应的色板，并在页面配色中使用。这是关于 HSB 设计中色彩模式的应用全部介绍完毕，如果你看完也有所收获，别忘了转发哟~

欢迎关注作者微信微信官方账号：「VMIC UED」