做好UI配色，需要做到这三步

一套产品色彩需要有哪几种色彩：品牌色+提醒类型颜色（成功、错误、警告）+中性黑白灰颜色（各种字体，背景、分割线颜色等）

那么用到的色彩类型：

1，品牌色

2，品牌黑

3，内容底色

4，全局底色

5，分割底色

6，图标色

7，文字链接可点击颜色

8，提示信息

9，错误提示

10，错误提升

文字颜色

1，重要文字

2，常规文字

3，辅助文字1

4，辅助文字2

5，反白文字或图表

6次要的反白文字或图表

分割线

常规分割线（10%）、强调分割线（30%）、最弱分割线（5%）

反白：常规分割线（10%）、强调分割线（30%）、最弱分割线（5%）

如何在确定品牌颜色

在产品的品牌色方面，选择公司logo色是最为保险的，这样便于与公司的品牌标识保持一致，具有更好的辨识度。如果因为出于公司的产品战略要求，需要跟公司其他的产品有所区分，更多的还是要考虑到产品本身的特征，比如医疗方面多用青色、蓝色、绿色，给用户一种安全、可靠；购物产品用色多为鲜艳，主要目的是要激起用户的购买欲；

首先，我们已确定主色为：

在获取品牌色色阶之后，选取其中的几个颜色用于产品中进行不断的尝试与评定，最终确定：

辅助色选择

根据HSB的方法去得到同色温下面的24色：

以H值（色相）以15，S和B不变，递增到基与主色的24个色带，原理就是15/360=24，正好围绕色环一盘，

色盘

辅助色是丰富应用中的次要色彩，它会包含一到若干个和主色不同的色彩，除了品牌传达外，具有更强的实用性。

真正的辅助色的选择是根据实际场景功能来确定的，

比如通知、提醒、取消用大红色，确认、同意用绿色或者蓝色，收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型，

从色环中吸取红、黄、绿三种颜色，在这四种颜色之上覆盖纯黑色#000,混合模式选在色相，这样就能看出他们是否是在同一个明度之上，再根据实际的需求进行矫正，比对，调至舒服为止。

将选择好的辅助色进行明度与对比度的变化，得出相应的色阶，如果不确定色阶是否科学合理，也可以利用色彩工具，比如Antdesign的配色工具，Figma里面也有很多配色插件，这些都可以快速获得相应的色阶。根据实际的应用场景在进行合理的配色。

中性色的选择

中性色通常与文字色汇总为一个灰色模块，通常包括背景色、分割元素色、反馈色、禁用色。背景色在使用卡片设计模式时必然会用到，一般为带有一点主色的浅灰色。

分割元素色包括常见的线框元素、线性分割元素、面型分割元素。反馈色包括hover、press、highlight多种反馈颜色。

中性色让整个页面更加富有层级感。

中性色的配置，就是制定一个由深到浅的灰度阶梯，应用在对应权重的元素上，色彩轻重的主要判断依据是 HSB 中的 B（明度） 值。
中性色虽然指的是无个性，但并不是只能用纯灰色，常见的一种做法，就是为中性色添加适量的蓝色饱和度，提升观看体验（满足 RGB 的某种特性）。

根据选定的品牌色，利用上述的中心色选择方法，进行中性色的选配：

利用之前的作品或者现有的设计页面，进行不断的搭配调试，确保整体页面效果为最佳。当然，我们也要考虑到一些特殊的场景使用，如果现阶段并没有出现复杂或者特殊的应用场景时，我们可以先统一一致用色。随着产品的不断完善与迭代，有可能现在的中性色并不能满足需求时，要及时做到调整与更新，确保整体的一致性与统一型。

文字色

在实际的应用场景中，文字色的色介可以划分3-5个阶梯：重要的标题和正文、辅助内容的次要文案、次要等级文字、及需要进一步弱化的最次级文字。当然在命名文字色的时候，你可以用一级色、二级色、三级色、或者其他的命名规则去定义每个阶梯色。

另外还有带有特殊语义的文字用色，例如链接文字用色、强调文字用色等。

后台B端产品的特性注重内容与功能的展示，需要客户注意力集中，避免造成更多的干扰，所以适合采取主色占比小，色彩丰富度低的模式。

Sam G ordain在Medium上有一篇文章《Pick Better Colors with the Hue Shift Method》中很好的讲述了其阶梯颜色选取规则与技巧的关键理论。总结下来即，想要由一个基础颜色拆分出一套梯级配色，在通过调整透明度或明度的同时调整色相、饱和度、明度三个属性，这样最终生成的一套梯级配色会更加协调，过度更为自然。

文章链接：

https://medium.muz.li/natural-color-palettes-7769e5b38ecd

很多时候，在做配色时，我们大都知道如何利用同类色、类比色、中差色、对比色、互补色等这样的配色规则去搭配色彩。但在时间的工作中，其实这些知识并不能满足我们的需要，尤其是跟几个设计师共同完成一个项目时，就会出现很多问题：辅助色、文字色、背景、分割线、阴影等方面，导致的结果就是不能保证视觉上的一致性。

在很多的设计网站上，输入“配色”进行搜索，就能看到很多有关配色的文章，大家从很多原理、理论性的方面进行讨论，但是对于如何进行配色、配色的过程详细的进行描述的文章很少。我们在找了很多参考文章、配色理论与配色工具之后，结合实际应用场景，进行了配色。希望这篇文章能够给有相同疑惑的设计师以帮助。

参考的文章：

《10年经验总结的高效 UI 配色策略》酸梅干超人

《Ant Design-色彩》

《揭密可视化专家配色秘笈，你在乎的颜色远远不够》作者：白弦，蚂蚁集团设计师

色彩工具：

Ant Design中色彩工具

Figma中的colo rshades插件

Figma中Palettes插件