Date 2025-12-10 16:34:48
编者按：如何构建B端设计的色彩系统？本文从三个方面帮助您掌握B端色彩系统的设计基础：色彩分类、色彩系统和色彩应用。
更多相关干货：
大家好，我和你谈花生的设计~我以前介绍过你 PCCS(日本色彩研究所配色系统)是世界上最常用的颜色系统之一，可以帮助我们了解如何使用颜色更方便，如何搭配颜色更和谐美观。
阅读文章 >中后台管理系统是帮助企业高效稳定管理、运营、合作的管理工具，从而降低成本，提高效率的管理工具。因此，在产品体验中更注重效率和理性。
界面色彩设计应遵循这一目标，为产品传达信息提供良好的服务，确保界面整体风格协调，符合视觉效果的审美标准。界面太花哨，虽然让用户可以闪耀，但会影响细节信息的识别，最终走向“审美疲劳”。今天我们将讨论颜色系统的建设。
不同于 C 终端产品的运营和营销场景需要设计的多样性，以跟上设计的流行趋势。B 端需要相对稳定的色彩体系，以保证产品设计的高效可控。
色彩、布局和字体都是底层的整体风格，因此需要适应各种应用场景和组件设计。纵观各大厂商的设计系统，颜色通常分为 4 种类型。
1. 主色
主色是产品的核心颜色，使用频率最高，可以说是产品风格的关键因素。常用于突出信息、引导操作、功能状态表达等。
中后台管理系统的主色通常是品牌色，可以更好地传达品牌价值，构建统一的界面风格。例如 TDesign 以腾讯蓝（Tencent Blue）作为主色；微信官方账号管理后台采用“微信绿”，飞书后台管理系统采用“蓝绿”品牌色。
来自 TDesign
当然，并不是所有的品牌颜色都可以用作主要颜色。在后台管理系统中，工具产品具有较强的属性，更强调产品的技术意识和稳定性，需要帮助用户沉浸式地完成工作任务。因此，以蓝色为代表的冷色系统应用更多。
过多的暖色会让人兴奋，应用相对较少。例如，阿里巴巴云在框架层面和概述信息中使用品牌橙色作为主要颜色，功能页面主要是蓝色。华为云只在主按钮上使用品牌红色，其他内容仍然使用蓝色。
2. 功能色
B 终端产品还需要通过颜色将操作结果、系统状态等信息反馈给用户。最典型的是成功、失败、提示/警告、错误、链接等，属于功能色。
功能色系统需要满足用户的认知习惯。例如，绿色通常代表正常或成功，橙色作为警告，红色作为错误，蓝色作为链接。用户可以直观地理解信息背后的状态，而无需阅读文本信息。
来自 TDesign
3. 中性色
中性色主要是黑、白、灰三种颜色，因为没有温度和温度，也没有色调，也被称为无色系统。常用于文本、背景、图标、边框、分割线等元素。
中性色非常重要，最常用于页面。因为它是无色的，只要控制得当，就可以大面积使用，不会增加界面的信息负担，但有利于形成内容层次和区域划分，使界面更有序，内容结构更清晰，不会影响界面风格。
来自 TDesign
当然，在使用中性色时，需要有更清晰的色彩对比，否则可能会模糊，影响信息的可读性。
此外，在某些情况下，中性色还可以添加一定的品牌色，使中性色具有品牌倾向。 TDesign 在中间，将品牌颜色的混合比例定义为 20%。
品牌中性色的计算公式如下：
Average(r,g,b) = 0.2*(r1，g1，b1) + 0.8*(r2，g2，b2)
4. 扩展色
在 B 在最终产品中，将会有更多的颜色需求场景，如数据可视化、插图和其他场景。为了确保界面的协调，扩展颜色可以由主色或功能色扩展，主要考虑页面整体风格的美感和用户体验。
在确定基本颜色后，颜色系统需要通过灰度或透明度衍生出来，以满足各种场景的颜色需求。这需要理解一些基本的颜色理论。
当我们第一次学习颜色时，我们不可避免地会提到三原色的概念。
光学三原色（RGB）：红、绿、蓝。三原色混合后，形成显示屏显示颜色，三原色同时加入白色。RGB 它是根据颜色发光的原理设置的。当它们的光相互叠加时，颜色是混合的，但亮度等于两者亮度的总和。混合亮度越高，即加法混合。
当三色灰度值相同时，产生不同灰度值的灰色调，即三色灰度为 0 时间，是最暗的黑色调；三色灰度都是 255 时，是最亮的白色调。
设计调色时，RGB 模式不容易使用，我们优先考虑更容易理解的 HSB 模式，即色相（Hue）、饱和度（Saturation）、明度（Brightness），通过这三个维度，颜色调整更方便。
色相（Hue）
颜色是颜色在色轮的位置，标准色轮是 0-360°圆环。日常使用中，色相用颜色名称标识，如红色、绿色或橙色等，黑白无色相。
饱和度（Saturation）
饱和度可以理解为颜色的强度或纯度，表示灰色成分在色相中的比例。通常是“%” 来表示，范围是 0%~100%。饱和度越高，颜色越鲜艳；饱和度越低，颜色越暗。
明度（Brightness）
明度是颜色的明暗程度，通常也是以色为基础的 用0%(黑色)~100%(白色)来衡量。 3 一个维度的集合，可以建造出来 HSB 色彩空间。调整 3 我们可以选择我们想要的颜色作为参数。
不过在 Figma、Sketch、Photoshop 在这些绘图软件中，彩色面板以平面形式出现，增加透明度参数，形成更容易调整的 HSVA 色彩空间。
基础色确定后，可以通过 HSVA 模型生成一系列色板。包括 2 种方法：
透明度调节法
可设置一系列透明度系数获得浅色梯度，或叠加黑色透明度获得深色梯度，借助吸色工具获得相应的色值，最后根据视觉效果进行微调。
调整饱和度/明度参数
直接调整颜色的饱和度和亮度，以确保色相值不移动。浅色系统通常需要降低饱和度和亮度。深色系统需要降低亮度，并根据视觉效果调整饱和度。
除了设计师的自定义外，一些设计系统还提供自动生成颜色梯度的算法工具。
例如 Ant Design、Acrodesign 都提供了色板生成工具。而且 Ant Design 还提供了主色参数建议：饱和度和明度不低于 70。
Ant Design 色板工具地址： https://ant.design/docs/spec/colors
Acrodesign 色板工具地址： https://arco.design/palette/list
一旦建立了颜色系统，在正常情况下，可以选择标准颜色。然而，在设计规范中，默认情况下，我们定义的颜色值应用于白色背景。
在实际使用中，字体或图标应用程序的背景颜色将更加复杂，例如，背景颜色可能是不同颜色阶的主要颜色、功能颜色或带有屏蔽层的场景。不同的背景颜色会影响视觉显示。但我们无法定义所有的可能性，这不仅增加了设计师的工作量，而且增加了开发的工作量。
为了满足这些场景的色彩需求，透明度梯度可以通过固定色值来增加。让内容与背景色融为一体，给用户带来更好的阅读和视觉体验。
来自 Ant Design
归根结底，色彩规范只是为了让设计更有规律和依据。B 端产品界面设计仍需谨慎克制，合理使用标准内的颜色，善于使用清晰的颜色区分和传达信息，指导操作，不要让颜色成为界面的干扰因素。
参考文献：
https://ant.design/index-cnhttps://tdesign.tencent.com/https://arco.design/http://www.woshipm.com/pd/4928465.html欢迎关注作者微信微信官方账号:「子牧UXD」
