在 Figma 中构建色彩系统的最佳实践

Figma 变量的能力发布之后，我决定使用变量重新构建 Bodcasts 的色彩系统。经过一番研究和测试，最终我得到了一套科学有效的色彩系统。在后来的一系列项目中我也使用这一套工作流，它不仅能够帮助我快速构建一套色彩系统，并且保证了一致性。本文将分享我在构建这套色彩系统时的一些最佳实践，希望能够给你带来一些启发。

我采用了一种最常见的构建色彩系统的方式，先定义一套原子色板，再基于此定义一套语义化的颜色体系，并且在语义颜色层面定义多套主题（常见的就是亮色和暗色），在设计时直接使用语义颜色。在色彩空间选择上，我选择了 Oklch 色彩空间，因为它比较成熟，相关的工具比较多，而且 CSS 中也可以直接使用，基本上各大浏览器都支持了。

Atomic and Semantic Color Palette

接下来我将演示我是如何构建这套色彩系统的。

创建原子色板

首先，我们需要先创建一套原子色板。原子色板一般包含中性色、主色（品牌色），以及表达信息、正向、警告和负向的四种强调色。每一个色系，都应该包含多种级别的亮度，用在不同的场景。最常见的会按照 50、100、200…900 来编号分为 10 级，在本项目中我使用 13 级，保证够用。

原子色板每一列的感知亮度要接近，这样才能保证它们有着接近的对比度，保证用户感知一致。举个例子，假如我们选第 6 级作为不同的按钮背景色（主按钮、危险操作按钮等），那么每种按钮上的文字和背景的对比度都接近，对用户来说感知就比较统一了，不会出现一个按钮上的文字看的清另一个看不清的状况。

Atomic Color Palette

使用 huetone 创建原子色板

我们可以使用 https://huetone.ardov.me 来创建原子色板，它使用 Oklch 色彩空间，可以帮我们快速创建一套色板。Huetone 中内置了很多原子色板，我们可以直接基于某个色板进行改造。

创建了你自己的色板之后，随便选中一个颜色，在顶部修改为自己需要的色相（H），然后点击更多（三个点）按钮，选择 Apply current hue to row，就可以批量将这一行的颜色修改为相同色相。

Apply Current Hue to Row

接下来，我们在右侧批量调整色度（Chrome）和亮度（Luminance）。先调整色度，色度尽量贴合白色区域的边界，呈中间高两边低的样子；然后我们调整亮度，亮度的走势接近一个反过来的 easeInOutQuad 曲线，也就是两边变化平缓，中间变化陡峭。这是因为两侧的颜色一般用于背景或文字颜色，不需要那么饱和，而中间的颜色一般用于强调色，需要更饱和一些。

使用同样的方法，我们再创建其他几个颜色。我们可以选中调整好的每一个绿色，然后点击顶部下拉菜单的 Apply current luminance to column 将其亮度适用于这一列，然后再调整新颜色的色度。你还可以根据下面展示的对比度，来实时调整颜色。

Adjust Chroma and Luminance

在调整颜色的时候，可以随时按 B 来查看所有颜色色度为 0 时的样子，方便对比感知亮度。

View Colors with Chroma 0

导入 Figma

当我们调整好所有颜色，就可以点击右侧 Exports 下面的 Copy tokens 按钮，将调整好的色板数据复制到剪切板。

Export Tokens

回到 Figma，我们使用 Heron variable tools 插件的 Import 功能把刚才复制的 JSON 数据导入为变量。

Heron Variable Tools (30% OFF)

Extremely powerful variable tool in Figma

Import Tokens

导入 Figma 之后，我们可以找几个典型界面使用 OKColor 插件微调颜色，直到这些颜色在界面上表现达到我们满意的程度，再将其更新到变量表。

OKColor

Oklch color picker plugin for Figma

OKColor Plugin

创建语义化颜色

接下来，我们将基于原子色板创建语义化颜色，也就是我们最终用在设计稿中的颜色。一个语义颜色可能由以下几部分组成：

分类（Category）：比如背景、描边、文字、图标等；
角色（Role）：比如品牌（主色）、正向、负向、信息等；
层级（Hierarchy）：表明颜色的强弱，比如首级（Primary）、次级（Secondary）、强（Strong）、弱（Weak）等；
状态（State）：比如按压（Press）、悬浮（Hover）等。

Semantic Color Naming

当然了，这只是一个语义化颜色命名的思路，我们并不需要完全遵循。比如，在实际使用中，我们可能会省略掉一些部分，比如上面这个颜色可能会被叫做 surface/brand。

强调色

强调色是指那些在界面中突出显示重要元素，用于吸引用户注意的颜色，比如主色（品牌色）、用于表示信息、正向、警告和负向的颜色，都属于强调色。

强调色在设计中会扮演多种角色，既可以作为背景色又可以作为文字颜色、描边颜色。如果不想做得太复杂，我们可以直接将其统一为一个颜色，避免色板中颜色太多不方便选取。

Emphasis Color

强调色一般会选取色度比较高的颜色（饱和度比较高比较鲜艳的颜色），但同时也要考虑对比度。从下图中可以看出，主色第 4 个色度最高，蓝色第 7 个最高，其他三个颜色在第 6 个最高。但是，第 6 列和白色的对比度太低，综合来看我们选取第 7 列作为强调色。主色比较特殊，主色第 7 个过于黯淡，所以还是选取第 4 个。

Select Emphasis Color

强调色之上的颜色

用在强调色之上的颜色，我们可以用 on *** 来命名。比如按钮之上的文字颜色，我们可以将其命名为 text/on emphasis ，它在亮色或者暗色模式下都是一样的白色。对于主色来说，因为我们选取的主色 teal/4 亮度达到了 88，白色文字放在上面就会看不清。所以我们为这种情况新创建一个变量叫做 text/on brand ，专门用在主色之上。

On Emphasis Colors

主色的问题

虽然我们解决了主色作为背景色上面的文字看不清的问题，但是我们没有解决它作为文字或描边颜色看不清的问题。为了解决这个问题，我们再创建一个变量 brand-2 ，使用低一点的亮度，把之前的主色改名为 brand-1。如下图所示，左边统一使用一个主色，文字“Resend”就会看不太清；右边使用亮度更低（颜色更暗）的 brand-2 作为文字和描边颜色，文字就看得清了。

在其他需要使用主色的场景，也可以根据需要来选取 brand-1 或 brand-2。

中性色

中性色一般作为背景或文字颜色，在本项目中背景色分为 surface 和 fill 两类，前者用于大面积的区域背景色，比如整个界面背景，卡片背景等；后者用于一些小面积的元素，比如按钮，开关等。surface 和 fill 没有重叠，因为有可能 fill 会出现在 surface 之上，有重叠的话就有可能被淹没。

Neutral Colors

变量的设置

使用范围

为了更方便地使用变量，我们可以给变量设置使用范围（Scope），这样在选取时就不会出现不需要的变量。使用 Heron variable tools 插件可以很方便地选取多个变量，一键给它们设置使用范围。

Variables' Scope

变量的代码格式

为了方便交付，我们还可以给变量设置代码格式（code syntax）。使用 Heron variable tools 插件选取多个变量，我们可以一键给它们设置代码格式。这样，当开发同事使用 dev mode 查看设计稿时就能一键复制到代码中使用。

Set Code Syntax

最后

最后，我们可以使用 Heron variable tools 插件生成一个颜色指南，方便我们查看和展示这一套色彩系统。

Generate Color Guide

以上就是在 Figma 中构建色彩系统的最佳实践，希望能够给你带来一些启发。