颜色转换技巧：从设计 Token 到生产 CSS

保持一个可信来源

颜色转换不只是换一种语法。设计系统中应该有一个稳定的源格式，再从它派生 HEX、RGB、HSL 或 CSS variables。

这样可以减少 Figma token、Tailwind 配置和生产 CSS 之间的漂移。

先检查对比度

转换后的颜色必须在真实背景上检查。一个格式合法的颜色，可能在正文、hover 状态或透明背景上不够可读。

浅色和深色主题都要早检查，否则后期视觉 QA 的成本会很高。

使用语义 Token

优先保存 color-surface、color-danger 这类语义名称，而不是只依赖数值。以后格式或品牌色变化时，语义更容易维护。

结论

带着意图转换颜色，而不是只追求格式一致。发布前检查对比度、交互状态和 token 命名。