图片取色与调色板

找出图片的主要颜色，以 HEX、RGB 和 HSL 代码显示，并给出你点击的任意一点的颜色代码。可用于从照片中提取设计用色，或核对 Logo 的颜色。

使用方法

1. 把图片拖到框中，或点击选择图片。
2. “主色”列出使用最多的颜色及其占比。可以尝试不同的“颜色数量”（5 到 10）或“算法”。
3. 在图片上点击或拖动，即可在“已取颜色”中看到该点的颜色。可以先放大图片，“取色范围”可以取附近像素的平均值。
4. 点击代码即可复制。要复制整个调色板，请使用“复制为 CSS 变量”“复制为 JSON”或“保存为 PNG”。

计算方式与说明

• 主色是在一份长边缩小到最多 256 像素的副本上计算的。透明像素不计入。
• 中位切分反复把颜色分布最广的一组在中位数处一分为二；k-means 反复重新计算每组的中心。k-means 稍慢一些。
• 最近取过的 30 种颜色会保存在本设备的此浏览器中。图片不会上传。

常见问题

怎么获取图片上某个颜色的色值？

打开图片，点击你想要的位置。HEX、RGB 和 HSL 代码会显示在“已取颜色”中；点击代码即可复制。

HEX 和 RGB 有什么区别？

它们是同一种颜色的两种写法。RGB 用 0 到 255 的数字表示红、绿、蓝，HEX 把这三个值各写成两位十六进制数。rgb(255, 0, 0) 就是 #FF0000。

取到的颜色为什么和我看到的略有不同？

照片中相邻的像素往往略有差异。把“取色范围”设为 3 × 3 或 5 × 5 像素的平均值，数值会更稳定。

能从这个页面以外的地方取色吗？

只有在支持此功能的浏览器中可以。这时会出现“从屏幕任意位置取色”按钮，可以选取屏幕上的任意一点。