当设计中有想重复使用的颜色时，靠目测猜测既慢又不一致。图片取色器会读取你选中的像素，并返回 HEX、RGB 和 HSL 值。打开图片取色器，加载照片或屏幕截图，点击颜色后复制需要的值。
工具会在浏览器中读取图片，支持 JPG、PNG 和 WebP；如果精确位置难以点击，可以放大画布。你可以使用鼠标或键盘操作，每次只有一个颜色样本处于激活状态。
图片取色器可以做什么？
工具会提取指定像素并转换为常见格式：
- HEX 适合 CSS、网页设计和设计 token。
- RGB 适合需要红、绿、蓝通道值的流程。
- HSL 方便理解色相、饱和度和明度。
点击其他位置可以替换当前样本，然后复制新的值。这适合匹配背景、检查产品照片，或将屏幕截图中的颜色转换为可复用的样式值。
如何在线从图片中选取颜色
1. 选择清晰的源图片
尽量使用原始照片或高分辨率屏幕截图。压缩缩略图、模糊预览或使用颜色滤镜的图片，可能已经改变了你想复现的准确颜色。
2. 打开在线取色器
打开图片取色工具，选择 JPG、PNG 或 WebP 文件。取样会在浏览器中完成，不需要为了读取像素而上传到服务器。
3. 点击目标像素
点击想确认颜色的区域。纯色背景应避开边缘和阴影；产品或插图应选择有代表性的区域，而不是高光、反射或反锯齿边界。需要时先放大画布。
4. 复制颜色代码
需要 CSS 颜色时复制 HEX；如果下一步工具或设计系统要求，则使用 RGB 或 HSL。将值粘贴到代码、设计文件、品牌笔记或样式变量中，并在实际使用位置检查。
如何获得更可靠的颜色样本？
图片中的可见颜色会受到光线、阴影、反射、压缩和显示屏影响。单个像素只提供该点的值，不能自动还原可能因拍摄或调色而改变的原始品牌色。
平面图形应选择填充均匀的中央区域。照片则可以从同一材质中采集多个样本并比较。避开边缘、反锯齿文字和反光强烈的表面。
如果图片太大，可以用图片缩放器创建工作副本，但要保留原始文件。如果有干扰性的边框，请先使用图片裁剪器。
HEX、RGB 还是 HSL：应该使用哪个？
网页样式使用 HEX
HEX 简洁，常见于 CSS、设计 token 和文档。像 #2F80ED 这样的值可以直接粘贴到样式表中。
通道和透明度使用 RGB
RGB 会分开显示红、绿、蓝通道，适合比较通道，或搭配独立透明度扩展为 rgba()。
受控变化使用 HSL
HSL 将色相、饱和度和明度分开，方便在保留基本色相的同时创建更亮背景、柔和边框或更深的悬停状态。
常见取色错误
取到阴影而不是底色
阴影可能让中性色表面变灰，或让有色表面看起来更深。选择光线充足且有代表性的区域，并比较附近像素。
选择边缘像素
边缘可能因反锯齿或压缩而混入其他颜色。将取样位置移到对象或背景中央。
使用带屏幕滤镜的截图
夜间模式、HDR、颜色配置文件和浏览器扩展都可能改变显示效果。颜色重要时，请使用原始文件或未修改的截图。
把单个样本当成完整色盘
取色器只识别点击的颜色并保留一个激活样本，不会自动推断完整色盘。请逐个采集主要颜色，并记录背景、文字、边框或强调色等作用。
忘记实际使用场景
颜色放在不同背景或不同屏幕上可能看起来不同。请在实际页面、组件、广告或设计文件中测试，并检查对比度和可读性。
简单的设计交付流程
- 保留原始照片或截图作为参考。
- 分别采集背景、主要主体、文字和强调色。
- 为每个 HEX 值记录清晰的作用。
- 实现或创建变化时按需使用 RGB 或 HSL。
- 发布前检查对比度、悬停状态和最终显示尺寸。
取样完成后再使用图片压缩器。如果目标支持，可以将最终副本转换为PNG 转 WebP，但要保留源文件以便未来检查颜色。
常见问题
如何从图片中选取颜色？
打开图片取色器，选择 JPG、PNG 或 WebP，点击目标像素，然后复制 HEX、RGB 或 HSL 值。
如何从图片中找到 HEX 色码？
将图片加载到图片 HEX 取色工具，点击有代表性的像素，并复制显示的 HEX 值。
可以从屏幕截图中取色吗？
可以。屏幕截图和其他支持的图片一样可以取样。为了更接近原始颜色，请使用未压缩截图，并避开边缘、阴影和屏幕滤镜。
可以选取多个颜色吗？
可以，但一次只有一个样本处于激活状态。选择下一个位置前，先复制或记录当前值。
取色器是否保护隐私？
页面加载后，像素读取会在浏览器中进行。读取颜色不需要将图片上传到服务器。
继续使用图片工具
需要从照片或截图获取颜色值时，使用图片取色器。使用图片裁剪器移除边框，用图片缩放器准备工作副本，再用图片压缩器准备最终文件。