面向前端工作流的 TokenTint ●
website color picker：适用于 Chrome 的网站取色器
使用 website color picker 从参考页面采集颜色，无需在截图、开发者工具和单独的笔记文件之间来回切换。
✓ 永久免费 · 无需信用卡
更从容地构建色彩系统
01 / 采集02 / 整理03 / 交付
问题
当页面是你的视觉参考时，浏览器取色器只是第一步。手动重建参考页面的调色板既慢，又容易丢失上下文或遗漏辅助颜色。
TokenTint 如何解决
TokenTint 可以直接从当前页面采集颜色，在一个历史记录中查看，并通过 Pro 页面提取功能快速获得更完整的基础调色板。结果可以导出到 CSS 或令牌文件，而不是留在笔记本里。
更顺畅的取色工作流
从参考页面到可用调色板。
- 01 / 收集收集。采集定义参考页面的品牌色、背景色、文字色、边框色和强调色。
- 02 / 比较比较。集中查看颜色，移除重复值或不符合当前视觉方向的颜色。
- 03 / 保存到调色板保存到调色板。将参考页面调色板保存到项目中，用于改版、竞品分析或实现工作。
CSS 自定义属性
导出样式表可以直接使用的调色板。
先生成适合代码库使用的起点，再根据项目需要完善名称和语义。
TokenTint 导出
:root {
--color-brand: #635BFF;
--color-surface: #F7F8FB;
--color-text: #10131A;
}免费版与 Pro
免费版
- 从当前页面拾取颜色
- 复制 HEX、RGB 和 HSL
- 20 个颜色历史记录
- 单个项目调色板
- CSS Variables 导出
Pro
- 从当前页面提取主要颜色
- 多个项目调色板
- Tailwind 配置导出
- W3C 设计令牌导出
- 包含免费版全部功能
为什么选择 TokenTint，而不是基础取色器？ 基础取色器回答“这个像素是什么颜色”，而 TokenTint 进一步帮助你回答“如何在项目中使用这个参考页面的色彩语言”。
本地优先颜色和项目保存在 Chrome 本地存储。
有限分析官网只记录定义好的交互事件。
一次购买Pro 无订阅，30 天内可申请退款。
常见问题
可以从实时页面取色吗？
可以。TokenTint 专为通过 Chrome 扩展主动采集当前页面颜色而设计。
TokenTint 可以提取整个网站的调色板吗？
Pro 支持从当前页面提取更多主要颜色，生成更完整的页面调色板；免费版适合逐个主动拾取颜色。
采集页面颜色后可以做什么？
你可以复制 HEX、RGB 或 HSL，保存到项目调色板，并使用可用的导出格式进行实现。