css颜色对照表-大厂都在用！本文将引导您理解和应用Design Token

bendan520 css

2023-08-29 0 7,286 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

温馨提示：本文适合有一定构建设计系统经验的设计师阅读。全文共10000字左右，建议阅读时间10分钟

0 前言

近年来随着Figma等一系列在线设计工具的兴起，相信设计师对设计系统有了更深入的了解。事实上，设计体系的构建是一个极其庞大和复杂的工程。我们通过各种设计规范提高了生产和研究过程的效率，但我们仍然不时遇到一些棘手的问题。

1、开发时使用的颜色/字体样式/投影与设计稿存在差异；

2.颜色选择困难。当不同的设计师使用各种级别的文字颜色时，是使用Gray1还是Gray2，我不知道该选择哪一个；

3、SaaS产品需要根据客户品牌色彩调整产品主色调，设计开发面临巨大工作量；

4、设计稿的更新未能及时反映到开发者的代码中。首先，开发需要先收到新的设计稿，然后根据指示更新代码甚至肉眼判断差异；另一方面，设计稿看似简单的改动可能会导致大规模的代码改变，比如字体大小等；

为了解决和优化上述问题，Design Token应运而生。能够高效解决产品设计开发过程中的细节和风格一致性问题，提高产研团队的设计质量和协作效率。

1. 什么是设计通证

“Token”本意是“令牌、指令”，与Design一起指的是“设计变量”。在工程逻辑中，它用于验证用户身份和服务器端，而在设计系统中css颜色对照表，Design Token可以简单地理解为一种封装的视觉风格参数。它规定了样式参数，并通过一套符合设计师和工程师理解的统一命名规则为这些样式参数定义了名称。

原子设计理论的提出者Brad Frost在《原子设计》中提到：原子设计理论是由原子（Atoms）、分子（Molecules）、组织（Organisms）、模板（Templates）、页面（Pages）、标准流程（Patterns），然后是更完整的设计系统（Design Systems），所有这些都是为了帮助产品设计、研发效率和一致性。同时，它们也是传达设计原则、形成产品独特知性的基石。 Design Token是原子层面最基本的构成元素。

根据北美顶级SaaS公司开源设计系统Saleforce Lightning Design System的解释，Design Token是设计系统中的视觉原子，是设计属性的命名实体，用于替换特定的编码值（例如颜色的十六进制系统、图像的间距）素值等）以保持可扩展且一致的设计系统。

可以说Token是最底层的原子。本质上，它找到组件、属性和代码之间的对应关系，统一设计风格和后端语言，从而可以快速管理组件和设计系统。

2. Design Token的优势

基于以上关于Design Token的基本解释，Design Token的好处可以概括为：

2.1 设计语义——更容易理解

每个组件的基本元素都可以用token进行语义命名，帮助设计者和开发者完善统一的描述语言。例如，颜色值#91d5ff按照传统设计规范命名，可以称为Blue-3。在实际应用中，设计者和开发者无法直接使用Blue-3来了解该颜色用于哪些具体场景。而当我们通过Token语义使其达到组件级精度时，就会被称为：color-primary-brand-light -禁用，不同的设计者和开发者可以快速了解该颜色用于哪些具体场景。

2.2 设计方案——更加一致

当使用组件库将其实际应用到项目中时，我们有时会有不同的设计人员合作制作一个项目。对于一些不熟悉设计规范或者新加入的设计师来说，他们会感到困扰。使用辅助文本颜色时，是使用 Gray2、Gray3 还是 Gray4。这时我们定义一个Token名称：color-text-secondary，这个Token的嵌套颜色为：Gray3，这样我们设计者在使用的时候只需要选择Token变量color-text-secondary即可。但可选择的颜色是唯一的，这在一定程度上可以保证同一场景下不同设计师的设计稿的高度一致性。

2.3 主题皮肤-一键更换

主题皮肤的更换可以采用两个维度，一是黑色模式与黑色模式之间的更换，二是不同品牌颜色之间的更换。我们可以使用同一个Token来命名同一场景中不同主题的颜色，例如变量名为：color-primary-brand-light-default，蓝色皮肤下对应的值为：#165DFF；红色皮肤对应的值为：#F53F3F。然后就可以通过插件面板上的一键操作完美切换。同时，这些切换模式也可以带入tokn.josn代码中（后面会详细讲如何输出json文件进行开发），与开发同步。

2.4 设计变更的高效维护

还是里面的例子，当我们的辅助文本颜色 color-text-secondary 需要从 Gray-600 更改为 Gray-500 时。如果没有“color-text-secondary”Token，我们可能需要自动选择所有使用Gray-600辅助文本的视口，并将它们一一更改为Gray-500，而当我们有“color-text-secondary”时这样的Token，我们只需要一键将color-text-secondary的值从Gray-600改为Gray-500，就可以完成产品的全局颜色变化。另外，设计者可以将token.json代码（如何输出json文件进行开发，后面会详细介绍）同步更新给开发，开发可以直接一键替换css颜色对照表，在线界面可以快速套用改变的颜色半自动值。

2.5 设计成果——精准还原

设计稿能够通过开发准确还原，这是几乎每个设计师在实际项目中都会遇到的问题。当我们进行初步设计测试时，尽管我们花费了大量的时间进行演练，并在表格上列出了许多细节问题，但最终的修复效果并不能得到保证。甚至有的时候，感觉做初检比重新做设计稿还费力[emo]，有时甚至直接按F12改网页上的代码来给出开发提示[狗头]。

例如，在常规不使用Token的情况下，开发者朋友使用硬编码模式，代码编辑器很难判断颜色是否正确。如果开发者不小心输入了错误的数字，很可能会造成侯氏的不一致。使用Token后，开发只需要输入该场景的Token名称的前缀，代码编辑器就会自动提示有哪些颜色可供选择。如果不正确，代码编辑器将给出错误消息。开发者可以在编写代码的过程中完成基本的检查工作。这样可以在一定程度上准确地还原设计者的结果，并且设计者初始检查的工作量会小很多。

3. 在设计系统中应用Design Token

上面讲了这么多理论，接下来开始实战，做好准备吧~

3.1 细化Token要素

设计通证是构成设计语言的基本构件，是设计体系中影响视觉风格的核心、最基本的元素。根据 Figma Tokens 插件默认提供的面板，可以添加以下组件：

颜色、阴影投影、排版字体样式、大小、空间间距、边框半径描边圆角、边框宽度描边长度、不透明度透明度等。

3.2 定义Token命名规则

对于Token的命名规则，不同团队有不同的定义方式，但本质都是为了提高产品的一致性和工作效率。因此，设计者在对Token命名规则进行分类时，需要与开发朋友达成一致，以保证更好的实现。

在为自己的产品制定Token命名规则之前，我们先来看看各大厂商的Design Token是如何命名的

腾讯文档Token变量表

腾讯TDesign开源设计系统通证

:root,:root[theme-mode="light"] {--td-brand-color-1: #ecf2fe;--td-brand-color-2: #d4e3fc;--td-brand-color-3: #bbd3fb;--td-brand-color-4: #96bbf8;--td-brand-color-5: #699ef5;--td-brand-color-6: #4787f0;--td-brand-color-7: #266fe8;--td-brand-color-8: #0052d9;--td-brand-color-9: #0034b5;--td-brand-color-10: #001f97;--td-warning-color-1: #fef3e6;--td-warning-color-2: #f9e0c7;--td-warning-color-3: #f7c797;--td-warning-color-4: #f2995f;--td-warning-color-5: #ed7b2f;--td-warning-color-6: #d35a21;--td-warning-color-7: #ba431b;--td-warning-color-8: #9e3610;--td-warning-color-9: #842b0b;--td-warning-color-10: #5a1907;--td-error-color-1: #fdecee;--td-error-color-2: #f9d7d9;--td-error-color-3: #f8b9be;--td-error-color-4: #f78d94;--td-error-color-5: #f36d78;--td-error-color-6: #e34d59;--td-error-color-7: #c9353f;--td-error-color-8: #b11f26;--td-error-color-9: #951114;--td-error-color-10: #680506;--td-success-color-1: #e8f8f2;--td-success-color-2: #bcebdc;--td-success-color-3: #85dbbe;--td-success-color-4: #48c79c;--td-success-color-5: #00a870;--td-success-color-6: #078d5c;--td-success-color-7: #067945;--td-success-color-8: #056334;--td-success-color-9: #044f2a;--td-success-color-10: #033017;--td-gray-color-1: #f3f3f3;--td-gray-color-2: #eee;--td-gray-color-3: #e7e7e7;--td-gray-color-4: #dcdcdc;--td-gray-color-5: #c5c5c5;--td-gray-color-6: #a6a6a6;--td-gray-color-7: #8b8b8b;--td-gray-color-8: #777;--td-gray-color-9: #5e5e5e;--td-gray-color-10: #4b4b4b;--td-gray-color-11: #383838;--td-gray-color-12: #2c2c2c;--td-gray-color-13: #242424;--td-gray-color-14: #181818;
// 文字 & 图标 颜色--td-font-white-1: rgba(255, 255, 255, 100%);--td-font-white-2: rgba(255, 255, 255, 55%);--td-font-white-3: rgba(255, 255, 255, 35%);--td-font-white-4: rgba(255, 255, 255, 22%);--td-font-gray-1: rgba(0, 0, 0, 90%);--td-font-gray-2: rgba(0, 0, 0, 60%);--td-font-gray-3: rgba(0, 0, 0, 40%);--td-font-gray-4: rgba(0, 0, 0, 26%);
// 基础颜色--td-brand-color: var(--td-brand-color-8);     // 色彩-品牌-可操作--td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告--td-error-color: var(--td-error-color-6);     // 色彩-功能-失败--td-success-color: var(--td-success-color-5); // 色彩-功能-成功
// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态--td-brand-color-hover: var(--td-brand-color-7);     // hover态--td-brand-color-focus: var(--td-brand-color-2);     // focus态，包括鼠标和键盘--td-brand-color-active: var(--td-brand-color-9);    // 点击态--td-brand-color-disabled: var(--td-brand-color-3);  // 禁用态--td-brand-color-light: var(--td-brand-color-1);     // 浅色的选中态
// 警告色扩展--td-warning-color-hover: var(--td-warning-color-4);--td-warning-color-focus: var(--td-warning-color-2);--td-warning-color-active: var(--td-warning-color-6);--td-warning-color-disabled: var(--td-warning-color-3);--td-warning-color-light: var(--td-warning-color-1);
// 失败/错误色扩展--td-error-color-hover: var(--td-error-color-5);--td-error-color-focus: var(--td-error-color-2);--td-error-color-active: var(--td-error-color-7);--td-error-color-disabled: var(--td-error-color-3);--td-error-color-light: var(--td-error-color-1);
// 成功色扩展--td-success-color-hover: var(--td-success-color-4);--td-success-color-focus: var(--td-success-color-2);--td-success-color-active: var(--td-success-color-6);--td-success-color-disabled: var(--td-success-color-3);--td-success-color-light: var(--td-success-color-1);
// 遮罩--td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出--td-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用
// 背景色--td-bg-color-page: var(--td-gray-color-2);                        // 色彩 - page--td-bg-color-container: #fff;                                // 色彩 - 容器--td-bg-color-container-hover: var(--td-gray-color-1);             // 色彩 - 容器 - hover--td-bg-color-container-active: var(--td-gray-color-3);            // 色彩 - 容器 - active--td-bg-color-container-select: #fff;                         // 色彩 - 容器 - select--td-bg-color-secondarycontainer: var(--td-gray-color-1);          // 色彩 - 次级容器--td-bg-color-secondarycontainer-hover: var(--td-gray-color-2);    // 色彩 - 次级容器 - hover--td-bg-color-secondarycontainer-active: var(--td-gray-color-4);   // 色彩 - 次级容器 - active--td-bg-color-component: var(--td-gray-color-3);                   // 色彩 - 组件--td-bg-color-component-hover: var(--td-gray-color-4);             // 色彩 - 组件 - hover--td-bg-color-component-active: var(--td-gray-color-6);            // 色彩 - 组件 - active--td-bg-color-component-disabled: var(--td-gray-color-2);          // 色彩 - 组件 - disabled
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色--td-bg-color-specialcomponent: #fff;
// 文本颜色--td-text-color-primary: var(--td-font-gray-1);      // 色彩-文字-主要--td-text-color-secondary: var(--td-font-gray-2);    // 色彩-文字-次要--td-text-color-placeholder: var(--td-font-gray-3);  // 色彩-文字-占位符/说明--td-text-color-disabled: var(--td-font-gray-4);    // 色彩-文字-禁用--td-text-color-anti: #fff;                      // 色彩-文字-反色--td-text-color-brand: var(--td-brand-color-8);           // 色彩-文字-品牌--td-text-color-link: var(--td-brand-color-8);            // 色彩-文字-链接
// 分割线--td-border-level-1-color: var(--td-gray-color-3);--td-component-stroke: var(--td-gray-color-3);// 边框--td-border-level-2-color: var(--td-gray-color-4);--td-component-border: var(--td-gray-color-4);
// 基础/下层 投影 hover 使用的组件包括：表格 /--td-shadow-1: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /--td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);
// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边--td-shadow-inset-top: inset 0 .5px 0 #dcdcdc;--td-shadow-inset-right: inset .5px 0 0 #dcdcdc;--td-shadow-inset-bottom: inset 0 -.5px 0 #dcdcdc;--td-shadow-inset-left: inset -.5px 0 0 #dcdcdc;
// table 特定阴影--td-table-shadow-color: rgba(0, 0, 0, 8%);
// 滚动条颜色--td-scrollbar-color: rgba(0, 0, 0, 10%);}