图片取色器和配色提取工具
点击图片任意位置获取精确颜色。每换一张图片，下方的配色都会更新。可以打开、拖入或粘贴你自己的图片，它不会离开你的浏览器。
或拖到这里，或用 Ctrl+V / Cmd+V 粘贴
示例：一个落地页设计稿
光标下的颜色
HEX
#000000RGB
rgb(0, 0, 0)HSL
hsl(0, 0%, 0%)取色记录
点击图片，取到的颜色会显示在这里。
这张图片的配色
正在加载配色...如何从图片中取色
- 打开、拖入或粘贴一张图片。用系统快捷键复制的截图可以直接粘贴。
- 把鼠标移到图片上。放大镜会显示光标周围的像素，所以连 1 像素的边框也能准确选中。
- 点击（或轻触）取色。右侧会显示 HEX、RGB 和 HSL 值，并带复制按钮，颜色也会加入“取色记录”。
使用键盘时，按 Tab 聚焦图片，用方向键移动（按住 Shift 每次移动 10 像素），按 Enter 取色。
从图片提取配色
配色功能会把相近的像素归为一组，按出现频率从高到低显示，并标出每种颜色占图片的比例。可以选 3 到 12 种颜色：少一些得到品牌色，多一些还能拿到边框和阴影的颜色。可以复制为 :root CSS 变量、Tailwind 的 theme.extend.colors 配置块，或纯 HEX 列表。
示例
- 从截图匹配品牌色。 用上面的示例图片、选 6 种颜色，配色会给出淡紫色背景（
#f2f1fd，占 73% 的像素）、卡片的白色（#fcfcfd）、用于边框和 logo 的两种浅灰、按钮的紫色（#6049f0）和深色文字（#3c3b62）：正好是写样式表需要的一套颜色。 - 检查对比度。 分别取文字颜色和它下面的背景色，上线前把两个 HEX 值放进对比度检查工具比较一下。
- 用照片做主题。 拖入一张产品照片，设为 5 种颜色，把 Tailwind 配置块粘贴到你的配置里，围绕这张照片设计落地页。
图片取色器常见问题
我的图片会被上传吗？
不会。图片在浏览器里的 canvas 上绘制，每个像素都在本地读取。任何内容都不会离开你的设备，所以保密的设计稿也可以放心使用。
为什么取到的颜色和设计工具里的略有不同？
JPG 和 WebP 压缩会让像素值略微变化，截图的色彩配置文件也可能与原文件不同。需要精确的品牌色时，请从设计稿导出的 PNG 里取色。
配色是怎么计算的？
图片会先缩小到最长边约 160 像素，再用 k-means 聚类对颜色分组。每个色块是一组颜色的平均值，百分比是该组像素所占的比例。同一张图片每次得到的配色都一样。
支持哪些图片格式？
浏览器能显示的都可以：PNG、JPG、WebP、GIF（取第一帧）、AVIF 和 SVG。也可以直接从剪贴板粘贴截图。
配色能用在 Tailwind CSS 里吗？
可以。Tailwind 标签页会给出 theme.extend.colors 配置块。粘贴到 tailwind.config.js，就能使用 bg-palette-100 或 text-palette-300 这样的类名。