今天我将带你用 HCT 从零搭一套能落地、好维护的颜色系统。过程里不需要你手算任何公式，只需要你会用一个支持 HCT 的配色工具，能看到 Hue、Chroma、Tone 这三个值就够了。你最后应该拿到三样东西：
- 一套主色阶
- 一套中性色阶
- 一套清晰的角色和状态用色规则
一. 确定目标
在动手前，我们先把目标说清楚。一个易于使用的颜色系统，要满足几件基础要求：
- 同一颜色在不同明暗层级上有可预期的节奏。比如主色从浅到深看起来像同一个家族，而不是每一档都像换了风格。
- 常用角色不需要每次重新选色。按钮、背景、卡片、描边、文字、状态，只要填对应的 token 就好，不需要在色板里反复犹豫。
- 深浅主题和后续扩展都有空间。你今天只做浅色，将来要加深色时，不会推倒重来。
而 HCT 在这里的作用，就是给你一条明暗轴和两条方向轴，让你先确定结构，再往里填颜色。
二. 主色阶
首先，我们先从对界面气质影响最大的一条主色阶开始，只要把主色做扎实，后面很多问题都会好解决。
第一步，选一个主色种子
这个主色一般来自品牌色。把品牌主色的十六进制值输入到 HCT 工具里（这里我们用到的工具是M3官方工具，当然你也可以使其他的HCT 工具），然后记下工具给出的 H 和 C，这里我们输入的品牌色值是 #E60024
这一步先观察，不要急着调整。你只需要确认这两个数字大致符合品牌的感觉。方向对不对，看 H；是否太灰，看 C。
如果品牌色本身非常偏灰，C 往往会比较低。此时可以适当提高一点 C，让主色在界面里有足够的存在感，但不要一下调到极端值，宁可多试几次，找到一个兼顾品牌气质和可读性的范围。
这一轮结束后，你可以得出两个结论。
- 这个 H 是主色的基准方向。
- 这个 C 的大致区间，是主色可以接受的强度上限。
第二步 用 Tone 拉出一条阶梯
接下来在同一个 H 和 C 下，只动 Tone。
建议先拉出一条完整的 T 刻度列表，比如
T 接近 98 可以理解为几乎白
T 接近 90 是浅色容器
T 接近 80 是醒目的浅色
T 接近 60 是常用的主色
T 接近 40 是较深的主色
T 接近 30 以下已经接近很暗的色块
在工具里按这个思路试几档。你会看到，在 H 和 C 不变的前提下，主色从很浅到很深像一根完整的柱子。这一根柱子就是主色的 tonal palette。
第三步 给角色分配固定的 Tone
现在你可以为常见角色分配 Tone。
浅色主题下，可以用这样一套约定。
主按钮底色用 T 40 左右
主按钮文字用 T 98 左右
主按钮容器（比如大面积包裹区域）用 T 90 左右
链接或重点文本用 T 40 到 T 50
禁用主按钮底色用 T 80 左右，同时降低不透明度
这套数字不是唯一答案，但只要你定下来，并且和团队达成共识，你就有了一套可重复使用的主色规则。
以后所有主按钮，只需要查表
主按钮 = 主色 H、主色 C、Tone 40
按钮文字 = 主色 H、主色 C、Tone 98
而不再是每个按钮单独挑色。