色彩体系是设计系统的核心支柱之一。一套结构清晰、命名规范、经过验证的色彩体系，能确保产品在不同平台和场景下保持一致的视觉体验，同时大幅提升设计与开发团队的协作效率。本文将从色彩分类、命名规范、验证方法到设计令牌（Design Token）的应用，系统讲解如何构建专业级的设计系统色彩体系。

如何创建色彩体系

创建色彩体系的正确起点是区分基础色。基础色通常是品牌色以及主导 UI 设计的核心色彩。你的强调色必须始终与主色关联，绝不应使用未在 UI 设计调色板中定义的色彩。

在国内互联网大厂的设计实践中，色彩体系的构建通常遵循”主色 + 辅助色 + 语义色 + 中性色”的四层结构。这种分层方式能覆盖绝大多数业务场景，同时保持体系的简洁和可扩展性。

命名规范

恰当的命名是将色彩纳入设计系统的第一步关键工作。选择正确的色彩命名规范是设计师在选定色彩和色调之前就应该完成的事情。设计系统中的色彩名称必须体现其用途。

如你所见，我们建议在设计系统中使用”主色””辅助色””第三色”来命名，而非直接使用”绿色””蓝色””红色”这类描述性名称。这种命名方式能确保 UI 具备更高的灵活性和一致性——即使未来品牌进行整体焕新，只需替换色值而无需改动命名体系。

主色

设计系统中的主色是品牌的核心色彩，决定了品牌或数字产品的整体视觉气质。作为设计师，你会在界面的众多区域使用这些色彩。设计师通常在整个 UI 设计中使用主色来展示品牌身份并强化品牌认知。

国内品牌案例：微信的绿色、支付宝的蓝色、京东的红色，都是极具辨识度的主色应用。

辅助色

设计师在设计系统中使用辅助色来突出和补充主色。最主要的辅助色通常被称为”强调色”。辅助色的最佳实践是节制使用，仅用于突出特定的 UI 元素，如主推按钮。此外，你应始终将辅助色纳入品牌规范文档。

有时一个品牌可能有两到六种辅助色，务必全部纳入体系。辅助色还能帮助键盘用户识别当前聚焦区域，或告知用户所处的活跃版块。在较小或更极简的项目中，主色同时也充当强调色。

语义色

除了主色和辅助色，设计系统中还包含语义色和中性色。语义色用于传达特定目的。设计师使用语义色来传递特定信息，如警告或其他提示。

语义色的典型例子包括：绿色具有正面含义，设计师用它传达成功状态；红色通常用于警告；黄色用于一般提醒。在国内设计规范中，语义色通常与业务状态深度绑定，如支付成功、订单异常、系统通知等。

中性色

设计系统中的中性色可以包括白色、黑色或不同深浅的灰色。设计师使用中性色作为背景或文字色彩。中性色不一定是主色，但作为设计师你一定会用到它们。

一个无障碍设计的小技巧是使用中性色来降低强烈对比，缓解用户的视觉疲劳。在国内内容类产品（如微信读书、得到）中，大量采用中性色构建阅读界面，确保长时间阅读的舒适度。

色阶的构建与命名

确定设计系统中的基础色后，你需要创建各种浅色变体和深色变体以实现灵活性。这些变体同样需要规范命名。

例如，我们建议将默认色称为主色 500（代表其明度层级）。更浅的色调依次使用主色 400、主色 300 等；更深、更浓重的色调使用主色 600、主色 700 等，具体数量取决于所需的色阶丰富度。

这种数字命名法在国内设计团队中已成为行业标准。蚂蚁金服的 Ant Design、字节跳动的 Arco Design 都采用类似的 50-100-200-…-900 或 100-200-…-900 的色阶命名体系，便于设计师和开发者快速理解和调用。

验证你的调色板

确定设计系统中的主色、辅助色和语义色后，必须通过确保它们适配所有设计中的 UI 元素来验证这些色彩。

验证色彩时，你需要选取关键 UI 元素（如背景、文字和按钮），开始使用预选色彩，观察它们是否适配、能否形成独特的视觉风格，以及最重要的是——是否服务于其设计目的。

例如，你需要验证预选的辅助色是否能最大程度抓住用户注意力。你还需要检查语义色（如警告色和成功色）是否对所有用户都清晰传达了其含义。

在国内设计流程中，色彩验证通常发生在设计评审阶段。设计师会准备高保真原型，邀请产品经理、业务方和开发团队共同参与评审，确保色彩方案在真实业务场景中有效。

对比度与无障碍设计

在前面的段落中我们简要提及了对比度和无障碍设计，现在深入探讨设计系统中的色彩如何帮助或破坏你的设计。

当你希望以无障碍为考量进行设计时，创建恰当的色彩对比度是最关键的步骤。创建调色板时，你必须确保所有色彩及其色阶都符合 WCAG（Web 内容无障碍指南）标准。

深入了解设计系统中的色彩对于创建良好的对比度至关重要。色彩对比度高度影响你所设计的数字产品内容的可读性水平。它对于患有各种眼疾或色盲的用户尤为重要。

良好的色彩对比度意味着所有用户都能看到内容，无论他们使用什么设备或处于何种光线环境。你可以使用多种在线工具检查对比度水平，如 WebAIM 的色彩对比度检查器。

在国内，随着《无障碍环境建设法》的实施，越来越多的企业开始重视产品的无障碍设计。想了解无障碍设计的具体实践？阅读《无障碍设计完整指南》。

测试，测试，再测试

如果你想成为一名专业的产品设计师，必须记住：测试就是一切。你可能觉得自己定义的设计和设计系统中的色彩非常出色且符合无障碍规范，但我们常说：你不是你的用户。

因此，你需要验证设计决策并测试色彩的使用。最佳实践是在设计流程的早期阶段，就与你团队的其他设计师和业务方一起测试你的色彩选择。反馈和输入能让你的工作轻松许多，因为你会听到不同视角，并意识到你之前未曾考虑过的问题。

所以，一旦你创建了定义好的调色板，就立即向团队成员和其他业务方展示。为了进一步验证你的决策，让业务方查看带有建议色彩的关键 UI 元素或页面。这样，他们能直观了解设计系统中的色彩如何适配，以及是否真正服务于其设计目的。收集反馈，如有必要，迭代你的设计和调色板。

色彩设计令牌

设计令牌是一种抽象的设计语言，让设计师和开发者能够更高效、更一致地协作。设计师使用这些预定义的变量（如设计系统中的色彩、字体、间距和其他视觉元素）来定义跨所有数字渠道的设计系统。

色彩设计令牌通过为所有设计相关资产提供集中化的单一事实来源，来简化设计流程。它们可以跨多个平台和应用使用，确保一致的外观和感受，并使对设计系统中色彩的更改和更新更加便捷。

使用色彩设计令牌还有助于促进设计师与开发者之间的协作。设计师可以创建一套色彩设计令牌，然后与开发者共享，开发者可以用它们在所有数字渠道中创建一致且协调的用户界面。

在国内互联网大厂中，Design Token 已成为设计系统的标配。腾讯的 TDesign、阿里的 Ant Design、字节的 Arco Design 都建立了完善的 Token 体系，将色彩、字体、间距、圆角等视觉属性抽象为可跨平台复用的变量，实现设计到开发的无缝对接。

想了解色彩在设计系统中的心理学应用？阅读《UX 设计中的色彩心理学》，深入理解色彩对用户行为的影响。

结语

恭喜你，现在你已经掌握了如何在设计系统中选择、命名和验证色彩！

构建一套专业的色彩体系并非一蹴而就，需要在实际项目中不断验证和迭代。建议从明确主色和语义色开始，逐步完善辅助色和中性色的色阶体系，最终通过 Design Token 实现跨团队的协作效率提升。

记住，色彩体系的终极目标不是追求视觉上的华丽，而是服务于用户体验和业务目标。每一次色彩的调整，都应该基于真实用户反馈和数据验证。

想深入了解色彩搭配的系统方法？阅读《UI 界面色彩搭配全指南》，掌握从色轮原理到实战配色的完整方法论。