01TokenTint
打开参考页面
打开要转换为可复用颜色令牌的真实界面。
探索工作流面向前端工作流的 TokenTint ●
website color picker：适用于 Chrome 的网站取色器
使用 website color picker 从参考页面采集颜色，无需在截图、开发者工具和单独的笔记文件之间来回切换。
✓ 永久免费 · 无需信用卡
更从容地构建色彩系统
01 / 采集02 / 整理03 / 交付
问题
当颜色从浏览器复制到表格、之后再进行命名时，设计令牌很容易变得繁琐。这段手工流程会造成值不一致，也会拖慢设计与代码之间的反馈。
TokenTint 如何解决
TokenTint 提供一个专注的空间来收集颜色、将颜色归入项目调色板，并导出 CSS Variables 或 W3C Design Tokens。命名、语义决策和后续系统工作仍由你现有的工具和工作流负责。
更顺畅的取色工作流
从参考页面到可用调色板。
- 01 / 收集收集。采集定义参考页面的品牌色、背景色、文字色、边框色和强调色。
- 02 / 比较比较。集中查看颜色，移除重复值或不符合当前视觉方向的颜色。
- 03 / 保存到调色板保存到调色板。将参考页面调色板保存到项目中，用于改版、竞品分析或实现工作。
实际导出
在导出前查看颜色令牌结构。
先生成适合代码库使用的起点，再根据项目需要完善名称和语义。
TokenTint 导出
{
"color": {
"brand": {
"$value": "#635BFF",
"$type": "color"
}
}
}免费版与 Pro
免费版
- 颜色采集与格式转换
- 20 个颜色历史记录
- 单个项目调色板
- CSS Variables 导出
Pro
- 多个项目调色板
- W3C Design Tokens 导出
- 页面颜色提取
- Tailwind 配置导出
- 包含免费版全部功能
为什么选择 TokenTint，而不是基础取色器？ 它把设计系统的起点——界面中的真实颜色——连接到团队可以带入代码的导出格式，而不是一个孤立的转换计算器。
本地优先颜色和项目保存在 Chrome 本地存储。
有限分析官网只记录定义好的交互事件。
一次购买Pro 无订阅，30 天内可申请退款。
常见问题
如何把网站颜色转换成 design tokens？
从当前网站采集颜色，将需要的值整理到 TokenTint 项目调色板，然后导出为 CSS Variables 或 W3C Design Tokens。
TokenTint 支持 W3C Design Tokens 格式吗？
支持。W3C Design Tokens 导出属于 Pro 功能；免费版可以将项目颜色导出为 CSS Variables。
TokenTint 生成哪些设计令牌？
TokenTint 专注于从真实界面采集的颜色令牌，不生成排版、间距、动效或整个设计系统。
这是完整的设计令牌管理平台吗？
不是。TokenTint 专注于颜色采集、分组和导出，命名规范、语义角色和文档仍由现有工作流负责。
可以从实时网站生成令牌吗？
可以。你可以从当前网页拾取颜色，或使用 Pro 页面提取功能创建更广泛的起始调色板，再执行导出。