使用方法
- 选择一张图片，或将其拖到方框内。
- 将指针移到图片上，放大镜会显示其周围的像素。
- 点击或轻点即可取色，并以 HEX、RGB 或 HSL 格式复制。
- 向下滚动查看主色，选择所需颜色数量，然后复制或下载为 CSS 变量。
工作原理
图像会绘制到浏览器中的 canvas 上，并读取指针正下方像素的颜色。放大镜会将 11 × 11 像素区域放大显示，并标出所选像素。边长超过 4096 像素的图像会先缩小，因此在非常大的照片上，选取的一个像素可能对应原始图像中多个像素的平均值。
主色通过 k-means 聚类获得：先将像素归入 32,768 个小的颜色桶，再按你选择的数量合并这些桶，并按每个桶所含像素数加权。起始点采用确定性方式选择，因此同一张图片总会得到相同的调色板。
颜色以浏览器显示所用的 sRGB 空间读取。如果图像内嵌宽色域颜色配置文件，数值可能与照片编辑器显示的结果略有差异。在支持的浏览器中（桌面版 Chrome 和 Edge），“从屏幕取色”按钮使用内置 EyeDropper 从屏幕任意位置取色。
示例
匹配品牌色
上传一张标志截图，点击它的主色，然后将 #1a73e8 或 rgb(26, 115, 232) 复制到 CSS 中。
从照片提取调色板
将一张海滩照片分成 6 种颜色，可得到沙滩、大海和天空的色调，每种颜色都显示其覆盖画面的比例，并从大到小排序。
检查色值
使用放大镜放大，以选取细线条的准确像素，而不是旁边经过抗锯齿处理的边缘。
常见问题
为什么颜色与我的照片编辑器中的颜色略有不同？
浏览器会将图像转换为 sRGB 进行显示。带有宽色域配置文件（如 Display P3、Adobe RGB）的照片，在保留原始配置文件的编辑器中显示的值可能略有不同。
为什么没有“从屏幕取色”按钮？
它需要使用 EyeDropper API，目前只有部分桌面端浏览器支持，如 Chrome 和 Edge。从上传的图片中取色在任何浏览器中都可以使用。
主色是如何选取的？
通过 k-means 聚类分析所有像素，并按每种颜色出现的频率加权。细小但鲜艳的细节可能会被合并到附近占比更大的颜色中；增加颜色数量可以将它们分开。
图片会被上传吗？
不会。图片由本页面在您的浏览器中解码和分析，绝不会离开您的设备。
隐私
图片会完全在您的浏览器中处理，不会上传，取到的颜色也不会被发送或存储。