面向前端工作流的 TokenTint

website color picker:适用于 Chrome 的网站取色器

使用 website color picker 从参考页面采集颜色,无需在截图、开发者工具和单独的笔记文件之间来回切换。

永久免费 · 无需信用卡

TokenTint 扩展中的取色功能

更从容地构建色彩系统

01 / 采集02 / 整理03 / 交付

问题

当页面是你的视觉参考时,浏览器取色器只是第一步。手动重建参考页面的调色板既慢,又容易丢失上下文或遗漏辅助颜色。

TokenTint 如何解决

TokenTint 可以直接从当前页面采集颜色,在一个历史记录中查看,并通过 Pro 页面提取功能快速获得更完整的基础调色板。结果可以导出到 CSS 或令牌文件,而不是留在笔记本里。

更顺畅的取色工作流

从参考页面到可用调色板。

  1. 01 / 收集收集。采集定义参考页面的品牌色、背景色、文字色、边框色和强调色。
  2. 02 / 比较比较。集中查看颜色,移除重复值或不符合当前视觉方向的颜色。
  3. 03 / 保存到调色板保存到调色板。将参考页面调色板保存到项目中,用于改版、竞品分析或实现工作。

为高效工作而设计

从点击取色到交付代码

专业版工作流

专业版工作流:打开 → 提取 → 整理 → 导出

将参考页面整理为可复用的颜色调色板,并支持多个项目和开发者友好的格式。

01TokenTint
TokenTint project detail page opened before using TokenTint Pro extraction

打开参考页面

打开要研究的具体项目或落地页,并在其处于活动状态时启动 TokenTint。

探索工作流
02TokenTint
TokenTint Pro showing 20 colors extracted successfully from a webpage

提取页面颜色

扫描当前页面,获得更广泛的起始调色板,无需逐个拾取。

探索工作流
03TokenTint
TokenTint Pro project selector showing multiple projects including Competitor Website

整理多个项目

在竞品、品牌、产品和改版方向之间切换不同项目调色板。

探索工作流
04TokenTint
TokenTint Pro project showing multiple saved color tokens

建立可复用颜色令牌集

选择代表性色彩,并在选定项目中将多个令牌保存在一起。

探索工作流
05TokenTint
TokenTint Pro W3C Tokens export completed successfully

导出更多格式

将选定调色板导出为 CSS Variables、Tailwind Config 或 W3C Design Tokens。

探索工作流

免费版与 Pro

免费版

  • 从当前页面拾取颜色
  • 复制 HEX、RGB 和 HSL
  • 20 个颜色历史记录
  • 单个项目调色板
  • CSS Variables 导出

Pro

  • 从当前页面提取主要颜色
  • 多个项目调色板
  • Tailwind 配置导出
  • W3C 设计令牌导出
  • 包含免费版全部功能

为什么选择 TokenTint,而不是基础取色器? 基础取色器回答“这个像素是什么颜色”,而 TokenTint 进一步帮助你回答“如何在项目中使用这个参考页面的色彩语言”。

本地优先颜色和项目保存在 Chrome 本地存储。
有限分析官网只记录定义好的交互事件。
一次购买Pro 无订阅,30 天内可申请退款。

常见问题

可以从实时页面取色吗?

可以。TokenTint 专为通过 Chrome 扩展主动采集当前页面颜色而设计。

TokenTint 可以提取整个网站的调色板吗?

Pro 支持从当前页面提取更多主要颜色,生成更完整的页面调色板;免费版适合逐个主动拾取颜色。

采集页面颜色后可以做什么?

你可以复制 HEX、RGB 或 HSL,保存到项目调色板,并使用可用的导出格式进行实现。