3个章节 ，帮你学会B端设计师必须掌握的颜色设定
· 2026-07-20 19:34:51
颜色是我们 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
文章推荐：