B端项目设计中，设计规范和组件库是一个绕不过去的槛。作为专业的B端设计师，必须有自己完成设计规范和组件库的能力，色彩体系作为设计规范的一部分起着至关重要的作用。

制定颜色规范的流程

确定主色-确定辅色-确定中性色-制作色板-色彩应用

一、确定主色（Brand Color）

主色是我们系统的代表颜色，表达着品牌特性：如蓝色表达冷静，多用于企业；红色、橙色表达热情，多用于电商；绿色表示生命，多用于医疗。

二、确定辅助色（Auxiliary Color）

1. 保持相同明度、相同饱和度改变色相

辅助色的使用需要符合用户的认知习惯，比如正常或成功用绿色，失败或错误用红色、等待或警告用橙色，失效用灰色、链接用蓝色等。

2. 较正辅助色

在 HSB 模式中，即使保持饱和度和明度一致，但是出来的颜色感官明度是不一样的，比如黄色、绿色的视觉效果更亮，蓝色就稍微偏暗一些，导致色板看起来不一致。为了让不同色相看起来更加协调，我们需要根据实际视觉感受，进行微调。

三、确定中性色

中性色在系统里面占据重要的作用，因为不具有冷暖的特性，所以大面积使用也不会带来视觉负担。中性色为系统界面搭建结构、划分边界及建立信息层次，保持合适的对比度，提高可读性。

四、制作色板

方法1：透明度调整

浅色系降低透明度或者叠加不同透明度的白色，深色系叠加不同透明度的黑色

方法2：HSB数值快速调整

在保证色相数值不动的情况下，直接调整颜色的饱和度和明度。

浅色系降低饱和度，提高明度，即拾色器窗口往左上角方向走；

深色系提升饱和度，降低明度，即拾色器窗口往右下角方向走。

改变色调，制作更多颜色的色盘。

五、色彩应用

1. 主色

主色主要用于各种交互反馈，状态展示：如悬停、选中、禁用等当前状态，图标、按钮、标签、文本链接、开关、背景容器等。

2.1. 中性色_蓝灰色

蓝灰色由中性色扩展而来，拥有与中性色同样的属性，主要用于文字、图标、容器、填充底色、分割线及大面积的背景色等。

2.2. 中性色_灰色

中性灰色主要应用于文本、图标、分割线等。

中性灰色色板制作有两种方式：1. 按梯度降低透明度 2. 调整HSB中的B值 ---在第2步确定中性色时用的方法1，下图示例用的方法2给大家做示范。二选一即可。

总结

界面色彩设计要遵循降本增效的目标，为了用户更好更快的识别信息，视觉上保证界面简单干净，整体风格协调即可。页面设计要控制颜色的使用，过多的颜色会影响信息层级，增加用户理解负担。

参考：

https://www.uisdc.com/tencentdocs-colors-2

https://www.woshipm.com/pd/4928465.html