一个实例，让你快速上手HSB色彩模式

HSB色彩模式可以帮助大家快速选择自己正确的颜色，拒绝凭直觉选颜色。让你的设计有迹可循，有理可依。

色彩使用是UI设计师每天都在遇到的问题，通常很多UI设计师在使用颜色时都是直接凭感觉在色板选择颜色，当然对于一些色感好，天赋异禀的设计师来说这样可以，但是绝大部分设计师都只是普通人，那我们如何去选择一个产品的配色？设计不仅仅是设计师的感觉，还是一门科学，万事万物都有方法论，我相信一个优秀的设计一定是有迹可寻。

在日常设计中我们常常要从0-1去创建一个产品，那么确立产品的颜色选择，就是非常重要的一环，下面文章中我会介绍一种HSB的色彩模型，学会用这种简单科学的的方式建立自己的设计色板。

HSB是什么？

颜色模式常常分为HSL RGB HSB，通常大部分设计师使用的方式是通过RGB颜色模式来完成设计，但是在目前的UI设计为了色彩使用更加科学，整体色彩感觉更加和谐。

RGB ——通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的

HSL ——是一种将RGB色彩模型中的点在圆柱坐标系中的表示法。

HSB ——H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示明度，HSB模式中S和B呈现的数值越高，饱和度明度越高.

如何运用HSB颜色模式

在很多文章中很多大神都提出了一个公式，我们要做的就是站在巨人的肩膀上学习他并且使用它。请牢牢记住下面这个公式：

深色色调=饱和度增加亮度减少 

浅色色调=饱和度减少亮度增加

虽然我们只需要使用它，但是知其然更要知其所以然，下面我们来验证下这个模式。

下图是一张自然界的照片，我选取了一个深色，一个浅色的色块，大家可以看一下两个颜色熟知的变化

再来一张图验证一下

综合上面两个图的对比，我们可以发现当在同色系下面颜色颜色变深时候，饱和度会升高，明度会降低，当颜色是浅色时候纯度变低，明度升高。这些来源于自然界的规律也是最适合我们用于日常设计中的规律。

由此我们就可以获得上面提到的理论：

深色色调=饱和度增加亮度减少 

浅色色调=饱和度减少亮度增加

在设计中如何运用这个原理

虽然我们已经知道这个理论，那如何在日常设计中使用了？举个例子：比如我们需要做一个页面，在主色之外我们需要一个近似色，就可以用这个方法去选择。

通过图片我们可以看出HSB方法做出来的这一组颜色整体视觉效果感觉更加和谐，舒适。比如在界面设计中我们常会遇到为按钮定义颜色的情况，这种规则可以让我们轻松定义出按钮的3个状态，比如：禁止点击  正常状态  点击状态。

每当你在做颜色选择的时候，我相信这个公式都会帮助到你。在设计中我们选择一个基本色，并从那里开始调整饱和度和亮度，同时保持色相值不变。这样可以让我们获得最好的作品配色。

如何用HSB建立一个色板

基于这个HSB的色彩方式我们可以建立一个属于我们的色板，这个色板可以帮助我们在创建一个产品时然后所有的颜色都在一个色彩维度之类。这是我结合大量文章获得的一个方法。

首先我们创建一个简化版的25网格，当然你也可以选择100个，这些网格可以让我们获得不同的颜色。

1.选准颜色做一个正方形色块，在制作25个白色的小正方形模块

2.将白色正放心覆盖在黄色正方形上面

3.从左到右将每列白色方块的不透明度降低25％。从上到下将每列白色方块的不透明度降低25％。

去掉最黑和最亮的，这样我们就可以获得整个同色系色板

如何获得辅助色

当我们拥有一个品牌色之后，我们就可以用HSB方法选择其他的额颜色了。其中色值相差15°以内的是邻近色，色值相差30度以内的是近似色，色值相差180°的是互补色。通过这个数值我们可以±15°获得24个不同色相，但是明度和纯度一样的颜色。

比如我现在需要获得一个辅助色和强调色用在我的产品中，我通过改变色相获得了下面的颜色

在获得这些颜色后我们可以通过开篇中提到的方法获得一个自己的色板。

通过这一系列方法，我们可以获得一套科学的色板，可以很好咋运用在我们的设计作品中。补我我看到在很多文章中还提到了色彩明度校准这个知识点，也是可以结合色版运用起来。在这里我就不多做说明。

后记

虽然HSB模式可以帮助我们配色，但是这毕竟不是万能的，我认为一个优秀的设计稿一定是理性中带有感性，在日常设计中除了运用科学的色彩模式，还需要了解不同色彩所传达的情感感受。将科学理论＋情感感受的结合才能做出优秀的设计作品。

希望这篇文章有帮助到你去解决设计中遇到的问题，在之后的文章中我会慢慢在分享更多关于颜色使用的一些方法，请大家持续关注。

参考文章：

https://www.ui.cn/detail/541230.html

https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e

https://medium.com/sketch-app-sources/building-a-color-palette-framework-96dbda541c2e

Powered by Froala Editor