在线图片取色器

拖入一张图片，悬停以预览任意像素，点击即可抓取它的 HEX、RGB 和 HSL——全部在你的浏览器中完成。图片绝不离开你的设备。

图片取色器把你的图片解码到画布，并完全在你的浏览器中采样像素。你拖入的图片和你选取的颜色绝不会离开你的设备，也不会上传到 ArrayKit。

打开 CSS 颜色转换器

关于 图片取色器

图片取色器把任意图片变成一个颜色采样器。拖入或选择一张照片、logo、截图或设计稿，然后把光标移过它以预览十字准星下的像素，点击即可锁定那个确切的颜色。每个采样都以 HEX、RGB 和 HSL 显示，并配一个实时色块，因此你可以把它直接放进 CSS、设计令牌或油漆桶。一条最近颜色条会保留你上几次的选取，便于构建调色板，且每个值都有自己的复制按钮。透明像素会保留其 alpha，因此 PNG 叠层会读回为 rgba 和 #rrggbbaa。它为设计师、前端开发者，以及任何要从图片中匹配品牌色的人打造。图片被解码到画布并在你的设备上采样——绝不会被上传。

功能特性

如何使用 图片取色器

  1. 点击拖放区，或把一个图片文件拖到它上面
  2. 把光标移过图片以预览像素颜色
  3. 点击某处以锁定该颜色，并显示它的 HEX、RGB 和 HSL
  4. 复制你需要的记法，或从「最近颜色」重新打开一个较早的选取

示例

输入

Sampled pixel: R 37, G 99, B 235 (opaque)

输出

HEX #2563eb
RGB rgb(37, 99, 235)
HSL hsl(221, 83%, 53%)

在一个蓝色按钮上点击一次，就把该像素变成可直接粘贴的 CSS 颜色值。

常见错误与故障排除

常见问题

我如何从一张图片中取色？
拖入或选择图片，悬停在它上面预览像素颜色，然后点击你想要的确切位置。取色器会立即显示该像素的 HEX、RGB 和 HSL 并配一个色块，每个值都有一个复制按钮。
我可以获取一张截图里某个颜色的 HEX 代码吗？
可以。像加载任意图片一样加载截图，悬停找到你想要的色调，然后点击它。HEX 代码会出现在 RGB 和 HSL 值旁边，让你把它复制进 CSS 或设计工具。
取色器会保留 PNG 图片的透明度吗？
会。当一个采样像素不是完全不透明时，alpha 会被带过来：RGB 显示为 rgba(...)，HEX 会多出第八对 alpha（#rrggbbaa），与该像素实际渲染的方式一致。
我可以从哪些图片格式中取色？
任何你的浏览器能解码到画布的格式——PNG、JPEG、WebP、SVG、GIF、AVIF、BMP 和 ICO。为获得精确的品牌色，优先使用无损的 PNG，因为 JPEG 和 WebP 可能使纯色填充偏移一点色差。
我可以从一张图片里保存多个颜色吗？
可以。每次点击都会把颜色加入「最近颜色」条，最多一打选取。点击那里的任意色块即可重新打开它，然后复制它的 HEX、RGB 或 HSL，以从图片中组装一个调色板。
我从一张图片取色时它会被上传吗？
不会。图片取色器把你的图片绘制到画布上，并完全在你的设备上读取像素。图片绝不会被发送到 ArrayKit 或任何服务器，因此私密的设计稿和照片都留在本地。

相关工具

全部 ArrayKit 工具