图片取色器
在线图片取色器工具，上传图片即可提取任意像素颜色值，支持 HEX、RGB、HSL 三种格式。拖拽、粘贴或选择图片，鼠标移动实时预览颜色，点击即可采集，自动记录取色历史，设计师与开发者必备的颜色识别工具。
取色次数
0 次
历史颜色
0 色
当前色值
#FFFFFF
取色状态
等待上传
图片预览（移动预览 · 点击取色）
—
拖拽图片到此处，或点击选择
支持 Ctrl+V 粘贴剪贴板图片
JPG · PNG · GIF · BMP · WEBP
缩放: 100%
取色中…
颜色信息
未取色
HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
取色历史 0 / 24
功能特性
多种上传方式
支持拖拽上传、点击选择、Ctrl+V 粘贴剪贴板图片，三种方式自由切换，操作便捷高效。
实时颜色预览
鼠标在图片上移动时，取色光标实时显示当前位置的像素颜色，无需点击即可预览，定位精准。
点击精准取色
点击图片任意位置即可提取该像素颜色，通过后端 ImageSharp 精准读取原图像素，结果准确可靠。
三种格式输出
同时输出 HEX、RGB、HSL 三种常用颜色格式，一键复制所需格式，适配各类设计开发场景。
取色历史记录
自动记录最近 24 次取色结果，点击历史色块可快速恢复，悬停可查看色值并单独删除。
色板一键导出
支持将取色历史导出为文本色板文件，包含全部颜色的 HEX、RGB、HSL 值，方便保存与分享。
使用说明
如何使用图片取色器？
- 将图片拖拽到上传区域，或点击上传区域选择文件，也可使用 Ctrl+V 粘贴剪贴板中的图片。
- 图片加载后，鼠标在图片上移动，取色光标会实时显示当前位置的像素颜色，便于定位目标。
- 在目标位置点击鼠标，即可通过后端精准提取该像素颜色，右侧颜色信息区显示 HEX、RGB、HSL 值。
- 点击颜色值右侧的复制按钮，可单独复制对应格式；也可点击工具栏「复制 HEX」快速复制十六进制色值。
- 每次取色会自动加入取色历史，点击历史色块可恢复为当前颜色，悬停色块可删除单条记录。
- 点击「导出色板」将历史颜色导出为
.txt文件，包含全部格式色值。 - 点击「清空」清除当前图片与全部取色历史，重新开始。
颜色格式说明
- HEX：十六进制颜色码，形如
#FF5733，网页 CSS 中最常用，由红绿蓝三通道的十六进制值组成。 - RGB：红绿蓝三通道数值，形如
rgb(255, 87, 51)，每通道取值 0-255，直观反映颜色构成。 - HSL：色相、饱和度、亮度，形如
hsl(11, 100%, 60%)，更符合人眼对颜色的感知，便于调色。
常见问题
图片取色器工具是免费的吗？
是的，本工具完全免费，无需注册登录。图片上传至后端进行像素颜色提取，取色完成后不在服务器持久化存储，保障数据隐私安全。
支持哪些图片格式？
支持 JPG、JPEG、PNG、GIF、BMP、WEBP 等主流图片格式。建议使用清晰度较高的原图，图片越大可取色的区域越精细。建议单张图片小于 10MB 以保证加载速度。
为什么移动鼠标就能看到颜色预览？
鼠标移动时，工具通过浏览器 Canvas 在本地实时读取当前像素颜色并显示在取色光标中，提供即时反馈。当您点击图片时，会将坐标发送至后端，由服务器端 ImageSharp 读取原图对应像素并返回精准的颜色值，确保取色结果准确可靠。
取色历史最多保存多少条？
取色历史最多保存 24 条颜色记录。当超过上限时，最早采集的颜色会自动移除。您可以点击历史色块恢复为当前颜色，悬停色块后点击右上角删除按钮可单独删除某条记录，或点击「清空」清除全部历史。
取色结果不准确怎么办？
取色精度受图片缩放影响。工具会根据图片原始尺寸与显示尺寸的比例换算坐标，点击位置对应的是原图真实像素。若需精确取色某个细节，建议放大浏览器窗口或使用更高分辨率的原图。PNG 无损格式取色效果最佳。
HEX、RGB、HSL 有什么区别？
HEX 是十六进制表示，网页 CSS 最常用；RGB 是红绿蓝三通道数值（0-255），直观反映颜色构成；HSL 用色相、饱和度、亮度描述颜色，更符合人眼感知，便于调整色调。三者可相互转换，本工具同时输出三种格式供您选择使用。