文化色彩不能像普通色阶一样处理。一个中性的 blue scale 可以被改名、替换和抽象,文化损失很小;但朱红、月白、天水碧这类色名本身携带语言、材料记忆和场景语境。目标不是把好看的 HEX 填进组件,而是在保留文化含义的同时,建立可维护的 token 系统。
文化色彩会打破天真的 token 系统
许多设计系统默认颜色名称可以随意替换。团队可以把某个颜色叫 blue-500,再映射成 primary,以后换成另一个色相。这在名称只是色阶位置时成立,但当色名本身就是意义的一部分时就会失效。
中国传统色是很好的例子。朱红、月白、青黛、天水碧不只是 red、white、indigo 或 cyan 的标签,它们指向颜料、织物、月光、墨色、建筑、诗词或朝代审美。如果所有颜色都被压平成 primary-100,文化语境会消失;如果每个组件都直接使用 zhu-hong,后期换主题又会很困难。
使用三层结构:primitives、roles、modes
文化色彩系统需要三层。primitive 层保留文化来源,例如 color/chinese/zhu-hong、color/chinese/yue-bai、color/chinese/tian-shui-bi。这些名称应该稳定,并在文档中保留中文名、拼音、HEX 和来源状态。
semantic 层给颜色分配工作,例如 color/brand/primary、color/surface/warm、color/text/default、color/accent/festival、color/border/subtle。组件应使用这一层,而不是直接绑定文化色名。mode 层再把少量角色组合成国潮、宋式、敦煌等场景配色。这样既保留文化语言,也不会让每个 UI 元素绑定到单一历史色块。
把文化名和语义名分开
命名张力是最难的部分。文化名有价值,是因为它有意义;语义名有价值,是因为它灵活。把其中一种当成另一种使用,会造成维护问题。
按钮通常应该使用 color/brand/primary,而不是 color/chinese/zhu-hong。文档里仍然可以说明 brand primary 当前映射到朱红这一类朱砂红。当品牌从节庆国潮配色转向更安静的宋式配色时,组件角色可以保持不变,只需要替换映射的 primitive。
记录来源,而不是声称绝对权威
文化可信度来自来源说明。不要声称每个传统色都是 official、处处历史准确,或适合所有使用场景。有些色名有古籍出处,有些是现代归属名,有些存在争议,有些色值来自测量研究。
设计系统应让这些差异可见。为来源状态、引用和使用意图添加说明。应把中国传统色视为 source-aware 的设计材料,而不是普遍文化证明。这样能减少误用,也更适合公开项目、教育项目或文博相关设计。
建立小型场景 modes,而不是一个巨大色库
完整文化色库可以包含数百个名称,但一个可用的 Figma mode 通常只需要五到十二个角色色。国潮 mode 可以组合朱红、金、墨、月白和青色强调;宋式 mode 可以使用天水碧、月白、缃色、低饱和绿和墨灰;敦煌 mode 可以组合石青、赭色、朱砂、沙色和墨色。
场景 modes 让设计师按意图选择,而不是在整套数据库里浏览。它也让开发交付更清楚,因为每个 mode 都有受控的角色集合,可以映射到 CSS variables、Tailwind theme entries 或 DTCG tokens。
把 Figma 决策连接到代码 tokens
Figma Variables 是很好的设计表面,但不应是唯一来源。同一套 primitive 和 semantic 命名应该延续到 CSS 自定义属性、Tailwind theme partial 和 W3C DTCG 风格 JSON。否则设计师和开发者会重复抄 HEX,并发明两套平行名称。
用 Figma 呈现映射关系,再为代码导出或记录同样结构。Chinese Color Atlas 的免费样例展示了一个小版本:Figma Variables 用于设计测试,CSS variables 用于网页,Tailwind colors 用于 UI 实现,token JSON 用于交付实验。
相关调色板
FAQ
文化色名应该直接用于组件吗?
通常不建议。文化名应保留在 primitive tokens 中,再映射到 primary、surface、text、border、accent 等语义角色,组件使用语义层。
为什么不能全部叫 primary 或 blue-500?
通用命名灵活,但会抹去文化语境。文化 primitives 保留来源名称,语义 aliases 保持界面可维护。
一个文化配色 mode 应该包含多少颜色?
实用 mode 通常包含五到十二个角色色。大型色库适合研究,但小型场景 mode 更容易在 Figma 和代码中落地。