如何构建出UI设计系统中的调色板？命名和基本规则

我们在在创建UI设计系统时，颜色是最重要的（仅次于版式），下面我们一起看看如何构建出UI设计系统中的调色板？以及命名和基本规则。

颜色的命名规则
选择正确的命名约定是您应该做的第一件事。应在定义颜色和色调前完成。设计系统中的颜色名称应反映其用途。这就是为什么你的颜色必须命名为：主要、次要或再次要，而不是以红色、紫色、蓝色来命名，这将为您提供更大的灵活性，即使您的项目经历了品牌重塑，颜色名称在 UI 库中也将保持不变。

主要颜色：通常是主要品牌颜色
次要颜色：可以是可选的
再次要颜色：可以是可选的
成功：实现目标和其他成功的运营
警告：当你必须警告用户时使用它
错误： 顾名思义，显示错误的元素应使用此颜色
中性：适用于各种灰色元素
白色和黑色——白色和黑色永远是永远不会改变的纯粹颜色。

当你已经有了你的基色了，但为了确保良好的灵活性和可访问性，您的颜色必须包含不止一种色调。您必须创建色彩和色调。 对于这些变体，我建议遵循以下命名约定：
对于基本（默认）颜色，请使用名称“500”，对于较浅的色调，请使用“400”、“300”、“200”和“100”。
对于色调，请使用更大的数字，例如“600”、“700”等。
您最终将得到以下约定： [颜色名称] / [色调]

示例：
主要颜色/500
成功/100
警告/300
中性/600
中性/700
...

设计系统需要多少种色调？
事实上，没有直接的答案。登陆页面的一些小型项目可能只需要 1 个色调。有些可能只需要 3 个。然而，为了获得良好的设计解决方案的舒适度，我们建议您至少有 5 种颜色，一种作为基础色，两种作为浅色调，两种作为阴影。
然而，如果您想要一个非常灵活的设计系统，请努力为每种颜色提供 8 或 9 种色调。

如何为颜色设置正确的色调？
将设计工具颜色选择器切换为 HSB，采用基础色调（如：“Primary/500”）。如果我想让颜色变浅，会增加 B 值并减少 S（代表饱和度），具体关于HSB的切换细节可以参考：UI界面中创建配色体系的方法。

来聊聊中性色吧
中性配色——当谈到黑白时，我喜欢将它们保留为纯色调。然而，灰色有点不同……如果你想创造灰色调，我建议你尝试在灰色中添加一些颜色，一点点蓝色可能会产生出色的效果。尽量避免纯灰色！它们在自然界中很少出现，使用冷灰色将获得更佳的视觉效果。

最后在构建设计系统时，第一步就是确定您的配色体系，建设好产品所需的调色板，对于后续的系统搭建和迭代起到有据可循且非常基础性的作用。