EyeDropper API：取色器与设计工具集成

---

title: EyeDropper API：取色器与设计工具集成

keywords:

• EyeDropper
• pick
• sRGBHex
• 颜色选择
• 设计工具

description: 介绍 EyeDropper 的调用与返回字段、用户手势与权限要求、与设计流程集成的实践与兼容回退，并提供示例与参考。

categories:

• 应用软件
• 编程开发

---

概述

EyeDropper 允许用户从屏幕中选取颜色并返回 sRGBHex 值，适用于设计工具与调色功能。需在用户手势触发与安全上下文下使用。

示例

const ed = new EyeDropper()
const { sRGBHex } = await ed.pick()
document.getElementById('color').value = sRGBHex

工程建议

• 手势要求：在点击后调用；处理用户取消与异常。
• 回退策略：不支持时提供色板选择或输入；保证流程可用。
• 体验：显示当前选色预览并保存历史；避免主线程阻塞。

参考与验证

• MDN EyeDropper 文档：https://developer.mozilla.org/docs/Web/API/EyeDropper
• Chrome 平台文档：https://developer.chrome.com/docs/web-platform/eyedropper/
• web.dev 相关文章：https://web.dev/articles/eyedropper