图片取色器
选择照片、标志或截图，点选像素或提取配色板，用于下一个设计。
PNG、JPEG 或 WebP · 最高 20 MiB、16 MP
选择图片，提取第一个颜色。
点击或轻触图片上的一点。聚焦图片后，用方向键移动一像素，按住 Shift 移动 10 像素。 像素坐标从左上角的 0 开始。
所选像素
请在图片上选择一个点。
你选择的颜色
最多保存此图片的 12 个颜色，再下载数值。
检查两种颜色的搭配
使用示例配色、输入自己的颜色，或将图片中的选色设为文字色和背景色。预览搭配、检查对比度，再复制数值用于设计。
图片中所选的颜色
先在图片中选择像素，再将其设为文字色或背景色。
选择新图片会重新使用示例配色。
选择透明颜色下方的不透明底色。
支持 #RGB、#RGBA、#RRGGBB、#RRGGBBAA、rgb(0, 0, 0) 或 rgba(0, 0, 0, 0.5)。RGB 通道使用 0 至 255 的整数，Alpha 使用 0 至 1。
配色预览
给下一个想法留个位置
带上笔记本，找个座位，从一张小草图开始。
对比度
7.46:1
显示的比值经过四舍五入，是否达标使用完整精度判断。
| 文字大小 | AA | AAA |
|---|---|---|
| 普通文字 | 达标 | 达标 |
| 大号文字 | 达标 | 达标 |
大号文字指至少 18 pt 的常规字或 14 pt 的粗体字，请核对最终设计的字号。
配色详情
{
"standard": "WCAG 2.2 SC 1.4.3 / 1.4.6",
"colorSpace": "sRGB",
"channels": "RGB 0–255; alpha 0–1",
"foreground": [
35,
78,
82,
1
],
"background": [
245,
230,
200,
1
],
"backdrop": [
255,
255,
255,
1
],
"renderedForeground": [
35,
78,
82,
1
],
"renderedBackground": [
245,
230,
200,
1
],
"ratio": 7.46158578805981,
"checks": {
"normalAA": true,
"normalAAA": true,
"largeAA": true,
"largeAAA": true
}
}结果仅描述这组配色。文字边缘经过抗锯齿处理时，请使用原设计色值。透明色以你选择的不透明底色合成计算。
WCAG 对比度指南从图片中提取配色板
提取一组设计用色，再复制或下载配色板。
先在上方选择图片，再提取配色板。
所选文件和颜色值仅保留在此页面内存中，本工具不会上传或存储它们。网站常规服务独立运行。
试用原创六色示例
这张原创 PNG 包含六个纯色色块，其中有半透明红色和全透明色块。下载后在上方选择它，检查像素数值。
下载示例 PNG
把图片像素变成可复用的颜色
- 选择本地 PNG、JPEG 或 WebP。预览适配屏幕，取色使用图片的原始尺寸。
- 点击、轻触或用方向键选择像素。复制 HEX 获取 RGB 通道值，复制 RGBA 则包含透明度。
- 保存需要的颜色，再下载包含颜色值和像素坐标的 JSON 或 TXT 列表。打开另一张图片会清空之前的选择和列表。
开始前，你可能想了解
这个图片取色器免费吗？
是的，取色、复制和下载都在浏览器中完成，无需账户或积分。
透明度数值表示什么？
Alpha 为 0 表示全透明，255 表示完全不透明。不含 Alpha 的 HEX 和 RGB 显示颜色通道；RGBA 和八位 HEX 包含透明度。棋盘格只是预览背景，不是从图片中采样的颜色。
为什么同一颜色在其他应用中看起来不同？
这里显示浏览器解码后的像素值。图片色彩配置、浏览器处理、显示设置和印刷都会影响外观。请在设计中使用这些数值，并在最终使用场景检查成品。
工具会上传图片吗？
不会。所选本地文件在此浏览器页面解码和取色，不会由工具发送到服务器或保存到浏览历史。加载网页和下载公开示例使用常规网站连接。
能从图片生成配色板吗？
可以。使用“提取配色板”获取三、五或八个代表色，再复制或下载。也可手动选择并保存最多 12 个颜色及其像素坐标。