图片取色器
新从图片中拾取任意颜色，并提取主色调色板为 HEX、RGB 和 HSL。
Hover the image and click
to pick a color.
Picked colors (click to copy)
Dominant palette
Runs entirely in your browser. Nothing is uploaded.
从图片中拾取任意颜色 — HEX、RGB和HSL
这款免费图片取色器能将任意图片转化为可点击的颜色来源：拖入照片、截图或Logo（也可用Ctrl+V粘贴），悬停时可看到放大像素镜，点击即可获取精确的HEX颜色代码、RGB和HSL值——瞬间复制到剪贴板。拾色历史记录最近16个颜色，方便从同一张图片中依次采样多个色调。
图片通过浏览器的Canvas API在本地读取，不会上传至任何服务器。这使其非常适合处理未发布的设计稿、客户Logo和敏感资料——不同于imagecolorpicker.com等会将文件上传至服务器的工具。无需注册，无需账号，无广告打扰。
像素级精准拾色的放大镜
点击到正确的像素至关重要——抗锯齿边缘、渐变和文字中充满了过渡色。悬停时显示的放大镜会在光标周围放大像素，并用十字准心标出即将采样的精确像素，让你能够精准地从图片中获取颜色：按钮的纯色填充区而非模糊边缘，Logo的实色区域而非JPEG压缩产生的噪点。
图片保持完整像素精度（大图仅缩放显示），移动时所有数值实时更新。点击，HEX代码即存入剪贴板。
自动提取图片配色方案
除单像素拾取外，工具还会自动提取图片的主色调色板——按照颜色在图片中所占比例排序的八个色块，每个均标注HEX代码。这是将照片转化为配色方案最快的方式：品牌情绪板、从主视觉图提取网站配色、从灵感图片生成室内装饰色彩方案。
提取过程将像素量化为色彩聚类并对每个聚类取平均值，因此色块代表的是图片的真实色彩特征，而非个别异常像素。点击任意色块可复制，或点击"全部复制"获取逗号分隔的列表，直接粘贴到CSS变量、设计文档或笔记中。
使用EyeDropper API拾取屏幕颜色
需要的颜色不在已保存的图片里——比如正在浏览的网站、其他应用或视频帧？点击从屏幕取色按钮，调用浏览器原生EyeDropper（Chrome和Edge支持），可采样屏幕上任意位置的像素。采集到的颜色会进入与图片拾色相同的HEX/RGB/HSL面板和历史记录中。
在不支持该API的浏览器上（Safari、Firefox），可用粘贴方式补全：按PrtScn（Mac上按Cmd+Shift+4）截图，然后直接Ctrl+V粘贴到本页——无需先保存截图文件。此方法同样适用于采样浏览器中打开的PDF或视频帧。
与imagecolorpicker.com、Adobe Color和Canva的对比
imagecolorpicker.com是最流行的同类工具，功能相近，但每次使用都会将图片上传到服务器，并投放广告。Adobe Color可从照片中提取调色板，但需要Adobe账号，会将图片发送至Adobe服务器，且不提供带放大镜的单像素拾取——它是调色板工具，而非滴管工具。Adobe付费工具（Photoshop、Illustrator）提供精准滴管功能，但需订阅，国内起步价约每月140元人民币。
Canva的取色器仅适用于Canva项目中已有的图片。macOS数字颜色计和Windows PowerToys颜色拾取器是屏幕级工具，可在桌面任意位置使用，但不能从文件中提取调色板。Coolors.co可从图片生成调色板，但会将文件发送至其服务器。本工具集成了放大镜、调色板提取、屏幕滴管、16色历史记录、HEX/RGB/HSL输出和一键复制——完全客户端运行，免费，无广告。
为设计师和开发者打造
每种输出格式均可一键复制到剪贴板：HEX用于CSS和Tailwind，RGB用于Canvas和代码，HSL用于系统化的调色板调整。找到了品牌色？UtiloKit的配套工具可进一步使用——在对比度检查器中检验其与文字颜色的对比，在颜色调色板生成器中构建和谐色系，或在颜色混合器中进行调色。
由于整个工具在客户端运行，加载快速，页面打开后可离线使用，不会因广告展示而拖延你的工作。拖入、点击、复制——整个流程就这么简单。在移动设备上，先捏合缩放以定位密集图片中的精确位置，再点击采样像素。
Frequently asked questions
怎么获取图片中某个颜色的十六进制代码？
将图片上传或粘贴到这里，然后点击你想要的像素——工具通过HTML Canvas读取像素值，立即显示HEX、RGB和HSL数值，并自动将HEX代码复制到剪贴板。放大镜会在光标周围显示单个像素，让你能精确点击到目标位置。全程不涉及服务器上传，一切通过HTML5 Canvas API在浏览器中完成，因此即时、私密，页面加载后可离线使用。对于抗锯齿文字或Logo边缘等难以点击的区域，可先用浏览器内置缩放功能放大后再点击。
不用Photoshop怎么从图片中取色？
使用这款免费的浏览器滴管工具：拖入图片，点击像素，复制颜色代码。无需安装任何软件，无需注册。相比Adobe Photoshop或Illustrator——国内订阅起步价约每月140元人民币——本工具完全免费。与macOS数字颜色计或Windows PowerToys颜色拾取器不同，本工具还能自动提取图片的主色调色板，一次获取所有主要颜色，而无需逐一点击。imagecolorpicker.com是最流行的专用替代品，但会将文件上传至服务器；本工具不会。
HEX和RGB有什么区别？
两者对同一颜色进行不同方式的编码。HEX将红/绿/蓝写成三组十六进制数对（#FF5733），是CSS和网页设计的标准格式；RGB使用三个0-255的十进制数——rgb(255, 87, 51)——在图像编辑器和代码中更常见。两者之间的转换是无损的，本工具对每个点击的像素同时显示两种格式。编写CSS或Tailwind类时用HEX；操作Canvas、WebGL或需要数字通道的图像处理代码时用RGB。两种格式描述的是相同的sRGB色点。
什么是HSL，什么时候应该使用它？
HSL通过色相（0-360°）、饱和度和亮度来描述颜色，在调整颜色时更加直观。你可以在不改变色相的情况下使颜色变亮或降低饱和度。CSS原生支持hsl()，因此设计师在构建调色板时常用HSL：上调亮度获得浅色，下调获得深色。取色器对每个像素同时显示HEX、RGB和HSL，方便复制适合你工作流的格式。在Figma、Sketch或Adobe XD中，HEX通常是最快的粘贴格式；在Tailwind或CSS自定义属性中，HEX和HSL都能很好地使用。
怎么从照片中提取配色方案？
只需加载照片——主色调色板会自动出现。工具将图片像素量化为色彩聚类并按频率排序，返回八个最主要的颜色色块及其HEX代码。点击任意色块可复制，或一次性复制整个调色板。Adobe Color和Canva的调色板生成器功能相同，但需要账号；Coolors.co可从照片生成调色板，但会将图片发送至其服务器。本工具的调色板提取完全在浏览器中运行——不上传任何内容，不需要账号，工作流中也没有广告打扰。
图片取色器是如何工作的？
图片被绘制到浏览器中的HTML Canvas元素上；点击时通过getImageData API读取该像素的红、绿、蓝值，并转换为HEX、RGB和HSL。由于Canvas在本地运行，完全不涉及服务器。放大镜使用第二个Canvas元素对光标周围的像素区域进行放大，让你能精确定位到正确的像素——即使是抗锯齿文字、Logo边缘或照片渐变等细节丰富的图片也不例外。
将图片上传到取色器安全吗？
使用本工具完全安全——图片仅加载到浏览器内存中，不会传输到任何地方。你可以在浏览器的网络面板中验证这一点：页面加载后不会发出任何请求。这对于未发布的设计稿、客户Logo和私人照片尤为重要。许多基于上传的取色器——包括imagecolorpicker.com和部分Canva功能——会将文件发送至服务器并临时存储。本工具在本地处理所有内容，关闭标签页后文件即消失，始终保存在你的设备上。
可以拾取屏幕上的颜色而不仅限于图片文件吗？
可以——"从屏幕取色"按钮使用EyeDropper API（Chrome和Edge支持），可采样显示器上任意位置的像素，包括其他窗口、应用和浏览器标签页。采集到的颜色与图片拾色一同显示在HEX/RGB/HSL面板和历史记录中。对于不支持该API的浏览器（Safari、Firefox），可用粘贴工作流代替：按PrtScn或Mac上的Cmd+Shift+4截图，然后直接Ctrl+V粘贴到本页——无需先保存文件。此方法同样适用于浏览器中的视频帧、PDF和任何实时网页。
如何从网站或Logo中匹配品牌色？
保存或截图Logo，拖入这里，点击品牌色并复制HEX。或者跳过截图步骤：使用屏幕滴管按钮，直接在另一个标签页中对实时网站进行采样。这比使用浏览器开发者工具检查计算样式更快，尤其是当颜色嵌入在SVG或图片资源中而非CSS属性时。拾色历史记录最多保存16个颜色，方便从多个来源收集完整的品牌调色板后再切换到设计工具。
一个配色方案应该有多少种颜色？
大多数实用的调色板有3-6种颜色：一个主色、一两个辅助色和强调色。提取器返回八个主色色块，供你选择最合适的子集——复制单个色块或取整套用于情绪板。实践中，四种颜色是很好的起点：一个主色、一个辅助色、一个中性色和一个强调色。Stripe、Linear等公司的设计系统使用紧凑调色板，对相同色相进行多种亮度和饱和度的变化，而不是使用许多截然不同的颜色。
设计师和开发者使用哪些颜色格式？
HEX用于CSS和网页工作（代码库和设计工具中最常见），RGB/RGBA用于屏幕和Canvas代码，HSL用于调色板构建和系统化调整，CMYK用于印刷输出。Figma、Sketch和Adobe XD都支持HEX、RGB和HSL。本取色器对每个像素同时显示HEX、RGB和HSL，无需手动转换即可复制适合工作流的格式。如果还需要CMYK用于印刷，将HEX粘贴到免费的在线转换器中即可——Canvas API不原生输出CMYK。
怎么从取色器中复制十六进制代码？
点击像素时HEX代码会自动复制到剪贴板。每个数值行、历史色块和调色板色片也支持点击复制——点击数值或色块即可复制。拾色历史记录最多保存16个颜色，方便在切换图片之前依次从同一张图片中采集多个色调。将鼠标悬停在色块上可在点击前预览数值。如果需要整个调色板列表，使用"全部复制"可获取所有八个逗号分隔的HEX代码，随时粘贴到CSS变量或设计文档中。
可以从PDF或视频帧中获取颜色吗？
可以——截取帧或页面，用Ctrl+V粘贴到取色器中（无需保存文件），或使用屏幕滴管在PDF或视频播放时直接采样。对于浏览器中打开的PDF，屏幕滴管通常最快：在Chrome中打开PDF，点击"从屏幕取色"，然后点击所需颜色。对于视频，先暂停在目标帧以获得最准确的采样。
为什么同一张图片在不同软件中显示的颜色略有不同？
浏览器在渲染图片时可能会应用颜色配置文件（ICC）转换，截图会继承显示器的颜色配置文件。取色器报告的是浏览器渲染后的实际sRGB像素值——即你在CSS中使用的值——对于网页工作来说是正确的。如果与Photoshop或Figma的显示存在差异，请检查显示器是否已校准为sRGB，以及图片文件是否嵌入了匹配的颜色配置文件。对于Logo资产，设计师最好直接提供品牌HEX值，而不是依赖提取。
本工具与imagecolorpicker.com和Adobe Color相比如何？
imagecolorpicker.com是使用最广泛的替代工具——提供单像素拾取和调色板提取，但会将图片上传至服务器并展示广告。Adobe Color可从照片中提取调色板，但需要Adobe账号，会将图片发送至Adobe服务器，且不提供带放大镜的单像素拾取；它是调色板工具，不是滴管。Canva的取色器内置于Canva编辑器，仅适用于Canva项目中的图片。macOS数字颜色计和Windows PowerToys颜色拾取器适用于屏幕采样，但不能从文件中提取调色板。本工具是唯一集成了放大镜、屏幕滴管、16色历史记录和调色板提取的免费全客户端方案——无账号、无广告、无上传。
