很多UI设计师都会苦恼于色感把握不准,所以今天为大家分享HSB色彩模式的应用,结合HSB(HSV)色彩模式进行配色的理论和技巧。


HSB色彩模式


HSB色彩模式的媒介是人眼,在选择色彩中,HSB使用更贴近人类感官的方式来描述色彩,并把颜色分为色相、饱和度、明度三个因素。

H:色相/色调,颜色的样子与调性,下面图片中的色轮,色相是按位置度量的,取值在0—360度之间。

HSB色彩模式是什么,如何应用?

S:饱和度/纯度,取值在0—100之间。

HSB色彩模式是什么,如何应用?
B:明度/亮度,颜色的明暗程度。取值在0—100之间。
HSB色彩模式是什么,如何应用?
在工作中,ps、Sketch等软件都会通过拾色器来选择颜色。
HSB色彩模式是什么,如何应用?

HSB模式可以固定HSB中的某一个参数,只对其他两个参数做改变或者只改动其中的一个参数。通过HSB模式,我们可以在已有颜色的基础上,调整饱和度、明度。以及选定主体色之后,根据需要,通过数值的加减改变色相,选取合适的颜色(互补色为 180°、对比色为 120°到 150°、类似色为 90°、邻近色为 60°、同位色为 15°。)


HSB色彩模式的运用


在设计一个页面时,除主色之外需要一个近似色,就可以运用 HSB 色彩模式。

HSB色彩模式是什么,如何应用?
通过图片可以看出右侧颜色整体感觉更加和谐舒适,在界面设计中常会遇到以颜色对同一种类型的不同状态进行区分,比如背景、按钮等。
HSB色彩模式是什么,如何应用?
结合例子,以及饱和度与明度的变化规律,在不改变色相的情况下:
HSB色彩模式是什么,如何应用?


实际案例


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

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

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

HSB色彩模式是什么,如何应用?

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

在深色模式下应当选择更浅的颜色以达到更好的可读性,下面借助HSB来达到深色模式色彩适配。

HSB色彩模式是什么,如何应用?
HSB色彩模式是什么,如何应用?

通过对两种规范的学习以及对比,可以看出Material Design 的规范比较直观,Developer的适配没有明确的说明方法或者规律,但示例中的适配则更加注重视觉表达与色彩的一致性。

重点分析 Developer 深色适配中的配色示例中,通过将 Developer 给出的深色模式适配示例的色值转换为 HSB 之后,发现其 HSB 的数值变化是有一定规律的。HSB色彩模式是什么,如何应用?

在示例总结中,对于数值的变化,我们会有一些疑惑:

HSB色彩模式是什么,如何应用?
直到了解到:

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

HSB色彩模式是什么,如何应用?
将色相环“去色”后,可以明显看出:
HSB色彩模式是什么,如何应用?
每一种颜色(色相),都有着独特的“感知明度”,在 S、B 相同的情况下,黄,青,洋红的颜色会让人感觉比较亮,结合Developer深色模式可以得出:
HSB色彩模式是什么,如何应用?
将上述“HSB 配色一般规律”运用在 vivo 游戏中心联运深色模式主色的推导,以及 vivo 游戏中心爆款详情页自动吸色系统优化中,使得页面的阅读体验更加良好。
HSB色彩模式是什么,如何应用?

在日常设计中,可以通过个人对色彩的感知与把握选取一个颜色,再通过 HSB 快速的选择相应的色板,运用在页面配色中。