用 EyeDropper API 拾取屏幕上的任意像素

常见情形：要按参考素材还原一套配色，手上却没有源文件，只有发布会视频截图、导出的设计稿或者一份旧 PDF。老流程是切一小块、粘进图像编辑器、用吸管、复制 hex，每个颜色都来一遍。

屏幕级取色过去要靠单独的应用，或者装一个要额外权限的浏览器扩展。从 Chrome 95 起，Chromium 系浏览器内置了 EyeDropper API，覆盖了常规场景：浏览器显示自己的取色界面，用户选一个像素，页面拿到一个 sRGB 十六进制字符串。ZeroTool 的取色器（屏幕与图片取色）用的就是这个 API；在没有这个 API 的浏览器里，它也能从图片和粘贴的截图上读像素。

60 秒看懂 EyeDropper API

EyeDropper 的规范是 WICG（W3C 社区组）的草案（EyeDropper API）。接口面非常小：

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
console.log(result.sRGBHex); // "#3a7bd5"

open() 返回一个 Promise。浏览器显示取色界面，用户在屏幕任意位置点击一个像素——包括浏览器窗口之外、其他应用的画面上——Promise resolve 出一个对象，其 sRGBHex 属性是 #aabbcc 形式的颜色（MDN）。如果用户按下 Escape，Promise 会以 AbortError reject。

在它之上构建前，有三条约束值得先记住：

必须有用户激活。 没有瞬时用户激活时调用 open()，会以 NotAllowedError reject，所以要在 click 或按键处理器里调用。没有页面加载时自动弹出，也没有无头采样。规范的安全一节说明了原因：页面不能「截取」用户无意分享的屏幕信息，只有在用户做出按下鼠标这类明确操作后才交出像素数据。
每次调用只能取一个像素。 每次调用返回一个颜色并关闭取色界面。要取第二个颜色，用户必须再点一次你的按钮。取色界面已打开时再次调用 open()，会以 InvalidStateError reject。
只输出 sRGB。 返回值始终是 sRGB 十六进制字符串。在 macOS 上，Chromium 先把取到的显示器颜色换算成 sRGB，再按每通道 8 位取整（skia_utils_mac.mm 的 CGColorRefToSkColor），所以广色域颜色会被截取。这个 API 没有任何方式返回 Display P3 值。

浏览器支持情况（MDN browser-compat-data 8.1.3，2026-09-24）：桌面版 Chrome、Edge 95 起，Opera 81 起；Linux Wayland 下不可用。Firefox、Safari、Android 版 Chrome 和 iOS 上的浏览器都不支持。能力检测一行就够：

if ('EyeDropper' in window) {
  // EyeDropper 可用——挂上屏幕取色按钮
} else {
  // 提供其他取色途径：从图片或截图上取色
}

工具用法

打开取色器（屏幕与图片取色），有四种取色方式：

从屏幕取色。 点击按钮，再点击屏幕上任意像素。这条路径走 EyeDropper API，只在支持它的浏览器里出现。
打开图片。 打开文件、把文件拖进工具，或者按 Ctrl+V / ⌘V 粘贴截图。放大镜显示指针周围 11 × 11 个像素；点击，或用方向键移动后按 Enter，可取单个像素或 3 × 3 / 5 × 5 平均值。所有浏览器都能用。
系统取色板。 通过 <input type="color"> 打开操作系统的颜色选择器。
直接输入数值。 在任意字段粘贴 CSS 颜色（HEX、rgb()、hsl()、oklch()、color(display-p3 …) 或颜色名），其余字段会重新计算。

输出 HEX、RGB、HSL、OKLCH 和 Display P3，每种写法都能换算回同一个 8 位颜色。最近 16 次取色保存在最近颜色栏里，背后是 localStorage。图片不会保存，任何取色路径都没有网络请求。

四个具体使用场景

反向还原一份设计

你手上有一张截图或一份设计稿导出，需要把配色写成 CSS 变量或 Tailwind token。在任意窗口里打开参考图，点击「从屏幕取色」，再点你要的颜色。在 Firefox 或 Safari 里，把参考图截图粘贴进工具，在放大镜里点那个颜色。

专业应用在浮动调色板、热键、命名色库上依然更强。对于一个项目里的几个颜色，浏览器已经够用。

品牌色取证

营销侧常见需求：「网站之前是某个特定的蓝色，源文件丢了，能不能从这份旧 PDF 或截图里把它还原出来？」没有原始 token，就只能从渲染好的图片上读颜色。在工具里打开图片，按原始分辨率取色。JPEG 截图经过压缩，相邻像素会有差异，用 3 × 3 或 5 × 5 平均值更稳。

视频和直播界面取色

视频叠加层、缩略图、录屏、会议幻灯片——任何在你屏幕上播放的东西都能取色。暂停画面，点击「从屏幕取色」，点击那个像素。

取到的是显示出来的像素：经过视频解码、缩放和合成，再按上文换算成 sRGB。你取到的颜色是「用户看到的」，不是「源素材里指定的」。

无障碍审计

拿到一个颜色后，通常下一步是检查它和另一个颜色的对比度。取前景、取背景，把两者粘进颜色对比度检测器，得到 WCAG AA/AAA 判定。对色觉障碍审计，把取到的颜色丢进色盲模拟器，看看绿色盲（deuteranopic）或红色盲（protanopic）用户眼里你的调色板是什么样。

边界与变通

Safari 和 Firefox 用户。 EyeDropper 能力检测返回 false。工具会隐藏「从屏幕取色」，把「打开图片」设为主按钮。把截图存进剪贴板再粘贴：Mac 在截图快捷键里加 Control，例如 Control-Shift-Command-4（Apple 支持）；Windows 按 PrtSc 复制整个屏幕（Microsoft 支持）。操作系统也自带屏幕取色工具：macOS 的数码测色计，Windows 的 PowerToys 取色器（Win + Shift + C）。

不支持连续采样。 每次取色都要在你的按钮上重新点一下。50 个颜色意味着 50 次按钮点击加 50 次像素点击。这是用户激活的硬性要求，不是工具的限制。

P3 和 HDR 截取。 在广色域显示器上，超出 sRGB 的颜色会先换算成 sRGB 并截取，再交给你的代码。需要广色域数值时，改从图片文件取色：能创建 Display P3 canvas 的浏览器（Chrome、Edge 92 起，Safari 15.2 起）能让工具读出 P3 值，并提示被截取。

最近颜色栏存在 localStorage 里。 清掉浏览器站点数据就会被清空。仅存本机，不会同步。

FAQ

为什么不能一次取多个像素或读取一整块区域？

这个 API 设计上就是一次用户操作只返回一个颜色。规范的安全一节写明，取色器不能让页面「截取」屏幕信息，并建议只在用户明确操作后交出像素数据、清楚提示正处于取色模式、允许用户按 Esc 退出（EyeDropper API，Security and Privacy Considerations）。

Safari 和 Firefox 用户该怎么办？

用截图。把截图复制到剪贴板，在工具里按 ⌘V 或 Ctrl+V 粘贴，再点击要取的像素，工具按原始分辨率读取。不经过浏览器、直接在屏幕上取色，可以用 macOS 的数码测色计或 Windows 的 PowerToys 取色器。

为什么我的 P3 显示器读出来的值和 Photoshop 不一样？

Photoshop 读的是文档自身色彩空间里的数值。EyeDropper API 返回的是显示出来的颜色换算成 sRGB、并按每通道 0–255 截取后的值。颜色超出 sRGB 时，这两个数字不可能一致。要看 P3 值，在支持 Display P3 canvas 的浏览器里从导出文件取色。

页面能不经点击就打开取色器吗？

不能。没有瞬时用户激活时，open() 会以 NotAllowedError reject（MDN）。要在用户触发的点击或按键处理器里调用。

最近颜色栏会跨浏览器或跨设备同步吗？

不会。这个历史栏存在当前 origin 的 localStorage 里——按浏览器、按用户配置、按设备隔离。清掉站点数据就会被删除。没有账号、不上传、不跨设备同步。