什么是色阶？

色阶是同一色相下按顺序排列的一组明暗层级，通常编号从 50 到 900。它要做到每一档在视觉上间隔均匀，并让特定搭配满足已知的对比度要求，从而让团队按角色和档位选色，而不是随手挑一个十六进制值。

编号约定

大多数体系给色阶从 50（最浅）编到 900 或 950（最深），以 100 为步长。这个约定来自 Material Design，被 Tailwind 巩固下来，如今已经普遍到值得遵循。

--blue-50:  #EFF6FF
--blue-100: #DBEAFE
...
--blue-500: #3B82F6
...
--blue-900: #1E3A8A

共享约定的价值在于，"边框用 blue-600"这句话对设计师、对开发、对 AI 助手意思是一样的。

什么样的色阶算好

知觉上均匀。 每一档看上去应当间隔相等。在 sRGB 空间里插值做不到这一点——它做出来的色阶会在中间挤作一团，在某些色相上发浑。在 OKLCH 这类知觉均匀的空间里工作，结果明显更好。

对比度可预期。 在一套构建良好的色阶里，某些搭配是可靠的：600 及以上压在 50 上，正文能守住 AA；500 可以用于大字。这些关系一旦成立，日常搭配就不必再手动核对对比度。

色相一致。 简单粗暴地调明度会让两端的色相偏移。蓝色变深时会往紫走，黄色会往绿走。要让感知到的色相在整条色阶上保持稳定，需要有意识地校正。

要多少档

十档（50 到 900）是常见的默认值，对大多数产品够用。也有体系用十一档，为需要比 900 更深一档的深色主题补一个 950。

少于大约七档，就容易留下"某人需要的那个深浅并不存在"的空档，而这恰恰是漂移的起点。

一套体系需要哪些色阶

  • 一条给品牌色的主色色阶
  • 一条中性色或灰阶，它的用量比其余所有加起来还多
  • 用于成功、警告、错误和信息的语义色阶
  • 视需要再来一条辅助色或强调色色阶

最值得下功夫的是中性色阶，因为界面的大部分实际上活在那里。给灰色加一点点色相，偏暖或偏冷，往往就是一个经过思考的界面和一个默认界面之间的分界。

这与 Flash DSM 的关系

生成的体系包含主色、辅助色、中性色和语义色的完整色阶，在知觉均匀的空间里生成，带浅色与深色变体，并逐一搭配核对了对比度。