01TokenTint
直接在浏览器中拾取
无需离开正在研究或构建的网页即可采集颜色。
面向前端工作流的 TokenTint ●
color picker：面向开发者的 Chrome 取色器扩展
一个实用的 Chrome color picker，用于采集界面颜色，并将颜色带入后续的代码和设计系统工作。
✓ 永久免费 · 无需信用卡
更从容地构建色彩系统
01 / 采集02 / 整理03 / 交付
问题
网页取色时，你可能会反复拾取同一区域、把复制的值丢在笔记里，或手动切换不同格式。基础取色器只能给你一个颜色，却无法帮助你查看周围的颜色并整理使用。
TokenTint 如何解决
TokenTint 让网页取色保持简单：选择颜色，在 HEX、RGB 和 HSL 之间切换，查看最近历史，并将有用的值保存到项目调色板中。
更顺畅的取色工作流
从参考页面到可用调色板。
- 01 / 拾取颜色拾取颜色。使用 Chrome 扩展直接从当前网页采集颜色。
- 02 / 查看历史查看历史。集中查看最近 20 个颜色，并复制需要的格式。
- 03 / 保存到项目保存到项目。将有用的颜色放入可复用的项目调色板中。
为什么选择 TokenTint
从点击取色到交付代码
02TokenTint
保留颜色上下文
查看最近颜色，并保留页面或组件周围的小型调色板。
03TokenTint
复制正确格式
在将颜色放入项目之前，在 HEX、RGB 和 HSL 之间切换。
免费版与 Pro
免费版
- 从网页拾取颜色
- HEX、RGB 和 HSL 值
- 20 色历史记录
- 单个项目调色板
- CSS Variables 导出
Pro
- 免费版全部功能
- 提取页面关键颜色
- 多个项目调色板
- Tailwind 配置导出
- W3C 设计令牌导出
为什么选择 TokenTint，而不是基础取色器？ 基础取色器只能回答光标下是什么颜色；TokenTint 还会保留你构建界面时需要的历史颜色、格式和项目上下文。
本地优先颜色和项目保存在 Chrome 本地存储。
有限分析官网只记录定义好的交互事件。
一次购买Pro 无订阅，30 天内可申请退款。
常见问题
什么是 Chrome color picker 或 eyedropper 扩展？
它是一款可以直接从网页采集颜色并复制颜色值的浏览器扩展。TokenTint 支持 HEX、RGB 和 HSL。
如何在 Chrome 中拾取网页的 HEX 颜色？
在当前网页打开 TokenTint，启动 eyedropper，选择需要的颜色并复制 HEX 值；也可以将同一颜色切换为 RGB 或 HSL。
Chrome 取色器会保存颜色历史吗？
会。免费工作流保留最近 20 个拾取的颜色，方便你在当前任务中查看和复用。
可以将拾取的颜色保存到项目吗？
可以。你可以将历史记录中的颜色加入项目调色板，并将调色板导出为 CSS Variables。
从网页取色需要上传截图吗？
不需要。TokenTint 通过用户主动启动的 Chrome 扩展工作流，从正在浏览的网页取色。