01TokenTint
打开参考页面
打开要研究的真实界面，然后在其处于活动状态时启动 TokenTint。
探索工作流面向前端工作流的 TokenTint ●
website color picker：适用于 Chrome 的网站取色器
使用 website color picker 从参考页面采集颜色，无需在截图、开发者工具和单独的笔记文件之间来回切换。
✓ 永久免费 · 无需信用卡
更从容地构建色彩系统
01 / 采集02 / 整理03 / 交付
问题
Tailwind 项目需要一致的命名颜色，但源颜色往往存在于浏览器原型或现有网站中。基础取色器只能复制 HEX，无法帮助你收集、比较并带入配置。
TokenTint 如何解决
TokenTint 让你先采集并整理调色板，之后通过 Pro 导出 Tailwind 配置片段，并与其他项目格式一起使用。
更顺畅的取色工作流
从参考页面到可用调色板。
- 01 / 收集收集。采集定义参考页面的品牌色、背景色、文字色、边框色和强调色。
- 02 / 比较比较。集中查看颜色，移除重复值或不符合当前视觉方向的颜色。
- 03 / 保存到调色板保存到调色板。将参考页面调色板保存到项目中，用于改版、竞品分析或实现工作。
TAILWIND 配置
导出你收集的调色板，而不是虚构的色阶。
先生成适合代码库使用的起点，再根据项目需要完善名称和语义。
TokenTint 导出
theme: {
extend: {
colors: {
brand: '#635BFF',
surface: '#F7F8FB',
ink: '#10131A'
}
}
}免费版与 Pro
免费版
- EyeDropper 取色
- HEX、RGB 和 HSL 格式
- 20 个颜色历史记录
- 单个项目调色板
- CSS Variables 导出
Pro
- Tailwind 配置导出
- 页面颜色提取
- 多个项目调色板
- W3C Design Tokens 导出
- 包含免费版全部功能
为什么选择 TokenTint，而不是基础取色器？ 它保留了颜色来源的上下文，并为 Tailwind 用户提供从浏览器参考到实现的直接桥梁，而不是留下一堆没有名称的 HEX 值。
本地优先颜色和项目保存在 Chrome 本地存储。
有限分析官网只记录定义好的交互事件。
一次购买Pro 无订阅，30 天内可申请退款。
常见问题
如何将网站颜色导出到 Tailwind？
从当前网页采集颜色，在 TokenTint 项目中整理需要的值，然后使用 Pro 导出 Tailwind Config 起点。
可以根据现有网站调色板创建 Tailwind config 吗？
可以。TokenTint 将你采集的颜色导出为适合配置的颜色对象，你可以继续在代码库中完善名称、色阶和语义角色。
TokenTint 会生成 50–950 色阶吗？
不会。导出反映你实际采集的颜色，色阶和语义名称仍由你根据项目需要决定。
Tailwind Config 导出是免费的吗？
Tailwind Config 导出属于 Pro 功能。免费用户仍可取色、整理一个项目调色板并导出 CSS Variables。