图像颜色选择器
要从标志截图中匹配品牌颜色或从照片中提取墙面色调,通常需要打开Photoshop。该工具可将任意图像加载至可缩放画布中,并显示所选像素的HEX、RGB及 HSL 值,同时提供10×10像素区域的平均值,从而实现局部采样而非单点采样,有效避免JPEG格式噪声伪影。
如何从图像中选择颜色
-
1
上传或拖放图片
JPG 、PNG、WebP格式,选择器会自动缩放以适配您的视口。
-
2
放大该区域
滚动以放大;拖动以精确定位采样位置。
-
3
点击一个像素
支持HEX、RGB、 HSL 三种颜色模式的即时显示,并提供放大后的色样图。
-
4
复制所需的符号
一键即可将 HEX、rgb() 或 hsl() 保存到剪贴板。
-
5
保存多个样本
从图像中选取6至10种颜色作为设计参考色板。
获取准确的样本
单像素颜色选择几乎无法满足真实照片的需求,JPEG压缩、噪点以及光照变化都会导致即使在视觉上均匀的区域也会出现逐像素差异。
采样模式
| 模式 | 功能 | 使用场景 |
|---|---|---|
| 点 | 光标下方的单个像素 | 从设计工具中采集截图样本 |
| 3×3平均值 | 点击区域周围9个像素的均值 | 轻度压缩的JPG照片 |
| 10 × 10 平均值 | 100个像素的平均值 | 高度压缩或含噪照片 |
| 区域平均值 | 绘制矩形,计算其内部所有像素的平均值 | 标志及纯色设计素材 |
色彩空间注意事项
- 显示屏截图显示sRGB值;所选颜色与原始色源一致。
- 相机拍摄的照片可能采用Adobe RGB或DCI-P3色彩空间;而颜色选择器显示的是sRGB,因此广色域手机照片中的鲜艳红色会显得略微褪色。
- 使用ICC配置文件的PNG格式:选择器在采样前会转换为sRGB格式,以确保输出结果一致。
常见用例
- 从截图中匹配客户标志的颜色,而非凭猜测。
- 根据参考照片(风景照、情绪板或电影剧照)创建调色板。
- 检查已渲染网页中丢失设计令牌的十六进制值。
- 确认利益相关方已正确应用品牌色。
隐私
该图像会直接加载到浏览器画布中,无需上传,选择器仅使用客户端端画布读取功能,因此机密设计内容始终保持保密。
常见问题
JPEG压缩会轻微改变图像色彩,尤其在渐变区域和边缘处更为明显。若源文件为 JPG 格式,请选用10×10平均模式;若可获取原始PNG或 SVG 文件,则从其中选取样本以确保完全匹配。
并非直接操作。请截取所需帧的截图并导入。若需进行精确的视频转调色板处理,请使用视频工具提取帧并对每帧进行采样。
它会从您点击时显示的任意帧中采样。请暂停或滚动到所需帧后再进行采样。
每个会话最多可保存20种颜色。调色板存储在本地,刷新页面时会保留,但清除浏览器数据后将被删除。
相关工具
GIF 制作器
将一组图片或短视频转换为动画 GIF。导出前可调整帧率、循环次数和尺寸。
图片尺寸调整器
将图片调整到精确的像素尺寸或百分比,同时保持宽高比。适合批量准备图片,无需上传。
图像放大器
使用 AI 超分辨率或经典插值,将低分辨率图像放大 2×、3× 或 4×,同时保留重要细节。
BMP 转 PNG
在浏览器中将 BMP 文件转换为 PNG。无损,保留色深,并可从原始 BMP 的 alpha 通道添加可选透明度。
SVG 转 PNG
在浏览器中将 SVG 文件或 SVG 标记转换为 PNG,选择缩放因子,并保持透明边缘清晰。
PNG 转 SVG 矢量化工具
在浏览器中把 PNG 栅格图像转换为 SVG 路径。适合徽标、图标和线稿。可控制阈值、颜色数量和平滑度。