Question 1

什么是设计系统中的颜色色阶？

Accepted Answer

颜色色阶是从单一色调派生的一组系统化阴影，范围从非常浅（色调）到非常深（阴影）。像 Tailwind CSS 这样的设计系统使用10步色阶（50到950），以便您可以在UI中应用一致的颜色变化。

Question 2

我的颜色色阶应该有多少步？

Accepted Answer

大多数设计系统使用10-11步。Tailwind使用11步（50、100、200...900、950）。Material Design使用12步。对于轻量级自定义系统，7-8步通常可以满足从背景到深色文本的所有需求。

Question 3

我可以将色阶导出为 Tailwind 配置吗？

Accepted Answer

可以。该工具生成可直接粘贴的 Tailwind 颜色配置对象。将其添加到 tailwind.config.js 的 colors 键下，即可在所有 Tailwind 实用程序中使用您的自定义色阶。

Question 4

色调和阴影有什么区别？

Accepted Answer

色调是将基色与白色混合（更浅），阴影是将基色与黑色混合（更深）。完整的颜色色阶通常包括基色的色调（浅色端）和阴影（深色端）。

设计系统颜色色阶生成器

颜色比例设置