超实用的产品配色指南三部曲：我的配色实践

本章将从实际操作出发，结合实际项目，为您带来配色实践。在此期间，我们将介绍项目的颜色选择逻辑、颜色匹配过程、使用的工具以及如何建立颜色系统。

往期回顾：

项目背景

21 2000年，我公司进行了业务调整，原保险业务独立于当前产品。作为一个新的平台，我们为印尼用户提供了新的产品设计和配色服务。

一、定义主色

1. 选择色相

根据上一章中提到的颜色选择逻辑，我们从产品情绪、行业属性和目标用户的几个纬度进行了思考。作为一个新的保险平台，我们希望产品能给用户一种专业、安全和信任的感觉，所以蓝色和绿色可以作为替代品，蓝色代表专业和权威，绿色代表安全和健康。随后，我们对相关行业进行了研究，发现大多数当地产品也使用了这两种颜色，以确保替代颜色符合行业偏好，属于安全的颜色使用范围。最后，考虑到用户的区域属性，印尼的大多数用户都相信伊斯兰教，并非常喜欢绿色。结合本项目的需求，我们选择了绿色作为我们产品的主要颜色。

2. 确定色调

主色调很清楚，但同一色调会有不同的温度和深度，给用户的心理感受略有不同。具体来说，在这个项目中，温暖的绿色有一种温暖、活泼和快乐的感觉，而冷绿色给用户带来了一种平静和平静的情绪。对于本项目，冷绿色更符合产品定位。

3. 调整饱和度和亮度

饱和度控制颜色的华丽程度，明度控制颜色的明暗变化。这两个参数直接影响颜色的最终效果，因此需要同步交替调整，直到选择最合适的。考虑到主色常用于按钮或重要文本，应注意颜色对比度，以确保界面中文本的可读性。在本项目中，“绿色”本身属于对比度较小的颜色。为了获得适当的对比度，需要调整更大的饱和度和更低的亮度。调整后，我们测试了颜色对比度 3:1，满足 W3C 对颜色对比度提出建议。

二、推导辅助色

1. 匹配色相

根据辅助颜色的定义，我们匹配了不同颜色的辅助颜色，但并不是所有的颜色都是我们需要的，我们需要根据经验进行一定的删除。就像两种绿色的颜色一样，颜色太接近主色，在使用过程中会造成视觉混淆，所以我们删除了这组颜色。另一个例子是黄色的中等差异和对比色，为了更明显地区分橙色，我们删除了对比色中的黄色。经过一系列的删除，剩下的是我们需要的颜色。此时，颜色相也可以进一步调整，如类似颜色的蓝色偏向湖蓝，为了尽可能与主色不同，我们选择颜色相向右偏移。

2. 视觉感官校准

以上颜色仅确定色调，不调整饱和度和亮度，视觉不属于同一水平。为了获得更统一的颜色匹配，需要调整它，这个过程被称为视觉感官校准。如何校准它？有些人通过添加黑色来校准颜色，并比较颜色亮度。但不同的颜色本身有不同的亮度，强制调整会导致一些颜色的不平衡。因此，这种方法可以作为参考，但不太可靠，实际工作也需要依靠自己的经验来调整，以确保视觉和谐统一。以下是校准后的颜色匹配。

三、推导中性色

第二章提到，中性色可以通过调整亮度或透明度来获得。本项目的使用场景相对固定，因此决定调整亮度以获得中性色。考虑到主色为“冷绿色”，与蓝色中性色的搭配可以保证色调的一致性，我们将蓝色相值，调整饱和度以获得最终颜色。需要注意的是，随着中性色明度的降低，饱和度需要逐步增加。最后，确保主要颜色符合无障碍设计指南。我们测试了一、二、三级文本颜色的对比度，以满足无障碍设计的要求。

四、生成梯度色板

梯度色板可以提供更多的颜色匹配，覆盖更多的使用场景，以避免后续新颜色的麻烦。在早期阶段，为了获得梯度色板，设计师需要使用公式计算，现在可以直接使用在线工具生成。例如 Ant design 色板生成工具（ https://ant.design/docs/spec/colors ），Material design 色板生成工具（ https://materialpalettes.com/ ），Eva Design System 色版生成工具（ https://colors.eva.design/ ）。由于不同的平台算法不同，生成的色版效果也不同，这里是第一个 Ant design，与其他平台相比，色相变化更丰富，颜色更均匀，色阶更清晰。

五、建立色彩系统

1. 如何理解色彩系统？

色彩系统是设计系统的一部分，是一个科学管理色彩的系统。与色彩规范不同，它主要针对设计方面，但需要开发关注产品代码。

2. 色彩系统包含什么？

简单来说，色彩系统是由来的 design token、构成彩色库和说明文档。design token 是设计与开发协议一致的颜色名称，是调用颜色的唯一凭证。颜色库包含 design token 我们可以在设计和开发中调用颜色参数的样式集合。说明文档类似于设计规范，定义了颜色的使用方法，为我们的使用提供了指导。

3. 如何建立色彩系统

①token 命名

如何命名需要考虑 token 层级和 token 构成。

关于 token 等级，设计师 Lukas Oppermann 在文章《Naming design tokens》(https://medium.com/user-experience-design-1/naming-design-tokens-一般设计系统将在9454818ed7cb中提到 token 核心分为三个层次 token（core token）、语义 token（semantic tokens）和组件 token（component tokens）。核心 token 存储原始值作语义是构建设计系统的基础 token 引用核心 token，描述了它的名字 token 预期用途。组件 token 引用语义 token，并将 token 绑定到相应的组件上。更多的层次可以使 token 命名更清晰，但层层嵌套的逻辑也增加了管理的难度，Lukas Oppermann 一层或两层也可用于文中提到的内容。

关于 token 构图，体验设计师 Nathan Curtis 在《Naming Tokens in Design Systems》(https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-文章指出，为了更充分地描述9e86c74466) token，token 名称空间可以使用（namespace）、目标对象（object）、基础样式（ base）、修饰符（Modifier）构成。名称空间对应系统和主题名称，目标对象对应组件、组件元素和复合组件。基本风格是 token 主要部分包括风格、属性、语义、修饰符表示状态、规模、模式等。由于空间原因，这里只是一个简单的介绍，感兴趣的学生可以点击原文查看。

根据两位作者的观点，作者对色彩系统进行了调整 design token 命名如下：

②建立样式库

样式库是设计和开发调用的基础，需要在设计工具中实现 token 层次逻辑，方便学生查看。作者使用的主要工具是 figma，Figma 为我们提供了丰富的功能和插件设置样式库，以下将介绍一些主流方法和优缺点，您可以根据项目的实际情况选择使用。

local style：figma 支持将颜色定义为全球风格，并命名风格。调用风格后，开发可以在查看面板时看到相应的对应 token，样式库的作用已经基本实现。但是 local style 不支持 token 层次嵌套只能实现单层次 token。如果您的项目刚刚使用单层次 token，所以建议您使用此功能。

local variables：在今年 6 月份的 config 大会中，figma 虽然发布了变量功能，但是 CEO Dylan Field 先生说不会推出 design tokens，然而，变量功能已经完美实现 token 功能。它支持将颜色定义为变量，并且可以实现层次嵌套。开发还可以方便地查看面板中的变量名称，这是一个解决方案 figma 在 design token 缺陷。

Figma token：一款定义 design token 并支持插件 token 层次嵌套。开发查看 token 现在有两种方法可以命名：1.可以 Figma token 的 inspect 查看面板，但插件需要在编辑模式下使用，这意味着您需要开发编辑权限，这无疑会增加团队成本。2.插件支持 token 转化为 figma 风格和变量，并保持当前 token 此时可以开发名称 figma 的 inspect 面板查看 token，建议使用这种方法，既经济又实惠。

③输出说明文档和团队推进

一般文档内容包括使用规则、注意事项、场景描述、token 名称、颜色值参数等也可以根据实际情况增加或减少。输出说明文档后，完成整个颜色系统的构建，然后需要促进团队的使用。为了确保整个系统在项目中的顺利实施，最好组织相关人员进行宣传，明确介绍使用规范和注意事项，并明确要求严格按照系统执行。