拾色器 | 屏幕取色器

⚠️

当前浏览器不支持屏幕取色

EyeDropper API 目前仅在 Chrome、Edge、Opera 等 Chromium 内核浏览器中可用。您可以：
• 更换为 Chrome 或 Edge 浏览器
• 或使用「图片取色」工具，上传截图后取色

点击按钮后，移动鼠标到屏幕任意位置，单击即可取色；按 ESC 取消

🎨 当前颜色

#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

🌈 配色方案

点击任意色块可复制其 HEX 值

相似色

3 色

#3CE0F6

#3C83F6

#523CF6

互补色

2 色

#3C83F6

#F6AF3C

分割互补色

3 色

#3C83F6

#F6523C

#E0F63C

三色

3 色

#3C83F6

#F63C83

#83F63C

四色

4 色

#3C83F6

#AF3CF6

#F6AF3C

#83F63C

方形色

4 色

#3C83F6

#F63CE0

#F6AF3C

#3CF652

💡 使用提示

点击「开始屏幕取色」后，光标会变成吸管形状，移到想要的颜色上单击即可。
取色时按 ESC 可以取消当前操作，不会影响已取到的颜色。
取到颜色后，下方会自动生成六种配色方案，方便您快速找到搭配色。
所有取色动作都在您的操作下完成，页面不会主动截取屏幕内容。

✅

关于拾色器

拾色器是一款基于 EyeDropper API 的免费在线取色器，让您无需安装任何软件，直接在浏览器中调用屏幕取色器拾取屏幕任意位置的颜色。点击按钮后，鼠标进入吸色器模式，移到目标颜色单击即可获得该点的 HEX、RGB、HSL 色值，并支持一键复制。工具自动生成相似色、互补色、三色、四色等六种配色方案，并记录取色历史，方便对比与回溯。无论您是在做网页设计、前端开发、PPT 制作，还是想从某个界面借鉴颜色，这款拾色器都能解决「看到一个颜色却无法准确定位」的问题，适合设计师、开发者、教师及色彩爱好者使用。

什么是拾色器

拾色器，也叫取色器、吸色器或屏幕取色器，是一种可以直接从屏幕显示内容中拾取像素颜色的实用工具。它最早出现在图像编辑软件中，后来逐渐成为设计师和开发者的日常工具。传统做法需要先系统截屏，再打开图片取色软件逐点读取，流程繁琐；现代浏览器提供的 EyeDropper API 让网页也能直接调用系统级取色能力，用户点击按钮后即可进入全屏取色模式，把鼠标移到任意位置单击即可取值。整个过程由浏览器内核执行，网页本身无法主动读取屏幕内容，兼顾了便捷性与隐私安全。本工具在此基础上增加了颜色格式转换、配色方案生成、历史记录、一键复制等功能，是一个更完整、更友好的在线拾色器方案。

如何使用拾色器

使用本拾色器非常简单。第一步，点击页面中央的「开始屏幕取色」按钮，浏览器会进入全屏取色模式，鼠标光标变成吸管形状。第二步，移动鼠标到想要取色的位置，屏幕上会实时显示该点的颜色和色值，确认后单击即可固定。第三步，颜色会立即回到工具页面，显示大色块、HEX、RGB、HSL 三种格式，每种格式旁边都有复制按钮，点击即可复制到剪贴板。第四步，工具会自动生成相似色、互补色、分割互补色、三色、四色、方形色六种配色方案，每个色块都可单独复制，也可一键复制整套。第五步，取到的颜色会加入「取色历史」，最多保留最近 20 条，点击任意历史色块即可重新选中。第六步，如需连续取多个颜色，再次点击取色按钮即可；取色过程中按 ESC 可以随时取消，不影响已有结果。

拾色器的应用场景

拾色器的应用场景非常广泛。在网页与 APP 设计中，设计师可以从参考网站、竞品截图、设计稿中直接拾取颜色，快速建立配色方案，配合自动生成的配色方案，一次取色即可获得整套搭配色。在前端开发中，遇到设计稿没有提供精确色值的情况，用屏幕取色器直接从设计稿截图里取值，比手动抄色号准确得多。在 PPT 和报告制作中，从公司 logo、品牌素材、行业图表中取色，能保证视觉风格统一。在教学和演示场景中，讲师可以现场取屏幕上的颜色讲解色彩理论。此外，在插画创作、视频剪辑、数据可视化等工作中，在线取色器也是一个高频使用的小工具，帮助用户快速把屏幕上的颜色「搬」到自己的工作流中。

拾色器的原理

拾色器的核心原理是读取屏幕上某个像素点的 RGB 值。根据取色范围不同，实现方式分为三类：一是图片取色，把图片绘制到 Canvas 上，通过 getImageData 读取指定坐标的像素，优点是兼容所有浏览器；二是桌面端屏幕取色，先截取整个屏幕的位图，再读取对应坐标的像素值，桌面吸管工具大多采用这种方式；三是浏览器屏幕取色，也就是本工具采用的 EyeDropper API，由浏览器内核直接执行取色动作，网页只拿到一个颜色字符串，拿不到任何像素数据或屏幕内容。EyeDropper API 之所以被允许，正是因为它把「读屏幕」这个高风险能力压缩成了「取一个值」，把安全风险降到最低。整个取色动作必须由用户主动触发，网页无法在后台悄悄读取屏幕。

拾色器使用经验

使用拾色器时有几个经验值得参考。第一，取色前先确认屏幕亮度、色彩模式是否正常，避免因为夜间模式或系统滤镜导致取到的颜色和真实颜色有偏差。第二，取色时尽量选择颜色均匀的区域，避开渐变色、阴影、抗锯齿边缘，这些位置的像素会有微小差异，可能取到相邻色。第三，对于小尺寸的图标或文字，可以先放大页面再取色，命中率会更高。第四，取到颜色后建议立即复制并记录，尤其是做多个颜色对比时，通过历史记录回溯比反复取色更高效。第五，善用自动生成的配色方案，取一个主色即可得到相似色、互补色等一整套搭配，比手动调色省时省力。第六，如果需要和团队协作，可以把取到的 HEX 或 RGB 值直接发给同事，比发截图更精确。掌握这些经验，这款在线取色器能成为您日常工作中不可或缺的效率助手。

常见问题解答（FAQ）

拾色器和取色器是同一个东西吗？

是的，拾色器、取色器、吸色器、屏幕取色器在中文语境里基本是同义词，只是叫法不同。它们都指从屏幕或图片中拾取颜色值的工具。本工具同时支持屏幕取色和配色方案生成，属于功能较完整的在线取色器。

屏幕取色器支持哪些浏览器？

基于 EyeDropper API，目前支持 Chrome、Edge、Opera、Brave 等 Chromium 内核浏览器（Chrome 95+、Edge 95+）。Safari、Firefox 暂不支持该 API，打开页面时会提示兼容性警告，建议改用 Chrome 或 Edge，或使用「图片取色」工具作为替代方案。

点击取色按钮后没反应怎么办？

通常有三个原因：一是浏览器不支持 EyeDropper，请查看页面顶部是否有兼容性警告；二是当前页面不在焦点状态，先单击页面任意空白处激活窗口再点击按钮；三是系统弹出了权限提示被拦截，检查浏览器地址栏右侧是否有权限图标。

拾色器的取色精度能到 1 像素吗？

EyeDropper API 由浏览器内核直接读取屏幕像素，精度为 1 像素。不过实际取到的颜色受屏幕缩放、系统色彩管理、显示器色域影响，在不同设备上可能有细微差异。如需极高精度的印刷级取色，建议使用专业硬件校色仪。

吸色器会不会偷偷截取我的屏幕？

不会。EyeDropper API 是浏览器内核提供的系统级取色功能，只有用户主动点击按钮、并单击屏幕某点时才返回该点的颜色值，网页本身无法截屏或读取屏幕内容。页面只在您操作时接收到一个颜色值，不会拿到任何图像数据，可以放心使用。

取色历史会上传到服务器吗？

不会。所有取色结果都保存在浏览器内存中，关闭页面后自动清空，不会上传到任何服务器，也不会写入本地存储。您可以放心处理包含隐私内容的界面配色，页面关闭后不会留下任何痕迹。

能不能连续取多个颜色？

可以。点击「开始屏幕取色」→ 单击屏幕取一个颜色 → 回到页面后再次点击按钮，即可继续取下一个。每次取到的颜色都会自动记录到「取色历史」，最多保留最近 20 条，点击历史色块可以快速切换。

拾色器生成的配色方案可以自定义吗？

目前配色方案基于取到的颜色自动生成，包括相似色、互补色、分割互补色、三色、四色、方形色六种。如果您希望自定义，可以取到主色后到「色相环」或「颜色配色」工具中进一步调整，这些工具支持更细粒度的色相、明度、饱和度调节。

屏幕取色和图片取色有什么区别？

屏幕取色直接从屏幕上取像素，不需要上传图片，操作更快，但依赖 EyeDropper API 的浏览器支持。图片取色需要用户上传截图或照片，兼容所有浏览器，适合需要处理复杂图片或做批量颜色提取的场景。两者互为补充，可以搭配使用。

取到的颜色可以商用吗？

工具本身只做像素读取和数学计算，不涉及第三方素材版权。但需要注意：如果您是从他人拥有版权的图片、视频或界面中取色并用于商业项目，配色的使用通常不受版权保护，但原内容的版权仍归原作者所有，具体使用请遵守相关法律法规。