艾萨克·牛顿|B端设计 | 设计师必须了解的色彩系统搭建( 四 ) 色调|饱和度|设计|颜色|Color|色

方式一：HSB精细调整（耗时）

文章图片

第一步：选定主色
第二步：用主色的色调加减15 ，得到24色相带（360/15=24）
第三步：挑选出12或者16个颜色，作为色相带。挑选原则是，过于相似的色多次出现可以删掉
第四步：感官明度矫正，微调色相带的明度和饱和度，使其看起来更加一致、柔和
第五步：制作色板：首先我们选定基色；然后我们给基色有序降低透明度，再去吸色，这样就得到浅色衍生色；我们用#000000的有序透明度叠加到主色上，再去吸色，这样就得到了深色衍生色。

如下图所示：

文章图片
我们可以注意到，这个方式做出的色板色调是完全一致的。
在色板中，浅色衍生时，饱和度层层递减；暗色衍生时，明度层层递减。这个是很多大企业选色的标准方式，很繁琐但是很规范。需要注意的是，规范不是限制，很多时候，我们需要根据实际情况，再对颜色做一些微调。
关于第五步色板制作制作方式除了刚才所说的，我们也可以用市面上也有色板生成工具：
网站一：Material Design

文章图片
这个是我比较推荐的色板生成方式，因为会自动检测对应颜色明暗度的ID ，这样命名就很方便了，还可以取保不同色调下，相同明度+透明度的颜色统一。
网站二：Coolors

文章图片
Coolors的优势是可以生成梯度非常丰富的色板。
方式二：HSB粗略调整（快速）

文章图片
我们跟着上图一步步尝试：

第一步：选一个基色
第二步：打开拾色器，把颜色向左拖动一点（降低饱和度），制作出稍浅的颜色
第三步：把颜色向左再拖一点（降低饱和度），制作出更浅的颜色
第四步：把颜色向左拖动时，颜色变灰了，于是将颜色亮度高一些，把颜色饱和再稍高点。饱和度过低发灰时，可以提升亮度，略高升饱和度来调制。
第五步：将颜色向下拖一点（降低亮度），制作出稍深的颜色。
第六步：改变色调，来制作更多颜色的色盘，有时，只改变色调会导致同色调下颜色区分不大，再微调明度和饱和度即可。如下图所示：

文章图片

在拖动颜色时，有时明度和饱和度一起会有变化，这是可以接受的。这个方式比较适合色感非常好、经验丰富的设计师去做，或者是做一些网页项目可以采用。
3.4 主色（Primary Color）
主色是我们系统的代表颜色，一般与品牌色相关联。
主色的应用场景：

高亮提醒
选中、开关等当前状态
按钮
空状态

选择主色
要点1: 主色的选择需要尽量选择冷色系（冷色系见色彩理论Pt. 1），这是为了避免用户长时间使用带来视觉疲劳。
要点2: 避免与错误、警告颜色冲突（如果冲突，可用邻近色替换错误、警告颜色）
要点3: 在亮色模式下，饱和度和亮度不低于70 。
可以在ant design中进行在线检测 https://ant.design/docs/spec/colors-cn ，当选择非合适主色时，会出现提示