图片颜色取样器

通过指定坐标从图片中选取颜色。获取 HEX、RGB、HSL、HSV 和 CMYK 格式的颜色值。

Click to upload file or drag and drop file here

Maximum file size: 20MB Supported formats: image/jpeg, image/png, image/webp, image/gif, image/bmp, image/tiff

上传任何图片文件进行颜色取样

X 坐标（像素），从左边缘开始计算（0 = 左边缘）

Y 坐标（像素），从顶部边缘开始计算（0 = 顶部边缘）

取样区域半径（0 = 单个像素，较高值会对区域内的颜色取平均）

选择输出中包含哪种颜色格式

关键信息

分类
设计与颜色
输入类型
file, number, select
输出类型
json
样本覆盖
4
支持 API
Yes

概览

图片颜色取样器是一款实用的在线设计辅助工具，允许用户通过指定精确的像素坐标从上传的图片中提取颜色。该工具支持 JPEG、PNG、WEBP 等多种主流图片格式，并能输出 HEX、RGB、HSL、HSV 和 CMYK 等多种色彩空间格式，同时支持设置取样半径以获取区域平均色，满足设计师和开发者的精准取色需求。

适用场景

  • •需要从设计稿或图片中的特定像素坐标提取精确的颜色代码时。
  • •需要将图片中某一点的颜色转换为 HEX、RGB、HSL、HSV 或 CMYK 等多种色彩格式时。
  • •需要对图片中某一小块区域进行色彩平均化取样，以避免单个噪点像素干扰时。

工作原理

  • •上传需要取色的图片文件，支持 JPEG、PNG、WEBP、GIF、BMP 或 TIFF 格式。
  • •输入目标取色点的 X 坐标和 Y 坐标（以左上角为原点，单位为像素）。
  • •根据需要设置取样半径（0 表示单像素，最大支持 50 像素的区域平均值）并选择输出格式。
  • •提交后系统将解析图片对应坐标的像素数据，并返回计算后的颜色值 JSON 结果。

使用场景

网页开发人员根据视觉稿的精确像素坐标提取 HEX 或 RGB 颜色代码用于 CSS 样式。
印刷设计师将图片中的特定位置颜色提取并转换为 CMYK 格式以用于印刷排版。
UI/UX 设计师通过设置取样半径，获取界面截图中某个渐变或纹理区域的平均代表色。

用户案例

1. 网页前端开发精准取色

前端开发工程师
背景原因
正在根据设计师提供的标注图开发网页，需要获取背景图上某个特定像素位置（X: 120, Y: 350）的精确 HEX 颜色值。
解决问题
无法直接通过肉眼或普通吸管工具在复杂背景中获取该坐标点的精确单像素 HEX 值。
如何使用
上传背景图片 hero-bg.png，设置 X 坐标为 120，Y 坐标为 350，取样半径设为 0，输出格式选择 HEX。
示例配置
{
  "imageFile": "hero-bg.png",
  "x": 120,
  "y": 350,
  "sampleRadius": 0,
  "outputFormat": "hex"
}
效果
成功获取该像素点的精确 HEX 颜色值（例如 #3b82f6），直接应用于 CSS 代码中。

2. 印刷设计色彩转换

包装设计师
背景原因
需要将一张产品实拍图上特定区域（X: 500, Y: 600）的颜色提取出来，并转换为 CMYK 格式以用于包装盒印刷。
解决问题
拍照图片存在噪点，直接取单像素颜色不够准确，且需要直接得到 CMYK 格式。
如何使用
上传产品图 product.jpg，设置 X 坐标为 500，Y 坐标为 600，取样半径设为 5（以平滑噪点），输出格式选择 CMYK。
示例配置
{
  "imageFile": "product.jpg",
  "x": 500,
  "y": 600,
  "sampleRadius": 5,
  "outputFormat": "cmyk"
}
效果
获得该区域平滑后的平均 CMYK 颜色值，确保了印刷色彩的准确性。

用 Samples 测试

image, png, jpg
Web Python 图像处理示例
Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
title token image
image
Android Java 图像处理示例
Android Java 图像处理示例，包括图像读取保存、缩放和格式转换
title token image
image
Android Kotlin 图像处理示例
Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换
title token image
image
macOS Objective-C 图像处理示例
macOS Objective-C 图像处理示例，包括图像读取保存、图像缩放和格式转换
title token image
image

相关专题

图片格式转换与动画导出工具
在一个专题里比较 JPG、PNG、GIF、AVIF、WebP、TIFF、ICO、base64 以及动画导出相关的图片格式转换工具。
图片整理、修饰与批处理准备工具
把图片清理、裁边、补边、加框、批量缩放压缩、水印和视觉修饰工具集中到一个专题中，适合素材整理流程。
图片元数据、EXIF 与隐私清理工具
在一个专题中比较图片元数据查看、EXIF/IPTC/XMP 检查、方向修正、元数据编辑和隐私清理工具，适合图片发布流程。
音频编码与格式转换工具
在一个专题里比较音频格式转换、码率调整、采样率转换、编码切换和导出工具，适合交付与归档工作流。

常见问题

该工具支持哪些图片格式？

支持 JPEG、PNG、WEBP、GIF、BMP 和 TIFF 格式的图片。

取样半径（sampleRadius）有什么作用？

取样半径为 0 时提取单像素颜色；大于 0 时，系统会计算以该坐标为中心、指定半径内所有像素的平均颜色，适合减少噪点干扰。

坐标原点（0, 0）在哪里？

坐标原点位于图片的左上角，X 轴向右延伸，Y 轴向下延伸。

可以一次性获取所有的颜色格式吗？

可以，在输出格式中选择“所有格式”，即可同时获取 HEX、RGB、HSL、HSV 和 CMYK 格式的颜色值。

上传的图片有大小限制吗？

单张图片文件大小限制在 20MB 以内。

API 文档

请求端点

POST /zh/api/tools/image-color-picker

请求参数

参数名 类型 必填 描述
imageFile file (需要先上传) 是 上传任何图片文件进行颜色取样
x number 是 X 坐标（像素），从左边缘开始计算（0 = 左边缘）
y number 是 Y 坐标（像素），从顶部边缘开始计算（0 = 顶部边缘）
sampleRadius number 否 取样区域半径（0 = 单个像素，较高值会对区域内的颜色取平均）
outputFormat select 否 选择输出中包含哪种颜色格式

文件类型参数需要先通过 POST /upload/image-color-picker 上传获取 filePath，然后将 filePath 传递给对应的文件字段。

响应格式

{
  "key": {...},
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
JSON数据: JSON数据

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-image-color-picker": {
      "name": "image-color-picker",
      "description": "通过指定坐标从图片中选取颜色。获取 HEX、RGB、HSL、HSV 和 CMYK 格式的颜色值。",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=image-color-picker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

支持 URL 文件链接或 Base64 编码作为文件参数。

如果遇见问题，请联系我们：[email protected]