取色器

上传图片任意点取色/历史色

826 次访问
IMAGE COLOR PICKER · MAGNIFIER

在线取色器

上传图片任意位置点击取色 · 实时放大镜 · 历史色彩 · HEX / RGB / HSL / HSV / CMYK / LAB

上传图片

🎨

拖入或点击选择图片

JPG / PNG / WebP / GIF · 浏览器本地处理

使用说明

放大镜：鼠标移动到图片上自动显示 10× 放大镜，精确到像素，避免选错。

点击取色：在图片上点击任意位置，颜色实时显示在右侧并自动加入历史。

历史色彩：最近选取的 50 个颜色，鼠标悬浮显示 HEX，点击复制。

隐私：图片仅在浏览器本地解析，不会上传任何服务器。

关于本工具

了解工具定位 · 使用场景 · 对比优势

上传一张图片，点击任意位置即可取色，颜色值自动复制到剪贴板，同时存入历史记录方便复用。设计师、前端开发者、插画师在比对色值、提取参考色时，无需打开设计软件。所有取色在浏览器内完成，图片不上传服务器。

使用场景

🎨

UI 设计取色

UI 设计师从竞品截图、灵感素材中提取品牌色/辅助色时，传统方法需要打开 Photoshop 多次吸色。本工具上传图片后，鼠标悬停任意位置即可实时显示颜色值，点击即存入历史色列表。支持 HEX/RGB/HSL 三种格式一键复制，无需来回切换工具，提升配色提取效率。

🖼️

电商主图配色

电商运营在制作活动主图时，需要从品牌 VI 手册或往期海报中提取标准色，避免视觉偏差。上传参考图片后，可精确取到每个色块的数值，历史色列表自动记录已取的颜色，方便对比不同区域的色值是否一致，确保主图配色符合品牌规范。

🎬

视频调色参考

视频剪辑师在后期调色时，常从电影截图或参考视频中提取特定场景的色调。本工具支持上传高清截图，通过点选获取阴影/中间调/高光的色值，历史色列表可对比多个参考画面的色彩倾向，辅助建立统一的调色 LUT 或色彩方案。

📐

印刷品校色

平面设计师在印刷前需要确认 CMYK 色值是否在印刷色域内。上传设计稿截图后，可逐点提取颜色并查看其 CMYK 数值，历史色列表方便批量对比多个区域的色值是否超出印刷边界，避免因色差导致返工。

🔬

科学图像标注

科研人员处理显微图像或卫星遥感图时，需要标注特定区域的 RGB 色值用于分类或记录。上传图片后，可精确取到感兴趣区域的色值，历史色列表自动保存所有标注点，方便后续统计分析或论文配图说明。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A (ColorPick Eyedropper)传统方法
数据隐私纯浏览器处理，图片不上传服务器浏览器扩展，需授予页面权限依赖截图软件+本地取色，无网络传输
处理速度即时取色，毫秒级响应需加载扩展，取色有轻微延迟截图→导入PS→取色，数分钟
离线可用完全离线（纯前端实现）需安装扩展，离线可用完全离线
图片格式支持常见格式（PNG/JPEG/WebP等）仅限当前网页元素，不支持上传图片取决于截图/编辑软件格式支持
历史色管理自动记录最近取色，可复制无历史记录功能需手动记录或截图保存
平台兼容任何现代浏览器，无需安装仅Chrome/Edge等支持扩展的浏览器需安装专业软件（如Photoshop）
取色精度像素级精确，支持放大预览像素级，但无放大辅助取决于软件放大倍数
使用门槛打开网页即用，零学习成本需安装扩展，了解权限设置需掌握专业软件操作

使用指南

上手步骤 · 输入输出 · 避坑提示

使用步骤

  1. 上传 JPG/PNG/WebP 图片，支持拖拽或点击上传区域，单张 ≤ 20MB
  2. 在图片预览区移动鼠标，取色框跟随显示当前像素的 HEX 值
  3. 点击任意像素点，该颜色自动存入右侧「历史色」列表
  4. 点击历史色列表中的色块，复制对应 HEX 值到剪贴板

输入输出示例7 个典型场景，覆盖常规、边界与易错

输入输出说明
上传一张纯色背景图片，点击红色区域#FF0000典型场景：从设计素材中取色
上传一张照片，点击人物肤色区域#D4A574典型场景：从真实照片中提取颜色
上传一张渐变图片，点击渐变中间位置#808080边界 case：渐变区域取色，结果取决于点击位置
上传一张极暗图片，点击黑色区域#000000边界 case：纯黑取色，验证 RGB 最小值
上传一张极亮图片，点击白色区域#FFFFFF边界 case：纯白取色，验证 RGB 最大值
上传一张带透明通道的 PNG 图片，点击透明区域#000000易错 case：透明区域取色结果为黑色
连续点击图片不同位置 5 次#FF5733, #33FF57, #3357FF, #F333FF, #FF3333典型场景：历史色记录，方便对比

常见错误对照7 个常踩的坑 · 错误 → 修复

1. 取色时点击了图片外空白区域

错误
鼠标在图片边框外点击，取色器返回 #000000 或 #FFFFFF
修复
点击图片内部的像素区域，确保光标落在图片像素上

取色器只读取图片像素的颜色值；点击图片外的空白区域（如背景、边框）会取到页面背景色，而非图片颜色

2. 上传了透明 PNG 但期望取到背景色

错误
上传透明 PNG 图片，点击透明区域后取色器返回 rgba(0,0,0,0) 或 #000000
修复
如需取透明区域的“视觉颜色”，先为图片添加白色或纯色背景再上传

取色器读取的是像素的 RGBA 值；透明像素的 RGB 通道可能为 0 或未定义，不会自动模拟背景色

3. 期望取色结果与屏幕截图颜色完全一致

错误
在浏览器中截图后上传，取色结果与截图软件显示的颜色有偏差
修复
直接上传原始图片文件（PNG/JPG/WebP）而非屏幕截图

截图软件会二次压缩或转换色彩空间（如 sRGB→Display P3）；原始图片的颜色值才是设计师/开发需要的准确值

4. 在颜色空间转换时忽略 gamma 校正

错误
从取色器复制 #FF8800 后，直接用 RGB 线性插值计算渐变色
修复
先将 sRGB 值转换到线性空间（去除 gamma），计算插值，再转换回 sRGB

sRGB 编码包含 gamma（≈2.2）；直接在线性 RGB 空间做颜色混合会导致中间色偏暗，视觉上不自然

5. 用取色器结果直接匹配印刷色（CMYK）

错误
从网页图片取色 #003366，直接告诉印刷厂用这个十六进制值
修复
使用专业分色工具（如 Photoshop 的 CMYK 转换）将 RGB 转为 CMYK 色值

取色器返回的是 sRGB 色值，适用于屏幕显示；印刷使用 CMYK 色域更窄，直接 RGB→CMYK 转换会丢失色域外颜色

6. 上传超大图片（>20MB）导致页面卡顿

错误
直接上传 4000×6000 像素的 RAW 文件或未压缩 TIFF（>50MB）
修复
先压缩为 WebP 或 JPEG（质量 80%），或缩小至 2000px 以内再上传

取色器在浏览器端处理图片，超大图片会占用大量内存并导致 Canvas 渲染卡顿；浏览器对 Canvas 尺寸也有上限（通常 16384px）

7. 误以为取色器支持取视频帧或动画 GIF 的颜色

错误
上传动画 GIF 后点击某一帧，取色器只返回第一帧的颜色
修复
如需取动画中某帧的颜色，先用视频编辑工具截取该帧为静态图片再上传

取色器只读取静态图片（PNG/JPEG/WebP/静态 GIF）；动画 GIF 或视频文件不会被逐帧解析

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

RGB → Hex: #RRGGBB, 其中 RR = round(R × 255), GG = round(G × 255), BB = round(B × 255)

变量说明

  • R — 红色通道值（0.0–1.0）
  • G — 绿色通道值（0.0–1.0）
  • B — 蓝色通道值（0.0–1.0）
  • RR — 十六进制红色分量（00–FF）
  • GG — 十六进制绿色分量（00–FF）
  • BB — 十六进制蓝色分量（00–FF）

示例

取色器点击图片上某像素，浏览器返回 RGB 浮点值 (0.847, 0.196, 0.125)。R=0.847 → RR=round(0.847×255)=round(215.985)=216=D8；G=0.196 → GG=round(0.196×255)=round(49.98)=50=32；B=0.125 → BB=round(0.125×255)=round(31.875)=32=20。最终 Hex 色值为 #D83220。

适用范围

适用于所有基于 sRGB 色彩空间的数字图像取色。若图片嵌入 ICC 色彩配置文件（如 Adobe RGB、ProPhoto RGB），直接取色结果与 sRGB 显示存在偏差，需先进行色彩空间转换。

原理图

1. 上传图片拖拽或点击选择JPG / PNG / WebP2. 点击取色鼠标悬停图片点击任意像素点3. 本地计算Canvas API 读取像素 RGBA 值4. 展示结果HEX 色值RGB 色值色块预览历史取色记录自动保存至浏览器本地，刷新页面不丢失
用户输入 本地处理 输出结果

开发者集成

3 种主流语言 · 复制即用

from PIL import Image
import sys

# 打开图片，获取指定坐标的 RGB 值
img = Image.open("sample.png")
pixels = img.load()

# 取坐标 (100, 200) 处的颜色
x, y = 100, 200
r, g, b = pixels[x, y]

# 输出 hex 格式
hex_color = f"#{r:02x}{g:02x}{b:02x}"
print(f"RGB({r}, {g}, {b})  →  {hex_color}")
package main

import (
	"fmt"
	"image"
	_ "image/png"
	"os"
)

func main() {
	f, _ := os.Open("sample.png")
	defer f.Close()

	img, _, _ := image.Decode(f)
	// 获取坐标 (100, 200) 处的颜色
	r, g, b, _ := img.At(100, 200).RGBA()
	// RGBA() 返回 16 位值，需右移 8 位转为 8 位
	hex := fmt.Sprintf("#%02x%02x%02x", r>>8, g>>8, b>>8)
	fmt.Println(hex)
}
// 浏览器端：从 Canvas 取色
const img = new Image();
img.src = 'sample.png';
img.onload = () => {
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);

  // 取坐标 (100, 200) 处的颜色
  const [r, g, b] = ctx.getImageData(100, 200, 1, 1).data;
  const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
  console.log(hex);  // 输出 hex 颜色值
};

常见问题

8 个高频疑问

上传图片后，点哪里取色？为什么我点上去没反应？
图片加载后，鼠标指针会变成取色图标（通常是一个吸管或十字准星）。直接点击图片上任意位置，工具会读取该像素点的颜色值，并显示在结果区。如果点击后无反应，先确认图片是否完全加载完成（大图可能需几秒），再检查是否在图片边缘外点击。部分浏览器在触屏设备上需要长按或轻触两次才能触发取色，可以尝试用鼠标操作。
取出来的颜色和我在 Photoshop 里吸的为什么不一样？
有两个常见原因。一是图片本身被浏览器缩放显示：如果上传的图片分辨率很高，浏览器为了显示完整可能会缩小图片，此时点击的坐标对应的是缩放后的像素，而非原图像素，导致颜色偏差。建议上传前将图片缩放到 1:1 显示比例，或使用工具提供的「原图取色」模式。二是图片色彩空间不同：sRGB 和 Adobe RGB 等不同色彩空间下同一 RGB 值显示效果有差异，本工具默认按 sRGB 读取，与大多数屏幕一致。
能取的颜色值格式有哪些？有没有十六进制和 HSL？
工具支持常用颜色格式，包括 HEX（#RRGGBB）、RGB（rgb(255,0,0)）、HSL（hsl(0,100%,50%)）以及 RGBA（带透明度）。取色后结果区会同时显示多种格式，可以直接复制使用。如果只需要特定格式，可以在设置或历史记录中切换显示模式。注意：HSL 的色相值范围是 0-360°，饱和度与明度是百分比，与 RGB 的 0-255 范围不同，转换时工具会自动计算。
取色器能取图片里非常小的区域吗？比如 1 像素的线条？
可以，但受限于图片分辨率和浏览器显示精度。如果原图分辨率足够高（例如 1920×1080 的截图），1 像素线条在放大后仍可被精确点击。但若图片本身很小（如 100×100 像素），1 像素线条在浏览器中可能只占 1 个物理像素，鼠标点击很难精准命中。建议先使用工具的「放大镜」或「局部放大」功能（若有），将目标区域放大后再取色。如果工具没有放大功能，可以先用截图工具放大图片区域再上传。
为什么我上传的 PNG 透明背景取出来是白色？
透明背景在浏览器中通常以棋盘格或白色底色显示，取色时工具读取的是「显示颜色」而非「原始透明色」。PNG 的透明像素本身没有颜色值，浏览器会用一个默认背景色（通常是白色）来渲染。要取透明区域上叠加的其他元素的颜色，需确保该元素不透明。如果需要提取 PNG 中半透明像素的实际颜色，可以先将图片转换为带底色的格式（如 JPEG），或使用支持 Alpha 通道读取的专业工具。
历史颜色记录能保存多久？关闭页面后还能找回吗？
历史颜色记录仅保存在当前浏览器会话中，关闭页面或清除浏览器缓存后会自动丢失。工具不会将取色历史上传到服务器，因此也无法跨设备或跨浏览器同步。如果需要长期保存，建议在取色后将需要的颜色值手动复制到本地文件或笔记应用中。部分浏览器扩展或本地存储插件可以辅助保存，但本工具本身不提供持久化存储功能。
这个取色器跟浏览器开发者工具里的取色器有什么区别？
浏览器开发者工具（F12）的取色器只能取当前网页上元素的颜色，无法操作已上传的本地图片。本工具专为「从图片中取色」设计，支持上传任意格式的图片（JPG/PNG/WebP/BMP 等），并在图片上自由点击取色，同时保留历史记录和多种格式输出。适合设计师从素材图、截图或照片中提取配色方案，而开发者工具的取色器更适合调试网页样式。
工具支持手机端使用吗？在手机上怎么取色？
手机浏览器可以正常使用，但操作方式略有不同。在触屏设备上，点击图片位置后工具会读取点击点的颜色，但手指较粗时难以精确点击小区域。建议先放大图片（用双指捏合手势），再点击目标区域。部分手机浏览器不支持鼠标悬停预览，所以取色前可能无法像电脑端那样看到吸管图标跟随移动。如果取色不准，可以尝试使用触控笔或截图后放大再上传。

相关工具

「颜色处理」下的其他工具

查看全部
C 颜色互转 AA 颜色对比度 配 配色方案 板 调色板预设 盲 色弱色盲模拟 -- CSS Variables

隐私保证 · 所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。

↑↓选择 ↵打开 ⌘+↵新窗口 esc关闭