ZeroTool Workbench
屏幕吸色器
通过浏览器原生 EyeDropper API 从屏幕任意位置拾取颜色。输出 sRGB HEX、RGB、HSL 并保存最近颜色调色板 — 无需上传,无需扩展程序。
如何使用
- 点击 从屏幕吸色。光标会变成放大镜 — 点击任意像素即可采样。
- 或者使用 原生拾色器 按钮打开浏览器内置的取色对话框(所有浏览器均可用)。
- HEX、RGB、HSL 字段会同步更新。编辑任一字段,另外两个会自动重新计算。
- 点击任一格式旁边的 复制 按钮,即可将值发送到剪贴板。
- 最近 8 个采样颜色会保留在 最近颜色 条中 — 点击色块即可重新载入。
60 秒看懂 EyeDropper API
EyeDropper 是浏览器原生的 Web API,允许页面从用户屏幕任意位置采样像素。页面调用 new EyeDropper().open();浏览器打开系统级放大镜;点击后,Promise resolve 出一个对象,其 sRGBHex 属性即为所拾取的颜色。
该 API 保护隐私:页面无法获取像素数据,只能拿到用户选中的那一个颜色。每次取色必须由用户点击触发 — 没有任何无头或脚本化的采样方式。
不同模式如何选择
- 从屏幕吸色 — 当颜色出现在其他应用、截图或视频画面里时使用。
- 原生拾色器 — 想要新建颜色或使用熟悉的 HSV 色盘时使用。
- 在字段中输入 — 已经有精确数值(如设计稿规范),想要换算到其他格式时使用。
FAQ
哪些浏览器支持 EyeDropper API?
Chrome、Edge 和 Opera(Chromium 95+)已实现 EyeDropper API。Safari 和 Firefox 尚未支持 — 本工具在这些浏览器上会自动回退到原生 color 输入控件。
为什么吸色器需要点击按钮才能触发?
浏览器要求通过用户手势(点击)才能打开吸色器。不能从 setTimeout 或页面加载时自动触发。每次取色都需要点击「从屏幕吸色」。
能拾取浏览器窗口外的颜色吗?
可以。只要吸色器处于打开状态,EyeDropper API 可以采样物理屏幕上的任意像素,包括其他应用程序。
拾取的颜色在 sRGB 下精确吗?
API 返回 sRGB 十六进制字符串。HDR 屏幕的广色域(P3)值会被映射到 sRGB。需要严格色彩管理流程时,请用支持色彩管理的工具核对。
最近颜色保存在哪里?
最近 8 次取色仅保存在浏览器的 localStorage 中。不会上传任何数据。点击「清除最近」即可删除。