图片取色器 — 在线获取 HEX、RGB 和配色
在浏览器中从图片提取颜色代码并生成主色调色板
在浏览器中处理 · 不上传任何内容
把要取色的图片拖到这里
上传一张 JPG、PNG、WebP 等格式的图片。也可以用 Ctrl+V（Mac 上为 ⌘V）粘贴复制的图片。图片不会离开你的浏览器。
点击或轻触图片，即可取得该位置的颜色。点击图片后，也可以用方向键移动（Shift+方向键每次 10 像素）。
放大镜
光标位置: -
已取颜色
还没有取色，点一下图片试试。
主色调色板
采用 k-means 方法：先缩小图片，再把相近的颜色归为一组。同一张图片总是得到相同的结果。点击颜色即可载入到上方。
这是什么工具
这个工具可以告诉你照片或设计稿中任意像素的颜色，以 HEX 代码（#2563EB）、RGB 和 HSL 显示。点击或轻触图片即可取色，放大镜会放大周围区域，帮你准确点中想要的位置。它还会自动生成由 5 到 8 种最突出颜色组成的调色板。
使用方法
- 把图片拖进来，或点击 选择图片。也可以用 Ctrl+V（Mac 上为 ⌘V）粘贴复制的图片。
- 在图片上移动时，右侧的 放大镜 会放大显示附近的像素。在想要的位置点击或轻触。
- 在 已取颜色 下查看 HEX、RGB 和 HSL，点击 复制。
- 点击图片后，用方向键每次移动光标 1 像素，Shift+方向键每次 10 像素，可以更精细地调整。
- 在 主色调色板 中选择 5 到 8 种颜色，点击色块即可载入到上方的数值中。
工作原理
- HEX：每个通道用两位大写十六进制数表示。R37 G99 B235 对应 #2563EB。
- HSL：色相 0 到 360 度，饱和度和亮度 0 到 100%，四舍五入为整数。上面的颜色是 hsl(221, 83%, 53%)。
- 调色板：不透明度至少 50% 的像素用 k-means 分组（k-means++ 初始化，固定种子，最多迭代 20 次），中心值四舍五入。占比大的组排在前面，并显示其在图片中所占的百分比。
- 缩小采样：聚类前先把图片缩小到约 10,000 像素，大照片也能很快处理。采样时不做像素混合，所以图片里没有的中间色不会混进调色板。
- 颜色值：即浏览器以 sRGB 绘制出的像素值；带有其他颜色配置文件的图片，读取的是浏览器转换为 sRGB 之后的值。
使用示例
| 目的 | 做法 |
|---|---|
| 确认 Logo 的品牌色 | 点击颜色均匀的区域，复制 HEX |
| 选一个与照片搭配的背景色 | 采用调色板中占比最大的颜色 |
| 检查单个像素 | 用方向键移动，同时看放大镜 |
常见问题
我的图片会被上传吗？
不会。绘制图片和读取像素值都在你的浏览器里完成，文件和你取到的颜色都不会发送到任何地方。
取到的颜色和我看到的有点不一样。
本工具读取的是浏览器为屏幕绘制的 sRGB 像素值。如果图片带有 Display P3 或 Adobe RGB 等颜色配置文件，浏览器会先把它转换为 sRGB，所以数值可能与 Photoshop 等编辑软件中的文档数值不同。显示器设置和亮度也会影响观感。照片中还有细微的噪点，相邻像素的颜色会略有差别。想要准确的颜色，请点击颜色均匀的区域。
可以用键盘取色吗？
可以。先点击一次图片或用 Tab 键选中它，然后用方向键每次移动光标 1 像素，按住 Shift 每次移动 10 像素，光标下的颜色会立即被取出。按 Enter 或空格键会再次取当前光标处的颜色。放大镜会显示周围 11×11 像素。
调色板是怎么选出来的？
先把图片缩小到约 10,000 像素，再用 k-means 把相近的颜色归成 5 到 8 种。初始点来自固定的随机种子，所以同一张图片总是得到相同的调色板。透明像素不参与计算。
很大的图片也能用吗？
如果长边超过 4096 像素，图片会按这个尺寸载入，颜色从缩小后的图片中取。如果需要在超大图片上精确到单个像素，请先把需要的部分裁切出来。
半透明的像素怎么处理？
HEX、RGB 和 HSL 只表示颜色，不含透明度（alpha）。取到半透明像素时，会提示透明度未包含在内。
