3个章节，帮你学会B端设计师必须掌握的颜色设定

颜色是我们 B 端设计重要的设计媒介，上篇文章我们讲解了色彩空间，了解到不同色彩空间对于设计方案究竟会有哪些影响～

但有了影响还是不够，今天我们来说说 B 端项目当中颜色搭配的底层逻辑，讲解清楚不同颜色（品牌色、中性色、辅助色）之间的使用技巧，主要是技巧～

想让大家明白：

为什么 B 端项目的品牌色可以进行调整？

中性色设定的背后逻辑？

不同的辅助色之间我应该如何进行梳理？

一、品牌色

品牌色是系统颜色的灵魂，它主要是用来强调页面当中的品牌价值。也就是很多颜色一看，我们就能立马想到对应的品牌。

比如 绿色，我们能立马想到微信；红色我们能想到 可口可乐，这就是品牌色所赋予的价值。

1. 品牌色的设定

在 B 端设计当中，品牌色的使用场景会有些特殊。一般会被用来强调页面当中的关键信息，比如在 B 端系统当中的 主按钮、导航菜单、文字链接、选中状态，我们都可以使用品牌色的方式进行呈现。

因此对于品牌色的设定就会显得至关重要。如果设定为 蓝色、紫色、绿色，会与整体的设计较为协调，因此较为容易处理。比如：钉钉、飞书，都采取蓝紫色的方式确定整体品牌色。

但如果颜色为 红色、橙色、黄色，处理起来则会比较麻烦，需要考虑品牌色与辅助色相混淆的问题。

比如 我们要为 中信银行企业端 设计 B 端产品，这时候它的红色就会和系统当中的警告色相冲突，那我们应该怎么办？

① 辅助色微调：我们可以考虑延续中信银行品牌色，但对辅助色的红色进行微调，使大家能够明显感受到区别，这样能够快速解决问题。

比如在这里，就可以考虑将辅助色红色调整为更偏暖的橙红色，这样就能够与品牌色形成较大差别。

② 重新设定：在品牌色的基础上，为企业端的用户单独设定一套以蓝色为主的颜色风格，这样能够保证颜色的使用上不会出现较大问题。

比如京东在自己品牌色的红色的基础上，为商家后台单独设定蓝色为品牌色，进行呈现和延展。同样的例子还有 小红书、淘宝 等...

2. 品牌色的使用

在品牌色当中，它的使用场景不同，会衍生出不同的颜色色值，需要在页面当中使用。我们把这部分衍生出来的颜色叫做色阶。

比如在这个页面当中，除了品牌色之外，还会有按钮的选中状态，Tab 的切换状态 等等，都会使用与品牌色相关的颜色进行呈现。

在梳理时，需要根据自己的颜色进行合理的安排与设定，这里给大家罗列了色阶的使用场景，大家可以保存查看。

那这些颜色怎么来？在色阶的设定上，通常会有几种办法：

① 黑白透明度叠加法：根据我们确定的品牌色，通过叠加 10% 透明度的白或者黑，进而能够推导出对应色阶。

这种做法整体会比较简单，但操作起来会存在相应的误差，因为对于颜色只修改了它的明度，并没有对色度进行修改，会稍稍有些不合理。

② 色彩空间计算法：同样在 Figma 当中，我们可以使用色彩空间的计算方式，快速生成对应的颜色色阶。但也是一样的问题，只会存在明度 Tone 的变化。同时我试用下来，发现蓝色生成出来色阶较深，感觉不算特别理想。

③ 自动生成法：生成法就是最简单高效的方式。通过 Arco Design 所提供的颜色生成平台，我们可以将自己的品牌色进行输入，就能生成导出对应的颜色色值。这种方式既高效，同时结果又较为准确，然后截图就可以自己在 Figma 里面快速吸取颜色。

网址： https://arco.design/palette/list

3. 品牌色的使用面积

那品牌色到底使用多少呢？

其实在页面当中，我们不需要哪哪都放品牌色～

因此在使用品牌色，我们需要遵守系统的 631 原则，也就是我们会将整个页面的颜色进行划分，其中品牌色只会占据整个页面的 10% 的比例，剩余的中性色、白色/弱灰色 会占据整个页面的 30% 与 60%。

当然，这个也并不是绝对，我们也会与页面的类型相关，进行相应微调。

4. 为什么现在品牌色也不太重要

因为现在的 B 端产品，大多数都是以蓝色为主，你会发现我们不能做到 “看到某一个颜色，就能立马想起你来～”

在这样的背景下，品牌色的使用就会更为局限

所以建议大家在最初颜色的设定上，尽可能地将时间留给页面的设定上，而品牌色上就根据页面设定的初稿进行微调则会更为合理。

二、中性色

中性色非常重要，在我看过 1000 多份同学的作业当中，中性色是最容易犯错的。

因为对于 B 端页面而言，本质上就是页面的“排版设计”，所以使用合理的中性色能够让用户更容易获取信息。

1. 中性色的设定

这里给到大家两个页面，你会发现右侧明显会更好，更清晰，它的设计原理就用到一句话：“黑下来、浅上去”

首先我们先介绍一个中性色的色阶，整体会分为：深色区域与浅色区域。

黑下去，是让深色区域的颜色加重。

因为深色区域的颜色大多都是用在 标题、正文 等颜色，这部分需要强调页面的识别性，因此颜色越黑，用户阅读的难度就会越低。

同时不同颜色之间还是会有明显的区分，所以在设定时我们会将颜色控制在 #242424 之间。（只要灰色是在 2 开头左右的范围都是可以的）

浅上去，是将浅色的部分尽量减弱。

因为浅色区域大多是用在 描边、背景 等辅助信息的区域，这部分就需要减少颜色的占比，使得中性色对页面的干扰减少。比如太多灰色会造成页面太散、和文字进行搭配就会很难识别，所以我们在使用上就会减少颜色色值。

在整体的颜色趋势上，你会发现它是形成这样的一个趋势。

2. 中性色的原理

同时“深下来、浅上去”也是为了让它能够更好的满足 WCAG 的要求，这样的设定我们的色彩对比度都会在 7.0 以上。

比如在 语雀之前的迭代当中，设计师就是通过加深颜色，让产品的无障碍能力提高，进而能够更好的呈现页面当中的内容。但别人在设计时，描述的就会更具有价值，大家可以学习别人的表述方式。

同时对于中性色的使用，我们可以考虑融入一点点蓝色，这样对于灰色而言整体会更加干净，会让你的中性色更具质感。这里给你推荐一组具备蓝色的中性色，大家可以直接参考。

三、辅助色

辅助色主要是向用户明确的传达成功、警告、错误、链接等信息和状态。它主要起到的是辅助的作用，因此出现的频率不算太高。

通常在辅助色的设定上，我们会优先考虑 红、绿、黄 等特殊颜色，但在 B 端设计的工作当中，辅助颜色的管理反而更为重要。

1. 辅助色的要点

这里想问问大家，你是否遇到这种情况。

在一个系统当中，颜色的使用过于的混乱。比如在审批模块当中，绿色代表进行中；在通知模块当中；绿色代表个人消息；在商机阶段当中，绿色代表成单，你会发现辅助色的使用就会出现混乱的场景，如果你没有合理的梳理，就会导致辅助色异常混乱。

这时候我们就需要根据：先描述颜色的含义，再梳理不同的模块，最后确定不同的状态下究竟应该用哪些颜色。

这里，我们整理了颜色，一共包含：蓝色、红色、橙色、绿色、黄色、灰色...

进一步描述不同的颜色，具体会有哪些含义

然后梳理用到辅助色模块有哪些，将其进行记录

最后根据颜色含义和模块语义进行匹配，选择更为合理的辅助颜色，这才是我们需要去做到的。

2. 辅助色的设定

那涉及到这么多颜色，如何设定？

对于日常工作中，如果系统没有特殊要求，我们可以直接按照设计系统当中的辅助色进行使用，这就不需要太多思考，较为简单。

那如果自己有一定设置的特殊要求，就可以考虑使用 Color Space 插件来快速产出辅助色，不过在使用下来，你会发现辅助色的提示性不够，我们还可以对颜色进行微调，让它色度更高，也就是更为鲜艳，这样才能起到辅助色的作用。

最后就是将前面提到的辅助色色值与所使用的模块进行整理，放在系统当中的表格处，在后续的使用时，大家都可以根据颜色的要求进行合理的输出和匹配～

欢迎关注作者的微信公众号： CE青年Youthce