万字干货！从零开始帮你掌握B端色彩系统

色彩作为设计师的基本技能，如何平衡产品的色彩搭配是每个设计师的必修课。现在市场上有各种各样的配色工具可以一键生成配色方案，也有一套完整的色卡作为色板参考，但面对高度自由和多变的设计条件，如果缺乏对色彩规范的系统理解，只跟随设计师自己的喜好，往往导致产品混乱，没有规则。

本文结合自己的工作和学习经验，从理论基础到色彩系统建设，带大家从浅到深入学习 B 终端产品中的色彩系统。

建立更多颜色的干货：

一、色彩理论基础

色彩理论的基础是构建色彩系统的基石。接下来，我将从色彩的本质出发，介绍设计师需要掌握的几种常见的色彩模型。

1. 色彩的本质

我们都在小学物理课上学到，颜色是由物体本身发光或反射的光映射在人眼后面感知的，光的本质是一种电磁波。自然界中有不同频率的电磁波，比如短频 AM 收音机、电视信号等长频 X 光，伽马射线，我们所知道的可见光是电磁波中人眼可以接受的波长 380~780nm，即从紫色到红色范围的颜色。

资料来源：网络

除了光本身的颜色外，反射到人眼中的光也会受到物质特征的影响。当白色物体被黄光照射时，反射到人眼中看起来是黄色的，但当被黄光照射时，蓝色物体会呈现黑色。原理是黄色是蓝色的反色调。黄光本身不含任何蓝光，因此当它被蓝色物体完全吸收时，它不能反射其他颜色，导致人眼看起来是黑色的。

资料来源:巫师后期——什么颜色？

此外，我们最终感受到的颜色不仅受到光和物质特征的影响，还受到周围环境、时间和历史经验的影响。许多人已经看到了下面的网络地图。同一张图片将在不同的人眼中识别为不同的颜色。

图片来源:巫师后期——什么颜色？

综上所述，色彩的本质是一种复合物理现象，是人眼感知物体表面反射光的结果。

2. 色温：描述发光体的冷暖关系

通过了解色彩的本质，我们可以发现，仅仅依靠人们的色彩感知来描述色彩是非常主观的。如何确保每个人在实际生产中都表达相同的颜色？这就要求我们找到一种科学、规范的方法来描述颜色。在日常生活中，我们经常接触色温法。

色温法的原理是物体以光的形式辐射热量。当物体处于不同的温度时，它会发出不同颜色的光：当温度相对较低时，它是黄色的，当温度较高时，它是蓝色或白色的。

这里校准的色温与公众认知中的冷暖感正好相反。通常我们认为红色和黄色是温暖的，蓝色和白色是冷的，但事实上，红色的色温是最低的，然后逐渐增加橙色、黄色、白色和蓝色，蓝色是最高的色温。因此，色温水平与给人的色调感正好相反。

资料来源：网络

熟悉摄影的学生知道，当我们在早上或晚上在户外拍摄时，照片经常变黄，因为颜色温度较低，光线呈橙色。相机的白平衡模式可以缓解环境光的影响。其原理是通过切换预设场景的颜色温度值来抵消当前真实场景的颜色温度影响，使照片呈现白色基准更真实。

资料来源：网络

色温法是基于物体可以自己发光，而红、黄、蓝在自然发光中更常见，但绿、洋红很少。因此，仅仅通过色温法来描述颜色是不够准确的，它更适合反映环境的温度和温度与颜色之间的倾向关系。

资料来源：网络

3. 常见的颜色模型

为了更准确地描述颜色，工程师们引入了颜色模型的概念：将颜色分割成不同的属性并进行量化，通过计算机语言更科学、更准确地表达颜色，而不同维度的分割方法是颜色模型。随着科学技术的发展和制造的需要，颜色模型迭代了多种版本类型。接下来，我将逐一介绍常见模型的差异和功能特点：

① HSB 和 HSL 模型

HSB 模型也称 HSV 该模型基于人眼识别颜色，符合人类的日常生活经验，比其他模型最直观、最容易理解。该模型主要用于图像处理、计算机图形学、颜色管理等领域，用于描述和操作颜色。其属性包括：

H 色相：Hue，以角度（0°-360°）表示S 饱和度：Saturation，B//以百分比(0%-100%)表示V 亮度：Brightness 或 Value，以百分比(0%-100%)表示

HSL 是和 HSB 相同原理的模型在工作中容易混淆，区别在于:HSB 中 B 指的是「亮度 Brightness」，而 HSL 中 L 指的是「明度 Lightness」。为了方便大家理解，我整理了以下两种模型的详细区别表：

资料来源：网络

HSB 和 HSL 该模型用于软件开发和应用的使用场景，我们在实际工作中接触 HSB 模型会有更多的场景，但哪种模型更适合人类用户的界面设计尚未确定。对于设计师自己来说，需要注意的是，在开发同步设计数据时，确保使用相同的模型，以避免颜色误差。

虽然 HSL 模型有很多好处（HSB、HSL 属于同类模型，后文统一使用 HSL 但其缺陷也很明显：HSL 该模型不能用于工业制造，因为在自然界中很难找到一个属性纯度可以达到标准的物体，也很难控制单个属性变量来改变物体的颜色。为了解决屏幕显示的上述限制 RGB 模型和彩色印刷 CMYK 模型应运而生。

② RGB 模型

RGB 该模型是根据颜色发光的原理建造的，又称光的三原色，用于工业上通过红、绿、蓝三色发光单元产生颜色的电子屏幕。

R 红：Red，G以数值(0-255)表示 绿：Green，B以数值(0-255)表示 蓝：Blue，以数值(0-255)表示

通常情况下，RGB 各有 256 级亮度用数字表示为从 0、1、2...直到 虽然最高值是255，但是 255，但 0 它也是一个值，所以它是共同的 256 等级。将三种颜色叠加并控制其颜色强度 级的 RGB 颜色可以组合成千上万种颜色，这个标准几乎包括人类视力所能感知到的所有颜色，是目前应用最广泛的颜色系统之一。

资料来源：网络

RGB 模型是我们日常工作中接触最频繁的模型，但我不知道你是否有疑问：为什么选择？「RGB 红绿蓝」不使用其他颜色作为光的三原色？

首先要明确的是，能够作为三原色的基础，必须保证其中任何一种颜色不能与其他两种颜色混合，这三种颜色混合后可以形成足够多的颜色类型。而 RGB 三原色的颜色主要与人眼的生理结构有关：

资料来源：网络

正如我们前面提到的，光的本质是一种电磁波。视锥细胞分为三种，对长、中、短电磁波长最敏感，这三种波长的光对应于红、绿、蓝三种颜色。当这三种光敏细胞受到刺激时，它们会自动结合感觉到的光，形成各种颜色。这就是为什么「RGB 红绿蓝」被视为三原色的客观原因。

资料来源：网络

关于 HEX 色值

这里还有一个知识点 HEX 每个人都熟悉色值。我们在许多拾色器中都看到过它。在工作中，它经常被提供给开发学生作为颜色标志。

虽然结构看起来不一样，但是 HEX 也是采用 RGB 模型的原理是定义颜色，但语言使用16进制代码：字节值范围从 0 到 FF，颜色的最低强度是 最高强度为00 FF。实际转换时，每个数字的范围是 0～15（分为 0～9 和 A～F，其中 A～F 表示 10～15)这样每个数字都可以代表 16 个数，而每 2 可以代表位数相乘 256 等级，正好对应一个颜色通道。

与长段相比 RGB 表示法，HEX 色值表示法只需要六位字符，更紧凑、更轻，更适合开发人员。

十六进制到 RGB 转换器工具： https://purecalculators.com/zh-CN/hex-to-rgb-converter

③ CMYK 模型

以上 RGB 该模型是针对能自身发光的物体，CMYK 模型是针对依赖反射的物体的。CMYK 它是颜料的三原色，也称为印刷的三原色。最常用的场景是媒体印刷。其原理是基于油墨的光吸收/反射特性。当眼睛看到颜色时，物体实际上是通过吸收白光中特定频率的光来反射其他光来获得的。

R 青：Cyan，M以百分比(0%-100%)表示 品红：Magenta，Y以百分比(0%-100%)表示 黄：Yellow，B以百分比(0%-100%)表示 黑：Black，以百分比(0%-100%)表示

资料来源：网络

通过以上现象，我们会发现不同颜色的物质最终会得到黑色物质，这正好满足了我们工业印刷品中白纸黑字的需求：选择「红、绿、蓝」的补色「青、品红、黄」，通过调整这三种颜色油墨的比例，可以反射不同颜色的油墨。理论上，这三种颜色的油墨可以直接与同一比例混合「黑色」，但实际上，由于生产技术的限制，油墨纯度往往不令人满意，混合黑色不够丰富，只能依靠纯黑色混合，这种做法也可以节省油墨消耗。

资料来源：网络

在显示器等发光体下，RGB 模式值越大，光线越强，最终亮度最大。但在印刷品等反光体下，纸张本身的白色是最高亮度， 所以 CMYK 模式值越大，墨水越多，最终亮度越低。所以：

RGB 被称为加色模型，即多色叠加最终会得到白色CMYK 被称为减色模型，即多色叠加最终会得到黑色。

④ Lab 模型

以上三种是最常见的通用模型，一些颜色模型用于更具体的场景，Lab 模型是一种基于生理特征的模型。RGB 和 CMYK 受载体限制，由于材料的不同，相同的颜色可能会出现不同的颜色，Lab 模型是为了弥补其不足，摆脱原材料载体对模型的影响。

1）L 明度：Lightness，以数值(0-100)表示

2）a b 是两种颜色通道：

a 通道:从绿色到红色，数值(-128 至 127）表示b 通道:从黄色到蓝色，数值(-128 至 127）表示

资料来源：网络

Lab 该模型不能用于实际制造，但其颜色空间大于计算机显示器，甚至大于人类视觉的颜色域。当转换为其他模型时，颜色不会丢失或更换，因此通常用于图像颜色空间转换、颜色校正、颜色相似性比较等场景。特定的颜色转换需要一个复杂的计算公式，因为设计师只需要了解其模型的用途。

关于色彩空间

我们上面提到的一个词叫做色彩空间，它是图像处理和计算机图形领域的一个非常重要的概念，涉及到图像处理、图形、图像质量评价、广告设计等领域。很多人会把它和颜色模型混淆，事实上，这两个概念是不同的：

颜色模型：用于表示颜色的三维数学空间的数学模型，通常使用 3 个或者 4 表示一个值。色彩空间：一种色彩表达方式，它将色彩模型中的色彩映射到二维或三维空间中，以便于显示和比较。

总之，颜色模型是用来表示颜色的三维数学模型，颜色空间是颜色模型的二维或三维映射，便于显示和比较颜色。颜色空间通常与颜色模型一起使用，并使用特定的数学表达来定义颜色空间中的颜色。

资料来源：维基百科

⑤ HCL 模型

HCL 最早的模型是国际照明协会 CIE 又称“提出” CIELch(uv)。该模型诞生于解决色彩对比度问题的模型中，对有色彩识别障碍的视障人士更友好。

H 色相：Hue，以角度（0°-360°）表示C 色度：Chroma，浓度值越大，颜色越鲜艳，可以理解为颜色的浓度。用数值(0-150)表示L 照度：Luminance，用量化人眼对光亮度的感知。以数值(0-100)表示。

注意这里 HCL 模型的「Luminance」与前文 HSL 模型中的「Lightness」不同的是，让我们先看一个例子，分别通过 HSL 和 HCL 推导色卡的对比度有什么区别？

很明显，虽然都是控制变量，但左图的颜色对比度不均匀。这是因为 HSL 该模型是基于电子元件的显示亮度计算的，但不是人眼感知光的实际感觉。因此，如果在配色时使用 HSL 模型，即使「Lightness 明度」价值相同，色彩亮度在人眼看来仍不匹配，设计师需要根据主观意愿进行调整，这不仅耗费时间和精力，而且配色过程也不够科学和标准化。

HCL 该模型很好地解决了上述问题，其初衷是基于人眼对亮度的感知：只要「Luminance 照度」保持一致，不同颜色的颜色亮度总是保持均匀，在这种情况下，颜色提取过程将更简单和高效，应用于产品对视障人员更友好。

资料来源：TDesign

需要注意的是，HCL 模型的颜色空间可能无法与其他模型完全匹配，因此直接转换可能会丢失或更换颜色。这里有一些模型供您使用 HCL 基于颜色模型的颜色转换工具：

HCL 转 RGB HEX： http://hclwizard.org:3000/hclcolorpicker/MD 主题搭建工具 HCT Color Picker： https://m3.material.io/theme-builder#/customColorpicker for data： http://tristen.ca/hcl-picker/#/hlcA9FC8/1.03/182009EFigma 插件： https://www.figma.com/community/plugin

亮度、亮度和照度的区别

介于中英语语义的差异，Brightness、Lightness、Luminance 它们都可以翻译成“亮度”。然而，在色彩模型中，每个单词都有更深层次的解释。为了方便大家区分理解和区分，三者被整理在一起进行比较：

Brightness 亮度：用于 HSB 模型，客观测量颜色的显示亮度。颜色从黑色变为标准色相，满值为标准色相。Lightness 明度：用于 HSL 模型，和 HSB 客观测量颜色的显示亮度与人的亮度感知没有直接关系。颜色变化从黑色到标准色相再到白色，半值为标准色相，全值为白色。Luminance 照度：用于 HCL 模型主观衡量发光强度和颜色对比度。

可以发现前 2 一切都是客观衡量颜色亮度的，而「Luminance 照度」是真正意义上主观感受颜色的标准。

二、B 终端产品的色彩系统

近年来，随着企业产品功能量的不断丰富，产品设计体系逐渐趋于标准化。如何建立一个标准和易于使用的颜色系统，对提高团队工作效率和产品体验的一致性至关重要。通过系统的颜色管理方法，可以帮助企业统一品牌颜色，提高品牌识别和统一性。接下来，我将详细解释一下 B 色彩系统在终端产品中的构成与构建方法：

1. 色彩系统的概念

简单来说，色彩系统是指从整个设计系统中提取的分支，为便于管理而建立的色彩语言管理系统。

完整的设计系统由设计语言和模型库组成。在设计原则的指导下，通过统一的协作语言和科学的管理方法组织，创建具有相同体验的用户界面。完整的设计系统可分为三个部分：

设计原则：设计应遵循的中心思想，所有问题和形式都接近原则，减少设计语言的不确定性：包括价值观、品牌、符号、颜色、文本等产品独立表达的媒体模式库：即组件库，通过控制总结形成的快速重用工具库

色彩系统也是如此，不仅仅是简单的色彩组件库，结合设计系统的内容，我们可以将设计原则和设计语言纳入色彩规范，模式组件库是产品色板（色板）。这里可以定义颜色系统：由颜色规范和产品色板组成，可以科学有效地管理颜色的应用程序。

2. 什么是好的色彩系统？

了解色彩系统的定义，如何确保构建的色彩系统科学有效？良好的色彩系统应遵循以下三个原则：

有意义：它可以反映产品的个性，突出品牌基因，满足用户对产品的认知感受。不同颜色的搭配和使用可以满足用户的心理期望，提高使用体验。易于使用：颜色系统不仅适用于设计师自己，也适用于整个产品周期中的产品配色，从上游品牌战略到下游视觉运营。优秀的色彩系统应方便团队成员，即使没有专业背景，也能快速理解和使用。无障碍：不同颜色之间的对比度应匹配 WCAG 对比度标准，确保内容元素的可识别。

3. 无障碍的颜色识别

资料来源：网络

在色彩系统建设之初，考虑色彩无障碍识别，可以普及更多场景，有效提高产品信息识别和易用性。WCAG（Web Content Accessibility Guidelines ）作为行业内广泛使用的无障碍设计标准，内容无障碍指南是检验文本颜色可读性的有效依据。只要文本颜色和背景颜色之间的对比度符合上述标准，就可以确保识别清晰。WCAG 2.0 将颜色对比等级分为中等 3 品种、等级越高，颜色对比度越高，呈现的信息可读性越好：

A 级：对比度 3 : 1.是普通观察者可接受的最低比较；AA 级：对比度 4.5 : 1.是普通视力丧失者可接受的最低对比度；AAA 级：对比度 7 : 1.是视力损失严重者可接受的最低对比度。

这里推荐一款可视化对比度检测工具 Color Review：通过将 3、4.5、7 通过曲线标记对比度临界点的颜色，可以清晰直观地看到当前色值对比度在拾色器中的位置，便于调整。

Color Review 对比度可视化检测工具： https://color.review/

资料来源：Color Review

4. 产品色板的组成

根据颜色的类型和功能，产品级色板的内容可分为主色、中性色、辅助色和功能色，每种颜色都应有相应的色阶扩展供配色。

① 主色

产品主色一般是页面中使用最多的颜色，通常用于关键行动点、操作状态、重要信息提示、图形化等场合。

许多设计师将直接等同于主色和品牌色，即直接将品牌色作为产品的主色，我们的日常接触 C 大多数终端产品也直接使用品牌色作为主色，但 B 端产品的主色也可以直接使用品牌色吗？在这里，我们需要首先了解 B 端和 C 端产品的设计差异。

C 端产品设计侧重于流量思维，追求尽可能渗透用户的碎片化生活，吸引用户。以品牌色为主色，突出品牌特色，强化用户心理认知，提高用户粘性和活动性。

而 B 终端设计侧重于效率思维，强调提高用户的操作效率，帮助用户实现使用目标。因此 B 终端产品的主要颜色优先考虑颜色识别和视觉感受，使用产品时尽量保持用户的沉浸感，即使长时间浏览也不会感到不舒服。因此，从根本上说，B 端产品的主要颜色不能干扰用户的使用和操作。必要时，需要在原有品牌视觉的基础上提取品牌颜色进行修改，使其更符合用户的使用场景。当然，品牌价值传递和运营体验是产品的最佳解决方案。

② 中性色

中性颜色，也被称为无色，包括黑色、白色和不同深度的灰色，通常用于文本、图标、背景、线框等场景。中性颜色本身没有颜色属性，也没有颜色温度的区别，所以它可以更好地衬托其他颜色，也可以打开信息的层次差距，这对创建结构、表达边界和建立信息层次非常重要。

浅灰色一般用于分割线、表单描边、背景色等场景，划分页面布局，避免干扰主要内容。深灰色主要用于文本、标题、图标等元素，通过明度变化突出内容，方便用户浏览。

在保持中性色本身信息区分的前提下，一些产品会在中性色中增加适度的色彩倾向，增加品牌色基因，增强品牌氛围。

资料来源：TDesign

在搭建中性色板时，市场上有配置文字颜色的方法 2 一种解决方案：一种是直接控制灰度扩展色阶，另一种是利用透明度的变化来建立色阶，例如使用#0000 并降低其透明度。

市场上使用透明度方案的人并不多。考虑到其根本目的是确保文本信息内容能够正确显示，这里为两种方案的使用场景提供了更清晰的建议：

色值变化：内容可以完全保留颜色信息，不会造成颜色丢失，组件施工维护成本较低。适用于大多数场景。透明度变化：内容信息仍然可以在复杂图片或纹理的背景下显示，更适合明暗模式，更具包容性，但会在一定程度上增加浏览器的渲染负担。适用于需要暗光模式或背景纹理复杂的页面。

③ 辅助色

辅助色是基于主色的其他颜色，主要包括 2 一方面，它可以平衡颜色系统，缓解用户在使用产品过程中频繁使用单色造成的视觉疲劳。另一方面，它可以丰富颜色系统的可用性，并通过比较主色来增加内容的区别。

资料来源：网络

根据研究，人类可以命名的彩色数量只有 8～9 更多的颜色分类会增加使用过程中的筛选负担，降低颜色分类。因此，通常建议在人类中命名 8 在颜色中选择 6～8 作为辅助色，如果有更多的色彩场景需求，可以考虑添加扩展色阶交替使用。

④ 功能色

B 在最终产品中，色彩的心理暗示将用于反馈用户的状态，以降低用户的认知成本。这部分辅助颜色通常独立称为功能颜色：遵循用户的思维和行业默认的颜色语义，选择特定的颜色向用户传达成功、失败、报警、链接等状态信息。如红色通知、提醒、错误等，绿色通信确认、成功、正确等，橙色通信警告等。

5. 搭建色彩系统

以上是色彩系统的主要内容。接下来，我们将详细介绍如何构建适合自己业务的色彩系统，主要分为以下五个步骤：

第一步:色相环取色。主色推导出符合品牌调性和差异的辅助色。

第二步：色彩校正。对所选颜色进行色彩校正，使其保持感官频率相同。

步骤3：色阶延伸。根据所选颜色搭建均匀的色阶梯度，层次清晰。

步骤4：颜色语义化。语义命名搭建的色板，方便团队调用。

第五步:团队推进。将资源同步到团队中使用，优化迭代。

① 第一步：色相环取色

色相环取色是在主色的基础上，通过使用色相环来提取辅助色，具体操作方法如下：主色「色相 Hue」以色相环为起点 15°梯度加减，得到 24 颜色板。然后根据自己的产品场景，选择其中 6～8 作为辅助颜色的颜色。

② 第二步：色彩校正

在色相环的颜色采集过程中，虽然保持其他变量，只改变色相，但由于颜色本身在视觉感觉上的亮度差异，需要进行颜色校正，一方面保证整个色板保持视觉感官频率，另一方面保证视障群体的识别。

③ 第三步：色阶延伸

选择合适数量的辅助颜色后，需要扩展单个颜色的色阶，以提供更多的配色空间。色阶扩展是指将同一颜色相下的颜色从浅到深划分为多个色阶梯度。通常使用色阶扩展 8～12 等级划分，如果等级太小，可能无法满足日常的着色需求，过多的等级会导致颜色差异的下降，颜色选择的成本也会增加。

市场上有很多种色阶延伸方法。这里有几种常见的方法：透明叠色、直线等分和工具生成。学生可以根据团队情况自行选择：

透明叠色法

顾名思义，透明叠加法是在原有颜色的基础上叠加不同透明梯度的白色/黑色遮罩，从而获得不同颜色梯度的衍生色，然后通过采色器吸收叠加后的色值。该方法成本低，无需其他工具配合即可实现，但操作相对繁琐。当叠加层次较多时，可能会导致颜色偏差，有时需要根据实际情况进行微调。

直线等分法

直线等分法是通过在拾色器中建立坐标系，然后通过直线等分来获取颜色。其中，拾色器的坐标系是根据当前选择的颜色模型确定的，例如 HSB 横/纵坐标为饱和度/亮度，HSL 模型是饱和度/亮度。直线等分法操作相对简单，可以通过公式算法自动着色，但设计师独立推导的计算成本较高，通常需要配合公式计算。

操作步骤如下：

1)在拾色器上注明要延伸的颜色，将色值点与左上方的纯白色和右下方的纯黑色点连接起来，得到 2 条线段

2）将 2 均匀分为条线段 5 段落，所有线段段落集合在一起 11 一个点，计算每个点的色值，就可以得到这个 11 由点组成的色板。

3)使用现有的颜色坐标（X，Y）以以下计算公式为基准，可获得延展色的色值：

左上点：横坐标(X/5)递减，纵坐标[(1000-Y)/5】增加右下角点:横坐标[(1000-X)/5]增加，纵坐标(Y/5) 递减

工具生成

经过多年的发展，国内外许多设计系统已经开发出开源工具，直接生成完整的色板。经过不断迭代，算法基本上可以满足大多数场景中色板的需求，这是中小型团队的首选。然而，工具生成也有一些缺点。其色值生成始终基于公式计算，因此设计师仍然需要在一些极端场景中进行干预和调整。

资料来源：Ant Design 色板生成算法演进的道路

以下是常见的色板生成工具：

在线工具 Chroma.js： https://www.vis4.net/palettesArcoDesign Palette 色彩工具： https://arco.design/palette/listAnt Design 色板生成工具： https://ant.design/docs/spec/colors-cn#Materialialia，色板生成工具 Palettes 色板生成工具： https://www.material.io/design/colorHTML Color Codes 颜色选择器： https://htmlcolorcodes.com/Eva Design System 色彩系统： https://colors.eva.design/Atmos 色板生成工具： https://atmos.style/

④ 第四步：色彩语义化

色彩语义化是指根据颜色在界面中的作用和使用场景进行重命名，以便于团队以后的维护和使用。这一步看似简单，但在实践中，设计师需要对颜色的使用场景和团队的使用有深入的了解，许多细节需要仔细考虑和考虑。这里有一个推荐的参考 Nathan Curtis 对于语义模板，作者将设计系统下的命名模板分为命名空间-元素对象-基本风格-修改备注四个部分。

资料来源：Naming Tokens in Design Systems

详细介绍了设计系统下的语义命名，有兴趣的可以直接阅读原文： https://medium.com

Nathan 设计系统的命名涵盖了一系列元素的命名方法，包括颜色、控制器、文本等，而颜色系统只需要截取其中一部分并组装成符合自己场景的语义模板。您可以根据产品规模和团队情况选择合适的内容进行命名和包装。需要注意的是，语义模板的命名需要合理的控制精度：一方面，颗粒过细的命名会导致过于臃肿和维护成本过高，另一方面，颗粒过粗的命名会导致元素分化不足，在团队推广使用时容易造成混乱。

有一个非常简单的方法来验证颜色语义是否清晰，即直接向开发学生提供设计的颜色匹配方案，看看颜色的语义场景是否只能通过命名来理解，而不需要使用颜色进行评论和解释。从不同的角色角度更容易发现颜色命名的问题。

⑤ 第五步:团队推进

在这里，色彩系统的基本色板和配色方案已经基本完成，然后将其整理到组件库中，并输出设计文件同步给团队的其他成员。建议在这里使用 Figma Tokens 管理和维护插件。此外，在同步前端学生建立开发组件库时，尽量使用语义命名来包装颜色，而不是直接写下固定的颜色值，以便在未来的迭代调整中更加灵活。

协同设计:在 Figma 中生成的颜色变量与开发代码联动：使用颜色变量表同步信息

参考资料

https://www.yuque.com/xiami0101/bq79sy/vtnqb262ag42tt66htttpst://www.yuque.com/xiami0101/bq79sy/hy3vvihttps://www.youtube.com/watch?v=k1rB1Y4isHs&list=PLhnwj_cftHvhwo8p0mytrnzzlgbtovgf4https://www.jianshu.com/p/f0e6382d825httpstpstpstps://zhuanlan.zhihu.com/p/1654859htttps://jessieji.com/2020/hcl-instead-of-hslhttps://medium.com/@pk.kiselev/designing-colour-system-d9d39f245e01htttps://www.jianshu.com/p/facdbab5ac20httpstpstpstps://zhuanlan.zhihu.com/p/3242584htttps://www.yuque.com/xiami0101/bq79sy/ntkf60rgs9g3m2h2singleDoc#https://zhuanlan.zhihu.com/p/102743681?singleDoc#https://zhuanlan.zhihu.com/p/102743681?utm_id=0

欢迎关注作者微信微信官方账号:「虾体验笔记」