HSB色彩模型在设计中的运用

　　文章引见一种使用HBS颜色模子的配色办法，和正在APP颜色标准上的使用，同时分离今朝支流产物的配色，分离该模子进一步的阐发解说。

　　对很多设想师去道，配色能够是一项膂力活，每到配色那一步前后测试了无数版本仍然调没有出合意的色彩。

　　厥后我们教会了偷懒的办法，间接正在现有界里上汲取色彩。但那其实不是恒久之计，每一个产物的配色计划皆该当是无独有偶的。色感好的人能够靠觉得沉紧配出标致的色彩，但色感好的我们便需求把握那此中科教的办法，果为任何事物皆是有纪律的，只需找到了此中的纪律并减以使用操练，我们便能疾速的把握那一妙技。

　　明天我会引见一种使用HBS颜色模子的配色办法，和正在APP颜色标准上的使用，同时分离今朝支流产物的配色，分离该模子进一步的阐发解说。那个模子也是很多BAT设想团队保举的配色模子，利用那个颜色模子能协助我们正在调色时对色彩有明白的心思预期，协助我们快速下效的拆配出科教美妙的颜色。

　　甚么是hsb?

　　HSB是一种将RGB颜色模子中的面放正在圆柱坐标系中的暗示办法，正在观点上能够被以为是颜色的圆柱体(乌色正在下红色正在上)。以下图所示，圆柱的中间轴为灰色，以中间轴为角度变革的值称为“色相(H)”，到中间轴间隔变革的值称为“饱战度(S)”，而沿着中间轴下度变革则称为“明度(B)”或“明度(V)”。

　　HSB颜色模子以曲不雅的方法表达了闭于色彩的疑息：“那是甚么色彩?深浅怎样?明暗怎样?”。经由过程该模子，我们只需经由过程简朴的数字便能沉紧判定出该数值的色彩，那是十六位进造码所做没有到的。上面别离演示三种数值的变革带去颜色的改动。

　　色相(Hue)是颜色的边幅，也便是我们常道的白、橙、黄、绿等色彩称号。色相值按地位襟怀，正在HSB颜色模子中白色为0°，黄色为60°，绿色为120°，青色为180°，蓝色为240°，品白色为300°。十两色相环每色相间距30°，两十四色相环每色相间距15°。

　　饱战度(Saturation)暗示颜色的杂度，与值范畴0～100%，从色环中间背中递删。当饱战度为0时面正在中间，则显现为灰、黑、乌无彩色。当饱战度到达100%时，面则挪动到色环边沿，会显现每一个色相最杂的色光。以下图所示，正在色相(H)、明度(B)稳定的状况下削减饱战度(S)色彩逐步变浓最初酿成红色。

　　明度(Brightness)指颜色的亮堂度，与值范畴0～100%，沿着圆柱体底部背上递删。明度为0时即乌色，面处于最底部。当到达100%时面上降到顶端，会显现色相最明显的形态。以下图所示，正在色相(H)、饱战度(S)稳定的状况下削减明度(B)色彩逐步变暗最初酿成乌色。

　　HSB正在UI中的使用

　　经由过程上述的解说，我信赖您必然对HSB模子有了根本的熟悉。但能够您借是没有太理解怎样详细使用正在项目中。上面我将演示经由过程使用该模子去造定一套色板。

　　正在线上产物颜色标准中，普通会包罗主色、辅色、灰度色。主色普通利用app图标中的品牌色。辅色则会利用主色的比照大概临近色。我们以iOS标准中的白色为例。正在色环上减加15°～30°能够获得一组临近色板，减加120°则会获得一组互补色板。正在实践使用中能够高低浮动20°阁下，到达视觉和谐的最好形态，再共同明暗的变革，能够使颜色更有韵律战和谐。

　　灰度色正在app页里中也会被年夜量利用。开理的使用灰度色可以令页里疑息具有优良的主次层级干系，提拔阅读体验。灰度色包罗乌、黑、灰，正在灰度色值中色相(H)战饱战度(S)皆为0，只需改动明度(B)值。上文中我们有理解到，当明度(B)为0时即乌色，面处于最底部。当到达100%时面上降到顶端，会显现色相最明显的形态。我们只需经由过程明度(B)值的纪律变革能够随便的调色出一套简朴好记的色板。

　　正在突变色中的使用

　　HSB模子对突变色的拆配也十分便利，很多APP页里的导航ICON会使用微突变布景提拔量感，经由过程HSB模子会发明此中奇妙的干系。经由过程饱战度由低到下发生的丰满的突变量感。和共同色相角度的变革。色相环中越靠近的色相突变出去的色彩越天然。明度值(B)掌握正在75%以上颜色会愈加通透，没有会隐净。

　　实践项目中的阐发

　　最初经由过程HSB模子对今朝线上产物的部门色彩汲取，认真阐发会发明此中很多类似的地方。

　　付出宝主色为沉着的蓝色，利用互补的温色系图标给页里删加了生机，认真不雅察主色H值取辅色色相(H)值别离处于色环中减加165°阁下的地位。

　　同色系拆配的小白书主色相(H)值非常靠近，次要经由过程改动低落饱战度(H)去凸起价钱战标签。

　　宽选团体配色素俗，色彩利用上非常抑制。标签利用了战主色间隔30°的临近色黄去凸起疑息。

　　以上色值为sketch汲取，取实践能够存正在偏向，次要是给各人供给一种思绪，并出有尽对的办法战公式。

　　结语

　　固然今朝各类配色东西愈来愈多，我们能够正在几秒内便能疾速获得一个很好的配色计划，但做为设想师的我们理解颜色的根本实际是很有须要的。正在实践的设想历程中，会逢到各类百般的成绩，要思索的果素也会非常庞大。配色是理性取理性的分离，我们需求做的只是正在二者间找到均衡。熟习配色本则能协助我们快速处理相干成绩，提拔事情服从。

　　考虑题

　　经由过程上述解说，您该当理解了HSB色彩模子的根本观点。我们晓得白色处于360°色相环中的出发点取末端处，那末我们常道的白色的对峙色为绿色，也称为补色，那经由过程配色实际绿色应处于白色0°正劈面的中心180°处，那末为何正在色环中180°其实不是绿色而是青色呢?

　　本文由 @李惠丸 本创公布。已经答应，制止转载。

　　题图去自PEXELS，基于CC0和谈