几何

你知道怎么定义色板?你知道Google以及BAT色彩系统如何设计的?你知道一个APP有几个配色?今天这篇文章,帮你了解大公司配色方法-HSB色彩模型的配色方法,使用这个色彩模型能帮助我们在调色时对颜色有明确的心理预期,帮助我们快速高效的搭配出科学美观的色彩。

 

 什么是HSB? 

HSB是一种将RGB色彩模型中的点放在圆柱坐标系中的表示方法,在概念上可以被认为是色彩的圆柱体(黑色在下白色在上)。如下图所示,圆柱的中心轴为灰色,以中心轴为角度变化的值称为“色相(H)”,到中心轴距离变化的值称为“饱和度(S)”,而沿着中心轴高度变化则称为“亮度(B)”或“明度(V)”。

▲ HSB又称HSV后(Value)明度改为(Brightness)亮度

HSB色彩模型以直观的方式表达了关于颜色的信息:“这是什么颜色?深浅如何?明暗如何?”。通过该模型,我们只需通过简单的数字就能轻松判断出该数值的颜色,这是十六位进制码所做不到的。下面分别演示三种数值的变化带来色彩的改变。

 

色相(H)

色相是色彩的相貌,也就是我们常说的红、橙、黄、绿等颜色名称。色相值按位置度量,在HSB色彩模型中红色为0°,黄色为60,绿色为120°,青色为180,蓝色为240,红色为300。十二色相环每一色相间距30°,二十四色相环每一色相间距15。

 

饱和度(S)

饱和度表示色彩的纯度,取值范围0~100%,从色环中心向外递增。当饱和度为0时点在中心,则显示为灰、白、黑无彩色。当饱和度达到100%时,点则移动到色环边缘,会显示每个色相最纯的色光。如上图所示,在色相(H)、亮度(B)不变的情况下减少饱和度(S)颜色逐渐变淡最后变成白色。

 

亮度(B)

亮度指色彩的明亮度,取值范围0~100%,沿着圆柱体底部向上递增。亮度为0时即黑色,点处于最底部。当达到100%时点上升到顶端,会显示色相最鲜明的状态。如上图所示,在色相(H)、饱和度(S)不变的情况下减少亮度(B)颜色逐渐变暗最后变成黑色。

 

HSB界面中怎么用? 

▲ 支付宝主色为冷静的蓝色,使用互补的暖色系图标给页面增添了活力,仔细观察主色H值与辅色色相(H)值分别处于色环中加减165左右的位置。

 

▲ 同色系搭配的小红书主色相(H)值十分接近,主要通过改变降低饱和度(H)来突出价格和标签。

 

▲ 严选整体配色素雅,颜色使用上十分克制。标签使用了和主色距离30°的邻近色黄来突出信息。

 

 

通过上述的讲解,我相信你一定对HSB模型有了基本的认识。但可能你还是不太了解如何具体运用在项目中。下面我将演示通过运用该模型来制定一套色板。

 

▲ 在线上产品色彩规范中,一般会包含主色、辅色、灰度色。主色一般使用app图标中的品牌色。辅色则会使用主色的对比或者邻近色。我们以iOS规范中的红色为例。在色环上加减15°~30°可以得到一组邻近色板,加减180则会得到一组互补色板。在实际运用中可以上下浮动20左右,达到视觉协调的最佳状态,再配合明暗的变化,可以使色彩更有韵律和协调。

 

灰度色

▲ 灰度色在app页面中也会被大量使用。合理的运用灰度色能够令页面信息具备良好的主次层级关系,提升浏览体验。灰度色包含黑、白、灰,在灰度色值中色相(H)和饱和度(S)都为0,只需改变亮度(B)值。上文中我们有了解到,当亮度(B)为0时即黑色,点处于最底部。当达到100%时点上升到顶端,会显示色相最鲜明的状态。我们只需通过亮度(B)值的规律变化可以轻易的调色出一套简单好记的色板。

 

HSB在渐变中怎么用? 

HSB模型对渐变色的搭配也非常方便,许多APP导航ICON会运用微渐变背景提升质感,通过HSB模型会发现其中微妙的关系。通过饱和度由低到高产生的饱满的渐变质感。以及配合色相角度的变化。色相环中越接近的色相渐变出来的颜色越自然。明度值(B)控制在75%以上色彩会更加通透,不会显脏。

 

HSB在按钮中怎么用? 

H保持不変,S保持不変, B为递减20変量  

 

把B的亮度调整减少20,就可以得到一个相对同色相,渐变柔和的渐变,数字可以去调整。

 

通过去调整HSB其中B(亮度),得到一个同一个色相,柔和的渐变,当然这个数值20也不是绝对的,可以根据界面去控制柔和度。

 

HSB制作渐变按钮

H递减15变量,S保持不变,B保持不变 

把H的色相减少15,就可以得到一个色相不同,渐变柔和骚气明亮的渐变,当然数字可以去调整。

 

通过去调整H色相的数值,我们可以得到一个更加色彩饱和度对比的渐变,让你整个按钮设计不那么脏。

 

HSB在色盘中怎么用 ?  

H保持不变,S为变量,B保持不

 

H保持不变,S保持不变,B为变量   

 

  H保持不变,S保持不变,B为变量   

 

 最后 

虽然目前各种配色工具越来越多,我们可以在几秒内就能迅速得到一个很好的配色方案,但作为设计师的我们了解色彩的基本理论是很有必要的。在实际的设计过程中,会遇到各种各样的问题,要考虑的因素也会十分复杂。配色是理性与感性的结合,我们需要做的只是在两者间找到平衡。熟悉配色原则能帮助我们快速解决相关问题,提升工作效率。

 

原文地址:我们的设计日记(公众号)

作者:李惠丸

转载请注明:学UI网 » 配色套路太多记不住,那就记住Google这个

登录收藏
 
你可能喜欢的:
所谓配色达人,就是一次出48个方案所谓配色达人,就是一次出48个方案
一篇吃透 Dark Mode ,搞定“暗黑/深色”适配一篇吃透 Dark Mode ,搞定“暗黑/深色”适配
配色基础技巧配色基础技巧
别以为,色彩的知识你全懂了之基础知识篇——色彩系列第 01_01 篇别以为,色彩的知识你全懂了之基础知识篇——色彩系列第 01_01 篇
色彩难把控?这些配色知识可助你一臂之力……色彩难把控?这些配色知识可助你一臂之力……
【海平面】迷人的色彩神经科学——以及它对设计的意义【海平面】迷人的色彩神经科学——以及它对设计的意义
生硬的渐变!我要和你说再见!(下)生硬的渐变!我要和你说再见!(下)
为什么颜色很重要为什么颜色很重要
生硬的渐变!我要和你说再见!(上)生硬的渐变!我要和你说再见!(上)
拆解·暗黑模式の文字配色拆解·暗黑模式の文字配色