设计师
快速从品牌 Logo 或灵感照片中获取确切的十六进制代码。以像素级的精度构建您的调色板。
颜色选择器
使用我们免费的在线取色器从任何图片或屏幕中选取颜色。立即获取 HEX、RGB 和 HSL 代码。100% 私密，并在您的浏览器中运行。
广告
广告
取色器从图片或屏幕中提取颜色值，返回您点击的任何像素的 HEX、RGB 和 HSL 代码。它使用浏览器的 Canvas API 读取上传图片的像素数据，并使用 EyeDropper API（Chrome、Edge）从屏幕上的任何位置捕获颜色。所有处理都在本地完成——不传输任何图片或颜色数据。
从图片或屏幕取色，无需任何上传
上传图片或使用全屏取色器捕获屏幕上的任何像素。即时获取 HEX、RGB 和 HSL——全部在浏览器中本地完成。
所有格式
屏幕取色器
免费无限
使用步骤
- 1
选择方式
上传一张图片，或使用“从屏幕取色”按钮。
- 2
选取颜色
将鼠标悬停在图片上查看预览，点击即可捕获颜色。
- 3
复制代码
颜色会被添加到历史记录。点击复制其 HEX、RGB 或 HSL 值。
设计师和开发者的好帮手
开发者
从 UI 原型图中提取颜色值，直接在 CSS 中使用。无需打开设计软件即可获取 RGB 或 HEX 值。
广告
了解数字取色
数字颜色如何工作
数字显示器使用 RGB（红、绿、蓝）加色模型重现颜色。屏幕上的每个像素由三个子像素组成——红、绿、蓝——每个子像素可设置为 256 个亮度级别（0-255）。通过组合这三个通道，标准显示器可以产生 1670 万种颜色（256^3）。您从图片或屏幕选取的颜色值是该特定像素的 RGB 三元组，可以用多种表示法表示：HEX (#00BFA5)、RGB (rgb(0, 191, 165)) 或 HSL (hsl(174, 100%, 37%))。
使用我们的工具从图片中取色时，浏览器的 Canvas API 使用 getImageData() 读取点击位置的像素数据。这返回一个 Uint8ClampedArray，包含像素的 RGBA 值。Alpha 通道（0-255）表示透明度——0 完全透明，255 完全不透明。工具然后将 RGB 值转换为 HEX 和 HSL 以供显示。对于全屏取色，EyeDropper API 从显示器上的任何位置捕获单个像素的颜色，包括其他浏览器标签页和桌面应用程序。
为不同目的取色时，颜色空间很重要。sRGB 颜色空间是网页设计的标准——浏览器、CSS 和 HTML 使用它。然而，许多现代显示器支持更宽的颜色域（Adobe RGB、Display P3），可以显示比 sRGB 更饱和的颜色。对于网页设计，始终在 sRGB 中工作以确保跨设备颜色一致。
广告
实用取色工作流
设计师在多种工作流中使用取色器：从 Logo 图片中提取品牌颜色、从照片中构建调色板、在设计模型和实时网站之间匹配颜色，以及从屏幕上的任何位置捕获灵感颜色。EyeDropper API 对于最后一个用例特别强大——您可以从 Figma 中的设计、另一个标签页中的网站颜色，甚至桌面应用程序中的颜色取色，而无需先截图。
从图片构建调色板时，选取代表主色调的 3-5 种颜色。从最突出的颜色（通常是背景）开始，然后选取 1-2 种强调色，最后是中性色。选取颜色用于可访问性时，始终检查文本和背景颜色之间的对比度比。
广告
了解颜色代码
HEX (十六进制)
示例：#00BFA5。最常见的网页颜色格式。代表红、绿、蓝混合的六位代码。
RGB (红, 绿, 蓝)
示例：rgb(0, 191, 165)。定义红、绿、蓝光分量的强度 (0-255)。
HSL (色相, 饱和度, 亮度)
示例：hsl(174, 100%, 37%)。更符合人类直觉。色相是颜色类型，饱和度是强度，亮度是明暗。
与其他取色器的对比
流行的取色工具的并排对比。
| 功能 | NovaTools | ImageColorPicker.com | ColorHexa |
|---|---|---|---|
| 从图片取色 | Canvas API | ||
| 从屏幕取色 | EyeDropper API | ||
| HEX+RGB+HSL 输出 | 三种 | 仅 HEX | |
| 颜色历史 | 无限 | ||
| 隐私（无上传） | 100% 本地 | 上传图片 | |
| 离线工作 |
大多数在线取色器需要将您的图片上传到他们的服务器。我们的工具直接在浏览器中从 Canvas API 读取像素数据——您的图片从不离开您的设备。EyeDropper API 支持全屏取色，这是基于服务器的工具无法提供的。
常见问题
我的图片会被上传到服务器吗？
不会。您的隐私得到保证。所有处理完全在您的网络浏览器中进行。您的图片从未离开您的设备，我们也不会查看或存储它们。
“从屏幕取色”按钮是什么？
此功能使用浏览器内置的 EyeDropper API (Chrome/Edge/Opera)。它允许您从整个屏幕上的任何应用程序或窗口中选取颜色，而不仅仅是从浏览器中的图片中选取。
HEX, RGB 和 HSL 有什么区别？
HEX (#RRGGBB) 是网页设计的标准。RGB 使用 0-255 表示红绿蓝强度。HSL（色相、饱和度、亮度）对于人类调整颜色属性通常更直观。
哪些浏览器支持 EyeDropper API？
EyeDropper API 目前在 Chrome（版本 95+）、Edge（版本 95+）和 Opera（版本 81+）中受支持。Firefox 和 Safari 尚不支持。如果使用不受支持的浏览器，“从屏幕取色”按钮不会出现，但您仍可以从上传的图片中取色。EyeDropper API 是 W3C 草案规范，未来可能会扩展到其他浏览器。
可以选取多个颜色并保留历史吗？
可以。您选取的每种颜色都会自动添加到颜色历史记录中，显示在主颜色显示下方。每个历史条目显示色样、HEX 值、RGB 值和 HSL 值，每种格式都有单独的复制按钮。您可以选取无限数量的颜色。历史记录持续到刷新或关闭页面。
如何复制颜色值？
点击显示或历史记录中的任何颜色值（HEX、RGB 或 HSL）将其复制到剪贴板。复制的值格式化为 CSS 就绪字符串。工具使用 Clipboard API 实现可靠的复制。复制成功时会出现视觉确认。
可以使用此工具从网站取色吗？
可以，在支持的浏览器中使用“从屏幕取色”功能。导航到您要取色的网站，然后点击工具中的“从屏幕取色”按钮。浏览器将最小化我们的工具，让您可以选取屏幕上任何可见像素，包括其他浏览器标签页、桌面应用程序或操作系统 UI 的像素。
颜色值有多准确？
工具使用浏览器的原生颜色管道从图片或屏幕读取精确像素值。对于上传的图片，精度是完美的——工具读取图片文件的原始 RGB 值。对于屏幕取色，精度取决于显示器的颜色配置文件和校准。大多数现代显示器使用 sRGB 颜色空间，与工具的输出格式匹配。
您的隐私是我们的优先事项
此工具完全在您的浏览器中运行。您的文件不会被上传到服务器、存储或分析。
- 我们不上传、不存储、不分析您的文件。
- 您处理的一切都保留在您的设备上。
- 没有服务器端处理、没有云存储、没有分析。
即使您的互联网连接断开，您的文件也是安全的。
你可能还喜欢
继续浏览这个主题
相关指南
广告