Skip to main content

图片取色器

点击或点按照片中的任意像素,就能在浏览器中直接读取它精确的 HEX、RGB 和 HSL 颜色值。放大镜会显示你即将选取的像素,工具还会保留一个最近使用颜色的短列表,以及从图片中提取的颜色调色板。

上传一张图片来取色

点击或拖拽图片到这里。取色在你的浏览器中完成,不会上传到服务器。

或拖放到这里

最大 50 MB。支持 JPG、PNG、WebP、AVIF、HEIC、HEIF。

为什么使用这个取色器

像素级精确取色

11×11 的放大镜会跟随你的鼠标或手指移动,方便你在取色前精准定位到想要的像素。

HEX、RGB、HSL 与颜色名称

每次取色都会同时显示 HEX、RGB、HSL 数值以及最接近的 CSS 颜色名称,每个数值都配有独立的复制按钮。

从整个屏幕取色

在支持该功能的基于 Chromium 的桌面浏览器中,点击从屏幕取色按钮,就能从屏幕上的任何位置取色,而不仅限于上传的照片。

使用方法

  1. 1

    上传一张照片

    选择或拖放一张你想从中提取颜色的图片。

  2. 2

    点击、点按或用键盘取色

    点击或点按某个像素,也可以用方向键移动(按住 Shift 可一次移动 10 像素),再按 Enter 选取高亮的像素。

  3. 3

    复制你需要的颜色

    查看 HEX、RGB、HSL 数值以及最接近的颜色名称,然后使用对应数值旁边的复制按钮。

这是什么颜色?读懂取色结果

每次取色都会同时显示四项信息:一个类似 #3a7bd5 的 HEX 代码、等效的 RGB 数值、HSL(色相、饱和度、明度)数值,以及最接近的 CSS 颜色名称,例如“steel blue”。每种格式旁边的复制按钮会以屏幕状态提示确认复制成功,这样你就能直接获取设计工具或 CSS 文件需要的格式,而不必重新输入。

键盘取色与放大镜

点击或点按适合快速取色,但如果要放大查看某个小细节,用键盘操作会更方便:方向键每次把取色器移动一个像素,按住 Shift 可一次移动 10 个像素,按 Enter 会锁定十字光标所在的像素。移动取色器时显示的 11×11 放大镜,让你即使在复杂或对比度低的照片中,也能精确定位到某一个像素。

最近使用的颜色、调色板与 sRGB 精度

这个工具会记住你最近取过的最多 12 种颜色,还会从整张图片中提取最多 8 种主色作为调色板,方便你同时比较多种色调。颜色数值是按浏览器解码文件时使用的 sRGB 方式读取的,一张保存了特殊色彩配置文件的照片,在这里读到的数值可能和在具备色彩管理功能的设计软件中略有不同,这是正常现象,并不是取色器出了问题。

常见问题

这究竟是什么颜色?

点击或点按你好奇的那个像素,工具会立即显示它的 HEX、RGB、HSL 数值以及最接近的颜色名称。

可以从上传的照片之外取色吗,比如屏幕上的其他应用?

可以,如果你使用的是基于 Chromium 的桌面浏览器(例如 Chrome 或 Edge)并支持 EyeDropper API。这种情况下会出现从屏幕取色按钮;Safari 和大多数移动浏览器不支持这个功能。

取到的颜色会和 Photoshop 等设计工具中看到的完全一致吗?

通常会很接近,但不一定完全一致。颜色数值是按浏览器解码图片时使用的 sRGB 方式读取的,一张带有嵌入色彩配置文件的照片,在具备色彩管理功能的软件中可能会有细微差异。

使用需要账号吗?

不需要。这个取色器免费使用,无需注册即可使用。

我的照片会被上传到什么地方吗?

不会。图片一直留在你的浏览器中,不会被发送到服务器。

可以不用鼠标,只用键盘取色吗?

可以。使用方向键每次移动一个像素,按住 Shift 可一次移动 10 个像素,按 Enter 即可选取高亮的像素。

Advertisements