戳蓝字“彩云译设计”关注我哦！
配图by Deniz Can Demir
简单是最高级的复杂
配色系统是设计系统的核心元素，创建配色系统的方法有很多种。例如，根据谷歌 Material Design 3 指南，一个设计系统必须具有主色、次要色、三级色和表面色（各种背景色）调色板，这将迫使你使用超过 40 种颜色。这么多的颜色会导致混乱，在设计过程中的会有干扰，大多数颜色甚至不会被使用。
设计系统是公司的核心产品，其用户是设计、开发和创意团队。因此，设计系统必须为所有人理解，为团队使用，为测试提供错误检查，并为公司盈利。我一直在努力实现这些目标，并因此改进了一种提供这些功能的配色系统。
这种配色系统：
- 提供更少、更有限的（总共 19 种）颜色选项，减少设计团队的决策过程。
- 同时涵盖浅色和深色模式，避免出现额外的深色主题调色板和变量。
通过更改 HSB 值轻松修改和适应新项目。
要创建一个具备上述特性的配色系统，需要对色彩和 Figma 的实现有一定的专业知识。我这里提供一份figma配色文件作为参考：https://www.figma.com/community/file/12983312263575656441.什么是HSB 色彩空间?
从本质上讲，RGB 色彩空间中有 16,777,216 种颜色，每种颜色都有唯一的十六进制代码，对于我们设计师来说不太容易理解。如果想要在不使用配色生成器的情况下生成独立的配色系统，那么最易于理解和编辑的表示方法就是 HSB 色彩空间。它依赖于 360° 的色轮：![]()
色相（Hue)+ 饱和度(Saturation)+亮度(Brightness)=HSB
HSB 色彩空间有三个影响十六进制代码的值：色相（Hue）、饱和度（Saturation）和亮度（Brightness）色相: 色相 (Hue) 定义了颜色的类别，取值范围为 0° 到 360°，每 60° 为一个主色。H:0/360 代表红色，H:60 代表黄色，H:120 代表绿色，H:180 代表青色，H:240 代表蓝色，H:300 代表洋红色。
饱和度: 饱和度 (Saturation) 影响颜色的鲜艳程度，取值范围为 0 到 100，数值越高，颜色越鲜艳。S：0-33，极淡，接近白色；S：33-66，淡雅，介于浅色和鲜艳之间；S：66-100，饱和，鲜艳。
亮度: 亮度 (Brightness) 影响颜色的明暗程度，取值范围为 0 到 100，数值越高，颜色越亮。B：0-33，极暗，接近黑色；B：33-66，中度亮度，介于暗色和亮色之间；B：66-100，高亮，明亮。
要生成十六进制颜色代码，必须为这三个输入值（色相、饱和度、亮度）都指定一个数值。例如，只要 H（色相）值保持为 228，无论 S（饱和度）和 B（亮度）如何变化，都只会呈现不同色调的蓝色。![]()
融合 H（色相）、S（饱和度）和 B（亮度）三个层面，可以生成色相值为 228 的各种色调。
2. 创建基于 HSB的色板
用这种方法创建的配色系统将在浅色和深色模式下都完全可访问。为了实现这一点，主色必须是可访问的，并且必须预先定义所需的颜色数量。1）定义一个可访问的主色
主色与背景必须形成至少 4.5:1 的对比度才能构建可访问的配色系统。因此，在定义主色之前，我们需要了解“可访问的”配色系统究竟需要满足哪些要求。人眼有三种类型的视锥细胞，S-M-L，用于感知不同的光波长度。M和L锥细胞同时对相同波长的绿色和黄色产生反应，导致人眼感知到20°-200°色调值之间的颜色更亮，并且这个区域与明亮颜色的对比度较低。（Ps：从人的身体条件出发，是一个相对客观的因素，比较有说服力。）基于上述信息，只要配色系统满足以下 HSB 值要求，就有可能在浅色模式下达到最大程度的可访问性：- 色相值在200°-20°之间(不是20°-200°)
明度介于 50–100之间
深色模式专属的配色系统可以使用与浅色模式相反的 H 值。H 值是影响可访问性的核心参数。饱和度和亮度成反比，高亮度会增加对比度，而低饱和度会降低对比度。你可以预先设置一个可访问的主色来作为基础。从理论和实践角度考量，这里的主色被定为 H:228比较合适。![]()
某些颜色的波长范围，特别是那些偏蓝和绿的区域 (约 400-480 纳米和 580-700 纳米)，与亮色及其在色轮上的位置对比度足够，近似于色相 (H) 值 200° 到 20° 的颜色。2）定义锚点
在设计个人项目时，你可以考虑使用 19 种颜色的配色系统，包括一个主色、8 种浅色调和 8 种深色调。了解锚点颜色后，就可以轻松计算其余颜色的色调。设计系统中的基础颜色，白色 [#FFFFFF] 和黑色 [#000000]，它们是配色方案中不可定制的锚点，在进行色彩分级时不计入其中。可定制的锚点位于配色方案的第 2 步、第 9 步（主色）和第 18 步。首先从主色开始，将其值设置为 H:228、S:76 和 B:92，以确保可访问性。为了在主色与其浅色调、纯黑色和纯白色之间留有足够的色彩间隙，建议将浅色调的值设置得更接近纯白色，深色调的值设置得更接近纯黑色。（注：末尾这2个颜色，可以根据自己的项目具体情况来设计具体色值）![]()
3）插值
在这个步骤中，我们将计算一些中间颜色，它们介于最浅的淡色调和主色之间，以及主色和最暗的深色调之间。这些中间颜色的饱和度 (S) 和亮度 (B) 会根据一定的规律进行微调。从主色开始的步骤中，S 和 B 值必须根据外部颜色的值进行增加或减少。浅色调、主色和深色调之间 S 和 B 值的差异会被平均分配到色彩梯度中。([较大值]-[较小值])/[梯度数]=[每一步的值]1-插值饱和度
在这个配色方案中，主色具有 76% 的饱和度，浅色调的饱和度降低到 4%，而深色调的饱和度则增加到 60%。规定从主色到浅色调和深色调的过渡是通过 8 个梯度实现的。2-插值亮度
在这个配色方案中，浅色调的亮度最高，为 100%，主色则略暗一些，为 92%，而深色调的亮度最低，仅为 12%。规定从主色到浅色调和深色调的过渡是通过 8 个梯度实现的。在配色系统中，初始颜色值的分配可以根据需要灵活调整。你可以根据颜色渐变的平滑程度或突出某些特定的颜色，来决定分配数值的方式。例如，你可以将数值分配得更均匀，以获得平滑的渐变效果；也可以将数值分配得更不均匀，以突出某些特定的颜色。此外，你还可以添加锚点来控制渐变的过渡方式，使渐变在特定位置产生明显变化。（Ps：具体颜色可根据项目动态调整，颜色并不是死的）![]()
4）透明度变化
透明颜色是设计系统中不可或缺的元素，用于为文本和组件状态提供层级结构。为了获得透明颜色，请复制第一个和最后一个色阶颜色，并将不透明度值降低到 64% 和 32%。可以根据需求添加 16%、8% 和 4% 不透明度的额外透明版本，并可以自定义这些值。![]()
5）根据主题搭配颜色和阴影
配对颜色可以使主题和组件状态的颜色搭配更加协调，并方便在明暗模式之间切换。因此，配色系统通常采用奇数个颜色，每边都有自己的配对。这样，就可以同时为明亮主题提供深色调，为暗色主题提供浅色调。![]()
6） 交叉检查可访问性
在为 Figma 变量和主题分配颜色时，应注意选择对比度高的颜色组合，以确保视力障碍人士也能清晰辨别。由于主色对比度高达 5.39:1，因此整个调色板都符合无障碍标准。在创建暗色主题组件时，可以使用覆盖明暗模式的 AA/AAA 级无障碍配色方案。在检查所有颜色组合时，如果发现任何无障碍性问题，可以尝试调整锚点和 S 和 B 值来解决。![]()
3. 将调色板分配给 Figma 变量
调色板已正确生成，可以分配给 Figma 变量了。请按照以下步骤操作：Figma的变量很好用，在这里可以创建，如果还没用过的可以试试看1）基本颜色：实色
创建一个集合，命名为“基础（Primitives）”。点击“创建变量 > 颜色”，并命名为“color/solid/0”。以同样的方式添加调色板中的所有颜色，将它们命名为 50 的倍数。![]()
2）基本颜色：透明度
再次点击“创建变量 > 颜色”，命名为“color/transparent/0 · 64%”，并以同样的方式添加其他颜色。![]()
3）颜色Tokens
为了将基本颜色用作有限变量，必须将它们分配给 Tokens。请按照创建颜色变量的方式进行操作：点击“颜色选择器(color picker ) > 库(libraries)”，并在列表中选择所需的变量。点击右侧的“+”按钮，添加新模式，并将它们命名为“Light Mode（明亮模式）”和“Dark Mode（暗色模式）”。![]()
4） 描边Tokens
5） 文本Tokens
6）按钮Tokens
一个设计系统通常有三个版本的按钮:主要，色调-次要和轮廓-次要。颜色搭配和对比度方案被利用，同时适应黑暗模式的重要组件，如按钮。7） 颜色显示筛选
Figma 最近发布了一项名为“颜色范围控制”（Color scoping）的功能，它允许你根据未选择的属性来隐藏部分变量，从而避免显示所有变量。我们建立的变量系统完全依赖于以下结构：容器（containers）、文本（texts）和描边（strokes）。这些设置可以根据你的项目需求进行调整。例如，在按钮 Tokens 中，我必须为“outlined”按钮选择“stroke”而不是“frame”。如果按照以下步骤进行设置，可以使库面板中显示的变量数量最少化，并避免在设计过程中出现冲突。
4. 实现和产出
接下来将演示如何在设计中使用这些变量。已在给的设计参考文件中展示了生成的调色板的实现和输出，大家可以去figma文件里直接看，1）浅色模式
调色板的色调已正确定义到变量中，并产生了预期的结果：![]()
在设计效果图中，使用调色板的浅色调创建了明亮主题的色彩风格。2）深色模式
与色调类似，调色板的深色调也被正确定义到变量中，并产生了预期的结果：![]()
在设计中，使用调色板的深色调创建了暗色主题的色彩风格。3）主题化
这个颜色系统可以很容易地修改和适应任何其他项目。唯一需要做的就是定义一个可访问的基础色，对其进行插值，并更改原始值。![]()
适用于H:340, S:84, B:88的初稿设计迭代是永无止境的
我们现在拥有了一个经过精心组织、完全无障碍的品牌调色板，它支持亮暗模式并涵盖了整个设计系统。在实施过程中，根据设计系统结构的不同，可能会出现一些不一致之处，你需要根据需求修改和调整颜色值、变量和颜色范围设置。5.总结
通过实践，你可以学会如何使用颜色插值、HSB 颜色空间、无障碍颜色设计以及 Figma 变量。设计系统的需求可能会让你深入学习这些领域的某个知识点，从而提升能力。设计师之所以出色，是因为他们不断探索和学习，在探索过程中锻炼了自己的专业技能。所以，根据今天学到的新知识，重新刷新自己产品的色彩系统，然后也用上文章说的figma的变量功能来做吧。实践后，你才能真正掌握。全文完，既然看到这里了，如果觉得有学到，随手点个赞和“在看”吧。
原文：https://uxdesign.cc/simplified-figma-color-variables-based-on-hsb-interpolation-c3e404585176
作者：Deniz Can Demir
译者：彩云Sky
本文翻译已获得作者的正式授权（授权截图如下）
今日分享的星球里的一件小事：又帮星友省下一笔巨款！
关于是否报班，我其实很早就专门写过一篇文章《【原创】设计师的困惑，我到底适合自学还是报班？》，然后最近又在群里看到报班的讨论，在我和星友们的劝告下，省下一笔钱，还找到了更好的学习方法。如果你也有类似的纠结，欢迎扫码阅读，说不定也能给你省钱。
加入彩云的知识星球
（请续费会员也点击“阅读原文”完成续费）