无需登录 数据私有 本地保存

屏幕取色器API - 系统级像素颜色拾取

前端设计 颜色工具 API 取色器 颜色
60
0
0
0
支持 JPG/PNG/WebP，也可直接 Ctrl+V 粘贴截图
移动图片查看颜色，点击锁定
悬停查看颜色
颜色微调
0
0
#FF5733
HEX #FF5733
RGB rgb(255, 87, 51)
HSL hsl(11, 100%, 60%)
取色历史
暂无取色记录，开始取色吧！
收藏颜色
暂无收藏颜色，点击♥收藏吧！
常见问题与知识

屏幕取色器是一种能够从计算机屏幕任意位置拾取像素颜色的工具。它广泛用于UI设计、网页开发、图像处理、品牌配色等场景。设计师可以快速从参考图中提取配色方案，开发者可以精确匹配页面元素的颜色值，大幅提升工作效率。本工具支持EyeDropper API系统级取色、图片上传取色以及系统调色板三种方式。

EyeDropper API 是W3C标准中的一项现代浏览器API，允许网页应用访问系统级的颜色拾取器，从屏幕任意位置（包括浏览器窗口外部）提取颜色。目前Chrome 95+、Edge 95+、Opera 81+等Chromium内核浏览器已支持该API。Firefox和Safari暂不支持。使用该API需要HTTPS安全上下文或localhost环境。如果浏览器不支持，您可以使用本工具的图片取色功能作为替代方案。

点击「图片取色」标签，上传图片或使用Ctrl+V粘贴截图。鼠标在图片上移动时，右侧放大镜会显示像素级放大视图（桌面端），帮助精确定位。鼠标悬停实时预览颜色，点击即可锁定该颜色。锁定的颜色会自动更新到预览区并加入历史记录。移动端支持触摸操作，手指滑动查看、点击锁定。

HEX（如#FF5733）是十六进制颜色表示法，最常用于网页CSS中，简洁且兼容性最好。RGB（如rgb(255,87,51)）使用红绿蓝三通道0-255的数值表示，直观易懂。HSL（如hsl(11,100%,60%)）使用色相(Hue)、饱和度(Saturation)、亮度(Lightness)表示，更贴近人类对颜色的感知，适合进行颜色调整和配色方案推导。本工具同时展示三种格式，方便不同场景使用。

取色后，您可以通过亮度和饱和度滑块对颜色进行细微调整。滑块范围为-50到+50，表示在HSL颜色空间中相对调整。调整后的颜色实时反映在预览色块和各格式数值中。点击「重置微调」可恢复到原始取色值。这个功能特别适合需要微调配色方案的场景，无需反复重新取色。

本工具提供两种颜色保存方式：历史记录自动保存最近20次取色结果，点击历史色块可快速回看；收藏功能（点击♥按钮）可将重要颜色长期保存，最多50个。所有数据存储在浏览器localStorage中，关闭页面后不会丢失。您也可以点击任意颜色格式旁的复制按钮，将颜色值复制到剪贴板。
🔧 相关工具