超详细！总监出品的B端设计规范指南（三）：配色

B 端设计也是 UI 设计的一种，它的输出环境只存在于电子屏幕中，所以统一使用 RGB 色彩显示模式即可。

RGB 即光的三原色，因为每个像素点是由 R 红色、G 绿色、B 蓝色三种颜色的不同色彩强; D a 3 } s度混合而成。所以 RGB 色的表示可以由 3 个颜色各自使用 0-255 中的数值来呈现，比如：

这是 RGB 色彩最标准的记录方式，但显c : H N 6 # ~然看起来特别的不直观，或者说不方便。所以在计算机中，为了方便记录和调用，使用了一串十六进制的代码来指代具体的 RGB 色。

理论上，我们只要使用 RGB 模] h P + l z ` / e式，随便你怎么选色，只要记录 16 进制码进行复用，你就可以在任何文件、设备中获得相同的色彩。

但在实际显示效果上，不同的系统、设备、浏览器都有自己的调色板，“解释” RGB 代码后给出的色彩就有偏差。比如一样的中文不同方言、语系、背景的人可能听出不同的意思，比如牛子，我以为它是类似“晴子”这样的姓名，至于你们的理解嘛……

相关行业为了避免这样的问题，提出了 WEB 安全色的b @ `概念，即这些色彩在不同的显示环境下，能实现最接近的色彩效果。

那么G ) . ? c o b安全色都有哪些呢？网上有很多地方都有对应的色卡或者工具帮助我们选色。建议使用 Google 的 MD 色卡，这套色彩最全，使用范围也最广的颜色。

我们可以通过下面这个链接中的网页工具，帮助z 4 T e T M我们快速实现选色和复制色彩代码的操作。

网站链接：https://www.materialpalett1 u / #e.com/colors

当然，设计 B 端界面并不是只能使用安全配色，这只是一种建议，可以尽量确保主色，尤其是辅助色使用安全色，$ G X而中性色可以自由定义（下面会提）。

第@ f ? 2 件事，自然就是讲讲该怎么配色了。和 C 端设计类y 5 w似，我们主要的目标就是在项目设计过程中定* / L 8 _ X 6义出 主色、辅助色、中性色 三n i ( z o c y *种色彩类型，并把它们应用到合理的位置中去。

只是，针对 C 端来讲，B 端的` f ! K r I , 1配色更功g F ) | U ; u i (能化，更理性，也更简单。我们要学习 B 端配色首先要排除那些花里胡哨的案例，比如下图这种。Z Q [ j d !

过度花哨的颜色会干扰我们对界面的实用和对信息的识别、检索效率，除非是一些政绩工程用来当 “花瓶” 的数据大屏，否则我们首先要排除颜色N P W过度应用的选项。

那么什么主色、辅助色、中q 6 ? E性色，我们先简单做个说明。

主色，即你这套产品中的品牌色彩，是整套项目J & / ) 7 a最核心，重要性最高的颜色。主色的选择通常和你F e Q . C D i j的品牌B a q C相关联，比M Y ` ` p j ~如腾讯云的蓝色，阿里云的橙色，七麦的绿色。

辅助色，则是用来在系统中进行强调、标识、区分的彩色系统。品牌或者 C 端设计可能会通过辅助色和主色搭配实现个性化的配色方案，但是在 B 端是没有这种诉求的。辅助色应用的目的性更强，是完全贴合操作效率来制定的。

比如下方是国外流行框架 StarBootstrap Admin 中使用的辅助色，它们都有对应的功能9 5 V寓意场景。

中性色，则是这套系统中色彩使用的相关灰色，因为灰色是没有色相、冷暖的区别，所以我们也称它们为中性色。主要应用在文字、背景、分割线等S x W b r 6 z 4基础元素中。

B 端的配色，即了解这三个色彩类型以后，能正确制定合理的颜色，并应用Y s J W O v 7 n {进项目中去。下面，我们分别对每个0 L h类别进行简单的讲解。

1. 主色的应用规则

B 端的主色也就是产品的品牌色n 1 ; )，多数 B 端项目中，主色不需要 B 端设计师自己选，在项目开始前就会有相关的品牌色、LOGO，直接复制色号N @ /即可。

和 C 端配色最大的不同是，品牌色在这里很多时候只是 “吉祥物”，它的存在用来宣示品牌本身的存在，但并不是任何情况下都直接参与界面色彩的填充。

假设品牌色是紫色、荧光黄、暗棕色之类的，那么这类颜色本身的内涵、寓意是难以满足功能需求的，我们要尽可能减少它们的出现面积、频次。

在 B 端设计中，主色的应用是最不需要大面积填充的，即使它是r h J B f U t常见y f ( { 4 7、耐用的蓝色、橙色，主色的填充主要只应用在下面这些类型内容中：

• LOGO
• 关键按钮
• 选中状态
• 高亮文本、图标
• 标签用色

2. 辅助色的应用规则

有了主色，我们就要为项目添加其它色彩了。

B 端彩色的搭配原则只有一个，那就是w D i s —— 能省就省。我们不是设计一个让用户发出感叹的色彩丰富绚丽、细节众多的视觉平面，而是设计一个用来使用的软件系统。所以前面举例的那些花里胡哨的反面案例，就一定要在正式项目中敬而远之。

用专业术语来说，配色过程要遵守 “奥卡姆剃刀原则”，如无必要，勿增辅色。

而为了满足功能性需求，可以为 B 端项目添加的辅助色类型其实也非常的有限，按寓意1 A B A 5 P划分常见的也就以下U _ ! X E几种：

• 正确、通过
• 链接、选中
• 警示、错误
• 提醒、注意
• 失效、未完成

相信看到这里，你们脑海中已经有画面了。我们会为正确使用绿色、链接使用蓝色、警示使用红色等等。这些都是具有普世性的颜色，与用户的长期经验吻合，没有识别的$ T b O f : P成本) X d l S f ] g。

而如果为了个性而个性，对辅助用色另辟蹊径，相当于在异国自驾时使用蓝灯行棕色停的系统，异国风情是P _ l w L | – 6 h有了，说翻车也就翻车了。

所以，针对 B 端辅助色的使用上，如果自( + ` } u [己没有把握和经验，可以套用下方我们整理的 RGB 安全色，填充到– O ( _页面对应的元素中去：

用谷歌色卡各选 3 个同类色出来，并进行标记

• 正确、通过：绿色
• 链接、选中：蓝色
• 警示、错误：红色
• 提醒、注意：黄色
• 失效、未完成：蓝灰

3. 中性色的应用规则

B 端的辅助J . & j =色找起来不难，难的是中性色的使用和搭配上。

任何完整的 B 端的项目，同一个界面中都包含了多2 Q A ] r f个模块、层级，以及数之i ? = 5 X o i N |不尽的文本字段。在这么多的内容中，我们要根据模块、文字的权重，选择合理的中性色填充。

新手很容易迷失在中性色的配色过程中，往往一套界面做完以后，使用的灰色或黑色透明度数量根本无法统计，非常的混乱。

所以，为了避免这样的情况，我会建议从开始设计之前就定一套中性{ Q W z s色，并将它们添加到设计软件的色彩画板中，每次填充中性色的时候直接从这个色板中选择即可。

那么如何制定这% + x l A j U K u套中性色？首先要理解在电子显示器中，人眼对偏冷的中性色是耐受的（舒适），所以专业的 B 端项目中，中性色都带9 | n t O C : %有一定的冷色色相. j C o 9 N ? r m和饱和度，比如下图是 Element 中性色在拾色器区域的分布，就并不是全灰的。

所以加入冷色是有必要的，同时，我们用 HSB 色彩模式中的 B 值作为中性色灰度的主要量化标准，全黑时 B 值为 0，白色为 100，每个定义出来的灰度都可以用 B 值作为代号，如 B20、B40 等。

我们根据% i R ` [ P这个标准，定义出 5-8 级的中性色H s A I h L K，就可以满足项目中的大多数场景。

虽然会有一些项目会使用透明度来制定灰度等级，比如黑色的 80%、40% 透明度，但我更建议将透明度使2 [ t 9 D用场景和实际色值定义区分开来，只有在色彩的不同状态（选中/失效等）下再应用透明度。

结尾

有关 B 端配色的部分也就先说到这里，B 端配色远远比 C 端更简单，也更枯燥。可以使用的色彩范围更小，套路也更一致。w 8 l r y | h R我们要做的，就是将它们J b l [ =合理进行填充。

只要多做总结和尝试，很快就可以掌握 B 端配色的技巧和要点。

我们下篇再贱！

往期回顾：

欢迎关注作者的微信公众号：「超人的电话亭」