如何使用取色器从任意像素获取颜色
快速解答
要选择颜色：打开颜色选择器，上传图像（或使用屏幕吸管），单击所需颜色的像素，然后将显示 HEX、RGB 和 HSL 值。所有处理都在本地进行——您的图像永远不会上传。
介绍
颜色选择器（也称为吸管）可让您找到像素的确切颜色。这对于匹配品牌颜色、从图像中采样颜色或从照片构建调色板至关重要。基于浏览器的颜色选择器可以使用 Canvas API 从上传的图像中读取颜色，浏览器的内置 EyeDropper API 可以从屏幕上的任何位置选择颜色。本指南向您展示如何在浏览器中使用颜色选择器。
步步
-
打开颜色选择器工具
进入拾色器工具页面。该工具支持从上传的图像中选取颜色，并且在支持的浏览器中，通过 EyeDropper API 从屏幕上的任何位置选取颜色。
-
选择您的来源
要从图像中选取：上传或拖放图像。要从屏幕中选择（仅限 Chrome/Edge）：单击“从屏幕中选择”按钮，然后单击屏幕上的任意位置。
-
单击像素进行采样
对于图像拾取，将光标移到图像上，然后单击所需颜色的像素。该工具使用 getImageData() 从画布读取像素颜色。放大镜可以帮助您选择精确的像素。
-
读取颜色值
该工具以 HEX、RGB 和 HSL 格式显示选取的颜色以及样本。当您移动光标时，这些值会立即更新。
-
复制颜色
单击任何格式旁边的复制，将颜色值复制到剪贴板。在您的 CSS、设计工具或应用程序中使用它。
示例
从徽标中选择品牌颜色
输入: logo.png，点击品牌颜色像素
输出: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
从照片中采样颜色
输入: photo.jpg，单击天空像素
输出: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
从屏幕上选择（Chrome/Edge）
输入: 点击“从屏幕选择”，然后点击显示屏上的任意像素
输出: 该像素的 HEX 值，例如 #ff5733
常见问题
- 抗锯齿混合边缘处的颜色 - 两种颜色之间边缘上的像素是混合的。从纯色区域的中心取样以确保准确性。
- 不支持 EyeDropper API — 屏幕选择器需要 Chrome 95+ 或 Edge 95+。 Firefox 和 Safari 不支持；请改用图片上传方法。
- JPEG 压缩会改变颜色 —JPEG 有损压缩会稍微改变像素颜色。对于确切的品牌颜色，请使用 PNG 或原始矢量源。
- 颜色配置文件差异 - 具有嵌入颜色配置文件 (ICC) 的图像的显示可能与其原始像素值显示的不同。
提示
- 使用放大器选择精确的像素 - 在高变焦下，您可以选择单个精确的像素而不是混合边缘。
- 如果压缩引入了噪声，则从实体区域采样多个像素并对其进行平均 - 这会提供更具代表性的颜色。
- 使用 EyeDropper API (Chrome/Edge) 从任何应用程序中选取颜色，而不仅仅是浏览器中的图像。
- 使用我们的颜色选择器进行即时、私密的颜色采样 - 您的图像永远不会离开您的浏览器。