直接答案
色彩令牌生成器将审校完成的色彩系统序列化为标准 CSS 自定义属性、Tailwind CSS v4 @theme 代码块以及 DTCG JSON,确保工程实现与设计预览完全一致。
如何使用此工具
进入令牌生成阶段
打开色彩令牌生成器,或从检查器阶段直接承接当前的色彩系统文档。
选择导出格式
选择 CSS 变量、Tailwind v4 @theme 或 DTCG JSON。每种导出格式均完整映射审校后的色阶与语义别名。
复制或下载产物
一键复制到剪贴板或下载产物文件。广色域现代色彩自动包含确定性的 sRGB 回退支持。
高保真产物映射与跨端一致性
导出的令牌与预览中审校的色彩系统完全对应:包含 50–950 原始色阶、语义别名与浅深主题模式。广色域颜色提供确定性感知 sRGB 降级属性,防止在老旧终端上因直接裁剪失真。
- CSS、Tailwind @theme 与 DTCG 导出产物严格与当前色彩系统文档版本保持一致。
- 无需外部服务器令牌存储,无需注册或绑定第三方云端账号。
- 在浏览器缺少高级剪贴板权限时,提供稳定的文件下载作为安全降级方案。
实用示例
导出主色阶至 Tailwind @theme
输入: 已审校的主色 50–950 色阶 + 语义角色 primary/on-primary
输出: @theme { --color-primary-500: oklch(...); --color-primary: var(--color-primary-500); }
直接生成可用于前端框架的主题变量,消除手动誊抄带来的疏漏与误差。
限制
- 不会将令牌直接同步至远程设计软件;支持本地一键复制或下载文件。
- 如果特定第三方工具链采用了私有方言,需依据 DTCG 规范在本地构建时映射别名。
常见问题
导出的令牌与检查器中审阅的结果一致吗?
完全一致。所有代码产物均直接根据当前预览的同一色彩系统文档生成,交付环节绝无静默漂移。
导出的令牌会被上传到任何平台吗?
不会。序列化、写入剪贴板以及文件下载均在用户本地浏览器进行,分享链接也仅保存在 URL Hash 中。
返回构建器修改后会丢失导出的令牌吗?
不会。切换阶段会保留色彩系统文档,修改后再次进入令牌阶段会自动依据最新修订版本生成。
权威技术标准与参考文献
- W3C CSS Color Module Level 4 ↗ — Modern color functions serialized into CSS custom properties with sRGB fallbacks.
- W3C Relative Luminance Definition & Formula ↗ — Luminance guidance for documenting accessible token pairs in exported artifacts.