Grab the exact color from any image

上传任意 JPG、PNG、WebP 或 GIF，然后点击所显示图像上的任意位置——光标下的精确像素将被采样，并以 HEX、RGB 和 HSL 格式显示，每种格式均可一键复制。非常适合匹配品牌色、从照片中取色，或从设计样稿中提取点缀色调。

点击任意像素，这款取色工具便会显示其 HEX 色值（例如 #FF6B35），并同时给出 RGB 和 HSL——也就是可直接粘贴到样式表、设计令牌或 HTML 属性中的 HTML/CSS 颜色代码。点击“复制”即可一键获取该十六进制色值。

图像最长边会被降采样至 320 像素，随后每个像素按其各通道的高 4 位归入分组。占比最多的分组会被平均还原为完整的 8 位色彩，按出现频率排序，并作为您的调色板返回。结果通常为 5 到 24 种主色，可在视觉上概括整幅图像。

可以。下载按钮会生成两种格式：一段可直接粘贴到 :root 选择器中的 CSS 变量代码块（--color-1、--color-2…），以及一个包含每种颜色的十六进制值、RGB 分量和权重百分比的 JSON 文件。两种格式都能完美集成到设计令牌、Tailwind 配置和调色板库中。

不会——取色和调色板提取完全在你的浏览器中通过 HTML canvas API 完成。图片始终留在你的设备上，因此该工具可安全用于未发布的产品照片、设计草稿和受保密协议约束的品牌素材。

对于品牌视觉识别工作，5-8 种颜色是最佳区间——既能抓住主导主题，又不会冲淡点缀色的选择。对于数据可视化，我们建议使用 10-16 种颜色，以获得足够的分类色相。滑块可让你在 5 到 24 之间选择。

Alpha 值低于 128 的像素会被忽略，因此透明背景不会用「背景」颜色干扰配色方案。这使得图片取色器特别适合产品抠图、贴纸图稿和独立主体。

HEX（#RRGGBB）最为简洁，也是 CSS、Figma 和 Sketch 默认使用的格式。RGB 显示三个分量的取值（0–255）——在以编程方式处理图像数据时很有用。HSL（色相、饱和度、亮度）则更便于直观地调整颜色：改变色相可切换色系，调整亮度可得到不同的浅色和深色。

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

No image needed. The Color Picker & Wheel at the top works on its own — drag the saturation/brightness square and the hue slider, or type any HEX, RGB or HSL value to dial in an exact color. Uploading an image is optional, just for eyedropping colors out of a photo.

Pick your base color and the Color harmonies panel instantly builds complementary, analogous, triadic, split-complementary, tetradic and monochromatic schemes using color-wheel theory. Click any swatch to copy its HEX code.

在独立的取色器与色轮中，调出你的颜色，面板便会显示它相对于纯白和纯黑的对比度以及 WCAG 评级——AAA、AA、AA Large 或 Fail。在最终确定文本或按钮颜色前使用它，可确保颜色保持可读并符合 WCAG 2.1 无障碍准则。

可以。独立的颜色选择器和色轮会在你调出的任意 HEX、RGB 或 HSL 值旁边显示最接近的 CSS 命名颜色，这在简报、工单或设计规范中快速描述某种色调时很方便，无需靠猜。

在「取色器与色轮」中点击「随机」跳转到一个新颜色，然后使用下方的「配色方案」面板，查看基于该颜色构建的互补色、邻近色、三分色及其他协调配色——当你从零开始设计而非从现有图片取色时，这是快速找到起点的好办法。

使用调色板上方的数量下拉菜单，选择 5、8、10、16 或 24 种主色——更改时调色板会即时重新计算。将 5 这类较小的数量用于简洁的品牌配色，再配合取色吸管抓取一两种自动提取可能被平均掉的精确点缀色。

可以——独立的“取色器与色轮”会在色块正下方显示你当前颜色相对于纯白和纯黑的对比度，并按 WCAG 阈值（7:1、4.5:1、3:1）标注为 AAA、AA、AA Large 或 Fail。用它可在锁定设计颜色之前检查文字/背景配对是否符合无障碍标准。

“拾色器与色轮”会自动把你选定的任意颜色——无论是通过拾色器、HEX 框还是 RGB/HSL 字段——匹配到最接近的标准 CSS 颜色名称，显示在色板旁的“最接近名称”处。这是用语言描述颜色或找到最接近的网页安全等效色的便捷方式。

可以——每次在上传的图片上点击或点按都会向你的“已取颜色”列表添加一个新色块，而不是替换上一个，因此你可以从照片的不同部位积累出一套自定义的精确像素颜色。用色块的 × 按钮可移除任一单个色块，或用“清除已取”清空整个列表。

可以——“取色器与色轮”中的“随机”按钮（随机播放图标）可一键跳到一组新的色相、饱和度和亮度组合，有助于打破创意瓶颈，或探索你不会手动输入的调色板。下方的 HEX、RGB、HSL 以及和谐色块都会一并更新。

在触摸屏上，用手指在图片上滑动，即可在实时浮动色块中预览手指下方的颜色，然后抬起手指将该精确像素添加到你的「已取颜色」列表——无需单独确认点击。相同的调色板大小下拉框和导出按钮在移动端工作方式完全一致。

没错。页面顶部的色轮上有一个随机按钮，点击即可跳转到一个随机颜色，并立即显示其HEX、RGB和HSL代码、最接近的命名颜色、在白色和黑色背景下的对比度，以及完整的配色方案——互补色、类似色、三角色、分裂互补色、四角色和单色系。这是快速探索调色板起点的好方法。

该工具是从上传的图片或内置色轮中取色，而非直接读取屏幕实时画面。若需要屏幕取色功能，最快捷的替代方案是：截取屏幕截图，拖放到页面中，然后点击您想要的精确像素点——即可获得相同的 HEX、RGB 和 HSL 色值，无需安装任何扩展程序，且截图始终不会离开您的浏览器。