Description from extension meta
从任何网页抓取任何像素颜色并立即复制其十六进制代码。
Image from store
Description from store
色彩精准度是连接每个精美界面、品牌资产、数据可视化仪表盘和营销活动的纽带。然而,设计师和前端工程师仍然浪费无数时间,眯着眼在开发工具中查看十六进制代码,或截取页面截图,最终在 Photoshop 中进行采样。Eye Drop Tool——一款基于 Manifest V3 构建的轻量级浏览器扩展——将这种不便转化为一个简洁优雅的手势:点击工具栏图标,选择视口中的任意像素,精确的 #RRGGBB 值就会复制到剪贴板。一个轻巧的提示音确认操作后,您就可以立即回到工作状态,避免工作流程中断。
为什么这个扩展很重要
浏览器原生的颜色选择器已经存在多年,但大多数都深藏在检查器中,仅限于 DOM 中的元素,或被右键子菜单所限制。Eye Drop Tool 则通过一个始终存在的按钮展现了同样的强大功能,它可以作用于显示器渲染的任何内容——图像、画布、视频帧、SVG,甚至第三方插件。
功能亮点
一键激活 - 无需弹出窗口或设置面板。后台服务工作线程会立即注入选择器内容脚本,使空闲时内存开销接近于零。
通用像素采样——由于扩展捕获屏幕缓冲区而不是 DOM 树,因此它可以像静态 HTML 一样在动态渲染的 WebGL 场景、游戏和流视频上工作。
即时剪贴板复制——十六进制字符串会自动写入剪贴板;您可以将其直接粘贴到 Figma、VS Code 或 Slack 中,而无需中间对话框。
视觉确认提示——页面角落的微交互(“#ffcc33 已复制!”)向您保证操作已成功,并在 1.5 秒后消失。
用户利益
节省时间——无需绕道使用开发工具或外部应用。在设计冲刺过程中,这些时间累积起来就变成了几个小时。
减少认知负荷——保持相同的心理环境可以保持创造力;您无需玩弄窗户或切换焦点。
像素完美一致性——快速验证生产代码是否符合品牌风格指南,或营销模型是否符合可访问性对比度。
错误预防——手动输入十六进制代码会导致拼写错误;复制到剪贴板可以消除这种风险,从而实现更清晰的提交和更少的错误报告。
目标用户群体
UI/UX设计师
从实时原型中快速采样颜色,以便在设计系统中重复使用
Figma 审阅会议期间对色调进行微调
前端开发人员
验证 CSS 变量在不同状态下是否正确呈现
将鼠标悬停在暂存区中的按钮上并获取其活动颜色
质量保证工程师
确认 WCAG 对比度和品牌合规性
在回归测试期间,将生产版本与规范进行比较
数字营销人员和内容创作者
将临时图形与网站调色板相匹配
将英雄横幅拉至蓝色,作为最后一刻的社交板块