Image Color Picker：从照片提取颜色
Image Color Picker从任何照片中提取HEX、RGB、HSL和CMYK值。点击像素，创建调色板，复制颜色。无需上传。
什么是 Image Color Picker？
即将推出: Image Color Picker 是一款基于浏览器的工具，让您可以直接点击像素从任意图像中提取精确的颜色值。上传一张照片，将光标悬停在任意区域，即可在实时放大镜叠加层中预览颜色，然后点击捕获该点精确的 HEX、RGB、HSL 和 CMYK 值。与浏览器开发工具或桌面取色器不同，这款工具处理上传的图像文件，在一次会话中从您的取色点构建调色板，并一键将任意格式复制到剪贴板。一切都在您的浏览器中运行——无需服务器上传，无需账户。
主要功能
- 点击从图像中选取颜色：每次在已加载图像上点击鼠标，都会捕获该位置的精确像素颜色，并考虑图像如何缩放以适应显示区域。
- 精确度缩放放大镜：在图像上移动光标时，一个 60×60 像素的浮动预览方块会跟随您的位置，显示光标下方的颜色及其 HEX 值，让您在点击前就能准确看到即将选取的颜色。
- 提取 HEX、RGB、HSL、CMYK 值：每个选取的颜色同时以全部四种格式显示。该组件使用共享颜色工具库中的
rgbToHex、rgbToHsl和rgbToCmyk转换函数。 - 从取色点构建调色板：工具保留您在一次会话中选取的最后 10 个不重复的颜色。重复的 HEX 值会被静默忽略——两次点击同一颜色不会添加第二个条目。
- 颜色历史追踪：点击调色板色块可以重新查看之前选取的任何颜色，并无需重新选取即可再次看到所有四种格式的值。
- 一键复制颜色：当前颜色面板中的每个格式行都有自己的复制按钮。"Copy All Colors"按钮将整个会话调色板以 HEX 值逗号分隔列表的形式导出。
- 100% 客户端处理：图像被绘制到隐藏的 HTML5 Canvas 元素上。所有像素读取都在本地使用
getImageData()完成——没有任何数据离开您的浏览器。 - 支持任何图像格式：文件输入使用
accept="image/*"，因此您的浏览器能够解码的任何格式（JPEG、PNG、WebP、GIF、AVIF、SVG）均受支持。
如何使用 Image Color Picker
第一步：上传您的图像
打开 即将推出: Image Color Picker。您会看到一个带有虚线拖放区域的上传面板。点击该区域打开文件选择器，或直接将图像文件拖放到上面。图像成功加载后，工具会显示"Image loaded"提示通知并清除之前选取的所有颜色。
第二步：悬停预览颜色
图像出现后，将光标移到任意区域。一个 60×60 像素的浮动颜色方块跟随您的光标，稍微偏向右上方，以免遮住您正在检查的像素。方块用光标下方的实时颜色填充，并以对比色文字显示其 HEX 值。当您将光标移出图像时，放大镜会消失。
第三步：点击捕获颜色
点击图像上的任意点以锁定该颜色。"Current Color"面板出现在图像下方，显示：
- 一个大的颜色色块，中心以对比色文字显示 HEX 值
- HEX、RGB、HSL 和 CMYK 的四行——每行都有复制按钮
例如，点击照片中的中间调天空可能会产生：
HEX: #6fa8dc
RGB: rgb(111, 168, 220)
HSL: hsl(210, 59%, 65%)
CMYK: cmyk(50%, 24%, 0%, 14%)第四步：构建调色板
继续点击图像的不同区域。您选取的每个不重复颜色都会作为色块出现在底部的"Picked Palette"面板中。点击任意色块可将其重新加载为当前活动颜色并再次查看其所有值。调色板每次会话最多保留 10 个不重复颜色。
第五步：复制您的颜色
使用格式行上的复制按钮复制单个格式值。要导出完整调色板，点击"Copy All Colors"——这会将所有 HEX 值以逗号分隔字符串写入剪贴板，例如 #6fa8dc, #2d5f8e, #f4c842, #e8573a。随时通过上传区域加载新图像；调色板会自动重置。
实际应用示例
从 Logo 中匹配品牌颜色
您有公司 Logo 的 PNG 文件，需要为 CSS 样式表获取精确的品牌颜色。上传 Logo，将光标悬停在主品牌颜色上并点击捕获它。然后选取辅助色和强调色。使用"Copy All Colors"获取所有选取的十六进制值的逗号分隔列表，然后直接粘贴到您的 :root CSS 变量中。
从照片中采样颜色调色板
一张产品照片有您想用于 UI 设计的天然配色方案。上传照片，系统地点击主要颜色——背景色调、产品高光、阴影区域和强调细节。调色板面板最多累积 10 个不重复色块。完成后，点击每个色块获取 RGB 值，用于接受数字颜色输入的设计工具。
为错误报告识别特定像素颜色
UI 在特定按钮状态下有错误的文字颜色，您有截图。上传截图，将光标悬停在按钮文字上并点击。复制 HEX 值并将其与预期值一起包含在错误报告中。这消除了关于哪种确切颜色渲染不正确的歧义。
技巧和最佳实践
在精度重要时使用高分辨率图像。工具使用基于渲染尺寸与 Canvas 尺寸比率的缩放因子将光标位置映射到实际图像像素坐标，因此在导出前在图像编辑器中放大细节区域可为您提供每个视觉区域更多可寻址的像素。
放大镜在点击前显示 HEX 值——使用这个来确认您正好在正确的像素上，而不是在相邻的抗锯齿边缘像素上，这在对文字或细线进行取样时尤为重要。
调色板忽略重复的 HEX 值。如果您想比较两种仅在一个通道上不同的视觉相似颜色，先选取一个，记录其值，然后再选取另一个。
复制所有调色板颜色时，输出是逗号分隔的 HEX 值。将其直接粘贴到 即将推出: Palette Generator 的十六进制输入中，以探索您提取颜色的和谐变化。
常见问题和故障排除
选择文件后出现"Load error"提示：图像在读取后解码失败。这通常发生在损坏的文件或浏览器无法解析的格式（某些 TIFF 和 RAW 相机文件）上。将图像转换为 JPEG 或 PNG 后重试。
点击不产生颜色 / 放大镜不出现：如果 Canvas 初始化不正确则会发生此情况。重新加载工具并重新上传图像。如果图像非常大（超过 8000×8000 像素），某些浏览器会限制 Canvas 大小——请在上传前调整图像大小。
所有选取的颜色看起来相同：您可能在点击均匀区域（背景、纯色填充）。在照片编辑器中放大图像以找到有更多细节的区域，然后上传裁剪后的版本。
调色板色块对点击没有响应：只保留最近选取的 10 个不重复颜色。如果您已经选取了 10 种颜色，后续不重复的颜色会替换最早的条目。点击色块总是有效的——如果调色板看起来无响应，请检查您的点击是否落在色块上而不是色块之间的间隙上。
拖放不起作用：拖放区域检查 file.type.startsWith('image/')。没有 MIME 类型或类型不正确的文件会被静默忽略。使用点击浏览方式作为备选方案。
隐私与安全
Image Color Picker 完全在您的浏览器内处理您的文件。当您上传图像时，它使用 FileReader API 作为数据 URL 读取，并绘制到隐藏的 Canvas 元素上——不会向任何服务器传输数据。您的图像永远不会离开您的设备。该工具在页面加载后无需互联网连接即可工作，非常适合处理机密照片、专有设计资产和内部截图。
常见问题解答
Image Color Picker 是免费的吗？
是的，Image Color Picker 完全免费，没有使用限制。您无需账户、订阅或付款即可使用。该工具可在 即将推出: Glyph Widgets 获取，直接在您的浏览器中运行。
Image Color Picker 可以离线工作吗？
可以。页面加载后，所有处理都在本地使用 HTML5 Canvas API 完成。您可以断开互联网连接，继续从图像中提取颜色而不受干扰。该工具在正常使用期间不发出网络请求。
我的数据在 Image Color Picker 中安全吗？
您的图像使用 FileReader 和 getImageData() 完全在客户端处理。没有任何图像数据被上传到任何服务器。Glyph Widgets 无法访问您使用此工具打开的文件内容。
该工具输出哪些颜色格式？
该工具为每个选取的颜色输出四种格式：HEX（例如 #6fa8dc）、RGB（例如 rgb(111, 168, 220)）、HSL（例如 hsl(210, 59%, 65%)）和 CMYK（例如 cmyk(50%, 24%, 0%, 14%)）。每种格式都有自己的复制按钮。
一次会话中可以选取多少种颜色？
调色板保留最后选取的 10 个不重复颜色。重复的 HEX 值不会再次存储——第二次点击同一颜色对调色板数量没有影响。加载新图像会将调色板重置为空。
支持哪些图像格式？
文件输入使用 accept="image/*" 属性接受您的浏览器能够解码的任何图像格式。实际上，这包括 JPEG、PNG、WebP、GIF、AVIF 和 SVG。浏览器无法原生解码的 RAW 或 TIFF 等格式将产生加载错误。
复制后可以再次从同一图像中选取颜色吗？
可以。图像在工具中保持加载状态，直到您清除它或加载新图像。您可以继续点击、构建调色板并复制颜色，无需重新上传。
颜色采样有多精确？
该工具使用 getImageData(x, y, 1, 1) 精确读取点击位置的一个像素。显示图像尺寸和实际 Canvas 尺寸之间的比例映射从 getBoundingClientRect() 计算，因此即使图像以不同于其原始分辨率的尺寸显示，结果也能准确反映该位置的真实像素颜色。
放大镜有什么用？
浮动放大镜预览在您确认选取前显示光标下方的当前颜色。这有助于您准确识别即将采样的像素，在颜色边界、渐变或抗锯齿边缘（相邻像素差异显著）处特别有用。
可以一次性导出完整调色板吗？
点击"Copy All Colors"会将所有选取的 HEX 值以逗号分隔列表的形式写入您的剪贴板。然后您可以将其粘贴到设计工具、CSS 变量或 即将推出: Palette Generator 中进行进一步的颜色工作。
相关工具
- 即将推出: Palette Generator — 从您使用取色器提取的基础颜色生成互补色、相似色、三色等颜色和谐方案。
- Color Converter — 在 HEX、RGB、HSL、CMYK 和其他格式之间以完全精度转换。
- Contrast Checker — 验证调色板中两种颜色之间的 WCAG 无障碍对比度比率。
- Color Picker — 使用色轮和滑块直接选择颜色，无需图像。
立即试用 Image Color Picker：即将推出: Glyph Widgets Image Color Picker