设计规范中梯度色板的创建原理与Design Token的结合应用

一、梯度色板的产生背景

有些原色在不同场景需要不同的呈现，所以延伸出了梯度色板，其实梯度色板本质是明度的变化。

二、梯度色板的构成原理

梯度色板就是主色+固定比例的黑/白色，添加白色组成Tint色板，添加黑色组成Shade色板。

具体公式：

Tint色板=Primary+White*n%

Shade色板=Primary+Dark*n%

其中Primary=原色；White=#ffffff；Dark=#000000

三、如何设置梯度数量

Ant design和Material Design都定义了10个梯度，范围比较广。实际使用的时候不一定要做的这么复杂，根据项目情况定义数量即可。

四、如何设置梯度比例

我们在设置梯度比例的时候可以用统一的阶梯，比如10%或者20%。也可以根据原色情况调整，比如用25%、60%、80%这类不规则的大梯度，或者5%、12%、18%这类不规则的小梯度。

五、如何进行梯度色板的命名

梯度到底是命名Color-1到Color-10，还是Color-100到Color-900都无所谓，只要能够表示梯度顺序就可以。

六、如何确定梯度色板匹配的文字颜色

为了保证文字可读性，不同梯度颜色做背景时，需要调整文字颜色。我们可以通过WCAG（Web Content Accessibility Guidelines内容无障碍指南）进行配色的可用性测试。

自检地址：https://contrastchecker.com，只需输入前景色和背景色就能得出WCAG评估结果。

WCAG分为三个级别：A（最低），AA，AAA（最高），测试结果满足AA及以上标准，就说明我们定义的文字颜色是可行的。

更多WCAG相关知识：https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&showtechniques=141%2C143%2C144%2C145#distinguishable

七、梯度色板快速生成工具

Ant design以及Material design都提供了色板快速生成工具，两者有些许差异。AD仅生成输入色值的梯度色板，MD还会生成其它相关的色板，相比来说更加完善。下面附两个网站的色板生成工具：

1、Material Design色板生成工具：

https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors

2、Ant Design色板生成工具：

https://ant.design/docs/spec/colors

八、如何利用Design Token完善梯度色板的应用

如果仅把颜色命名为“Blue-1到Blue-10”，那么设计师在使用过程中仍会困惑。比如按钮默认颜色用Blue-5还是Blue-4？置灰时是用Blue-6还是Blue-7？所以我们需要引入Design Token，对颜色的使用场景进行更准确的定义。

以Figma的Variables功能为例，简单模拟一下梯度色板Design Token的语义化过程。

1、建立基础梯度色板

根据上面提到的方法建立了如下从Brand-1到Brand-5的梯度色板。

2、定义梯度颜色的使用场景

定义颜色的使用场景，然后将场景与梯度关联。比如这里就定义好了默认、点击、悬停、置灰等使用场景，这样不论哪个设计师拿到该份规范，都可以快速准确的绘制出该颜色下按钮的各个状态。

通过以上定义，可以快速绘制一个主色按钮的不同状态：

结语

1、只有这种结合Design Token的梯度色板，才能发挥它最大的意义，提供正确且唯一的方案，助力团队输出。

2、此外，Design Token其实可以延伸出更多的使用场景，本篇只是针对梯度色板做一个非常粗浅的示例，Design Token的强大远不止于此，后期有机会再跟大家分享设计变量的更多应用。