在线图片取色器
打开图片,用带十字线的放大镜选中准确像素,再复制对应的 HEX、RGB 或 HSL 色值,并保存图片中的常用颜色。
或将一张图片拖放到这里
JPG、PNG 或 WebP · 最大 50 MB
图片只在浏览器中分析
在图片上单击、点按或拖动。放大镜会显示附近像素;方向键每次移动 1 像素,按住 Shift 可移动 10 像素。
当前颜色
像素位置
从图片中提取的 8 种代表色
保存当前颜色或色板中的颜色后,会显示在这里。
从图片中准确提取颜色
精确到单个像素
通过放大十字线选中指定像素,不必根据整片画面估算颜色。
HEX、RGB、HSL 与图片色板
复制网页和设计中常用的颜色格式,保存多个取色结果,并查看从图片中提取的主要颜色。
本地分析颜色
像素取色和色板提取都在你的设备上完成,图片无需上传到 ImageNow 服务器。
使用方法
- 选择或拖放一张支持的图片。
- 在图片上移动,通过放大十字线选中准确像素。
- 复制 HEX、RGB 或 HSL 色值,并保存需要保留的颜色。
- 将取色结果与提取出的图片色板比较,或换一张图片。
如何从图片中取色
选择图片,将指针移到需要取色的位置,再通过放大视图分辨相邻像素。选中像素后,当前颜色会立即更新,再按设计工具、样式表、文档或演示文稿需要的格式复制色值。
HEX、RGB 和 HSL 表示同一种颜色
HEX 是 CSS 和设计交付中常用的十六进制写法。RGB 分别列出红、绿、蓝通道数值。HSL 使用色相、饱和度和亮度,按规律调整颜色时更直观。格式转换不会改变实际选中的颜色。
为什么相邻像素的颜色值不同
照片中有纹理、光线、阴影、压缩痕迹和抗锯齿边缘,因此肉眼看似同一片的区域也可能包含不同像素值。可以选取附近的几个点,并保存合适的色值。图片色板能帮助了解画面整体用色,但不能代替精确的像素取色。
使用取样颜色时要检查对比度
在照片里好看的颜色,用作文字时不一定读得清。用于网站或文档时,请按实际字号测试前景与背景的组合,并遵守项目所需的无障碍标准。
常见问题
怎么从图片中取色?
选择图片,将指针移到目标区域,用放大十字线找到一个像素并选中。随后即可复制其 HEX、RGB 或 HSL 色值。
可以从照片中获取 HEX 颜色代码吗?
可以。不透明像素显示为六位 HEX 色值;带透明度的像素显示为包含透明度(Alpha)通道的八位 HEX 色值。RGB 和 HSL 格式也会保留 Alpha 透明度。点击所需格式旁的复制按钮即可。
HEX、RGB 和 HSL 有什么区别?
它们是同一种颜色的不同表示方式。HEX 和 RGB 都记录红、绿、蓝通道,HSL 则使用色相、饱和度和亮度。
可以保存多个取样颜色吗?
可以。查看图片时保存需要的颜色,之后无需反复寻找同一个像素,也能随时比较或复制。保存的颜色还可以下载为 CSS 或 TXT 文件。
工具会提取图片色板吗?
会。工具会显示从图片中提取的 8 种代表色。可以选中色板颜色查看色值;需要某个精确位置的颜色时,请使用像素取色。
为什么取出的颜色与预期有一点差别?
光线、渐变、图片压缩、显示器色彩管理和抗锯齿边缘都会让附近像素出现差异。请使用放大镜,并比较相邻的几个取样点。
这个工具能检查两种颜色的无障碍对比度吗?
不能。此页面用于提取和转换图片颜色。请用专门的无障碍对比度检查工具测试实际的前景色和背景色。
我的图片会上传吗?
不会。图片解码、像素取色和色板分析都在浏览器中完成,无需上传到 ImageNow 服务器。