跳至主要内容
FreeKitX

色彩令牌生成器(CSS、Tailwind v4、DTCG) - FreeKitX

收藏到浏览器

将此页保存到浏览器书签

手机端在浏览器的分享或菜单中选择“添加书签”。

将审阅后的令牌导出为 CSS、Tailwind v4 @theme 与 DTCG JSON,并附带确定性 sRGB 回退。

颜色令牌生成器

将检查后的颜色系统导出为实现产物。

源颜色

本地交接

恢复本地草稿、交换项目 JSON 文件,或分享仅留在本设备上的限长 URL 片段。

导入颜色

粘贴颜色、CSS 自定义属性或 DTCG 2025.10 JSON。解析不会执行 CSS 或获取资源;确认替换或合并前不会更改项目。

0

直接答案

色彩令牌生成器将审校完成的色彩系统序列化为标准 CSS 自定义属性、Tailwind CSS v4 @theme 代码块以及 DTCG JSON,确保工程实现与设计预览完全一致。

如何使用此工具

1

进入令牌生成阶段

打开色彩令牌生成器,或从检查器阶段直接承接当前的色彩系统文档。

2

选择导出格式

选择 CSS 变量、Tailwind v4 @theme 或 DTCG JSON。每种导出格式均完整映射审校后的色阶与语义别名。

3

复制或下载产物

一键复制到剪贴板或下载产物文件。广色域现代色彩自动包含确定性的 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 中。

返回构建器修改后会丢失导出的令牌吗?

不会。切换阶段会保留色彩系统文档,修改后再次进入令牌阶段会自动依据最新修订版本生成。

权威技术标准与参考文献