Color Picker：从屏幕选取任意颜色

什么是 Color Picker？

Color Picker 是一款免费的浏览器工具，让您通过 EyeDropper API 从屏幕上捕获任意颜色，或手动输入 HEX、RGB 或 HSL 格式的颜色值，即时查看所有主要颜色模型的转换结果。设计师在需要从截图、网站或设计稿中匹配颜色时会使用它，无需打开沉重的桌面软件。与操作系统原生取色器不同，该工具在单一界面中即时完成 HEX、RGB、HSL、HSB 和 CMYK 之间的转换，无需登录、无需安装，数据不会离开您的浏览器。

主要功能

• 从屏幕任意位置取色 — EyeDropper API 在 Chrome、Edge 及其他现代 Chromium 浏览器中激活系统级颜色采样器。点击任意像素，颜色即刻加载到工具中。
• 现代浏览器支持 EyeDropper API — 工具在运行时检测 API 可用性。在不支持的浏览器上，会显示明确提示，而非失效的按钮。
• 在 HEX、RGB、HSL、HSB、CMYK 间转换 — "All Formats"面板同时显示所有表示形式。修改任意输入字段，其余字段实时更新。
• 将颜色值复制到剪贴板 — 每种格式都有专属复制按钮。复制成功后，复制图标会被勾选标记替代两秒钟以确认操作。
• 颜色历史记录（支持者功能） — 最近使用的 50 种颜色存储在 IndexedDB 中，以可点击色块的形式显示。历史记录在页面刷新后仍保留。需要 Ko-fi 支持者订阅。
• 加载后可离线使用 — 所有转换逻辑在 JavaScript 中运行。页面加载后，断开网络连接也能正常使用。

如何使用 Color Picker

步骤一：打开工具并选择输入方式

导航至 Color Picker。工具以默认颜色 #3B82F6（中蓝色）打开。设置颜色有三种方式：

• 点击 Pick From Screen 按钮（吸管图标）使用 EyeDropper API
• 点击取色器面板右上角的小颜色色块输入框，打开浏览器原生颜色轮
• 直接在 HEX、R/G/B 或 H/S/L 输入字段中输入

步骤二：从屏幕取色（EyeDropper 方式）

点击 Pick From Screen。EyeDropper 激活期间，按钮标签变为"Picking..."。光标变为十字放大镜。点击屏幕上的任意像素，在大多数系统上包括浏览器窗口外的像素。工具捕获 hex 值，更新所有格式字段，并显示成功提示。采样颜色自动添加到历史记录面板。

步骤三：手动输入或调整颜色值

如果已知颜色值，可在任意输入字段中输入。HEX 字段接受带或不带 # 前缀的值。RGB 输入接受 0 到 255 之间的整数。HSL 接受 H（0–360）、S（0–100）和 L（0–100）。修改任意字段会同时重新计算并更新另外两种格式。

步骤四：查看所有颜色格式转换

向下滚动到主取色器下方的 All Formats 卡片。此面板显示完整的转换结果：HEX、RGB、HSL、HSB 和 CMYK。每行都有独立的复制按钮。点击任意格式旁边的复制图标，将该值写入剪贴板。

步骤五：重复使用历史记录中的颜色

之前选择的颜色以彩色色块的形式显示在 Recent Colors 面板中。点击任意色块，将该颜色重新加载到取色器和格式字段中。如有需要，使用 Clear 按钮（垃圾桶图标）清除历史记录。

实际应用示例

从网站匹配品牌颜色

您正在构建一个落地页，需要匹配浏览器标签中显示的客户徽标所用的精确紫色。点击 Pick From Screen，将光标悬停在徽标上并点击。工具捕获 hex 值，例如 #6B21A8，并立即显示 rgb(107, 33, 168) 和 hsl(276, 61%, 40%)。复制 CSS 文件使用的格式。

将 Figma 颜色转换为 CSS

您的 Figma 设计规范将颜色列为 rgb(234, 179, 8)。在 R 字段输入 234，G 输入 179，B 输入 8。HEX 字段更新为 #EAB308，HSL 显示 hsl(45, 93%, 47%)。复制 HEX 值用于 Tailwind 类 bg-[#EAB308]，或复制 HSL 用于 CSS 自定义属性。

查看某个 Hex 代码的实际效果

代码审查中出现 background: #1E3A5F，您想将其可视化。将值粘贴到 HEX 字段中。大型颜色预览色块填充该颜色（深海军蓝），标签文字颜色自动在黑白之间调整以确保可读性。您可以使用历史记录色块将其与其他颜色进行比较。

使用技巧与最佳实践

将历史记录面板用作临时调色板（支持者功能）。 工具为高级支持者在 IndexedDB 中存储最多 50 种颜色。逐一采样或输入颜色以构建小型调色板，每种颜色都成为可点击的色块，无需记录值即可随时返回。

EyeDropper 可用于任意像素，包括视频帧。 在目标颜色所在帧暂停视频，然后使用 Pick From Screen。API 采样渲染后的像素，而非压缩源文件。

输入 HSL 值以实现精确控制。 如果您想要特定色相下较低的饱和度，可直接在 H 和 S 字段中输入。HSL 更适合"相同颜色，亮度提高 20%"（将 L 增加 20）此类调整。

可分享的 URL 会编码当前颜色。 工具使用可分享的状态钩子，当前 HEX 值编码在页面 URL 中。复制浏览器 URL，即可向同事发送特定颜色。

共享设备前清除历史记录。 如果您选取的颜色涉及机密设计资产，请在交接设备前使用历史记录面板中的 Clear 按钮将其从 IndexedDB 中删除。

常见问题及故障排除

出现"不支持 EyeDropper"提示。 EyeDropper API 需要基于 Chromium 的浏览器（Chrome 95+、Edge 95+）。截至 2026 年初，Firefox 和 Safari 不支持该 API。在不支持的浏览器上，请使用原生颜色输入色块或手动输入值。

输入后 HEX 字段没有更新。 字段需要带或不带 # 的有效 3、4、6 或 8 位 hex 代码。#3B 等部分值可在输入框中接受，但只有输入完整有效代码后才会触发转换。

RGB 值超出范围。 每个 R、G、B 字段限制在 0–255 之间。输入超过 255 的值在失去焦点时会被修正为 255。parseInt 回退意味着非数字字符会被解析为 0。

复制的格式显示错误的值。 每个复制按钮复制其特定的格式字符串。请确保点击的是 All Formats 面板中您所需格式对应行的复制图标，而非主 HEX 输入行的图标。

刷新后历史记录不保留。 历史记录是使用 IndexedDB 的仅限支持者功能。如果您不是高级支持者，历史记录面板不会记录条目。如果在隐私/无痕模式下 IndexedDB 不可用，历史记录面板每次访问都会显示为空。工具会静默处理这种情况。

隐私与安全

Color Picker 使用 JavaScript 在您的浏览器中本地处理所有内容。没有颜色值、屏幕内容或使用数据会传输到任何服务器。EyeDropper API 仅捕获您点击的单个像素，不会进行屏幕截图或录屏。颜色历史记录存储在您浏览器的 IndexedDB 中，而非任何外部数据库。页面加载后，工具完全离线运行，可安全用于处理机密设计资产。

常见问题解答

Color Picker 是免费的吗？

是的，Color Picker 完全免费，无需注册。核心功能，即 EyeDropper 采样、多格式转换和剪贴板复制，均无需支持者账户即可使用。颜色历史记录、预设和工具备注等高级支持者功能可通过 Ko-fi 支持者订阅获得。

Color Picker 可以离线使用吗？

可以。页面加载后，Color Picker 无需网络连接即可使用。所有颜色转换逻辑均以 JavaScript 实现，在您的浏览器中运行。EyeDropper API 也是无需网络访问的浏览器原生功能。

使用 Color Picker 我的数据安全吗？

是的。没有颜色数据或屏幕内容会离开您的浏览器。EyeDropper API 仅在您点击时捕获一个像素值，不会截图或录屏。颜色历史记录仅存储在您浏览器的 IndexedDB 中。Glyph Widgets 无法从服务器端看到您选择了哪些颜色。

哪些浏览器支持 EyeDropper 按钮？

EyeDropper API 适用于 Chrome 95 及更高版本、Edge 95 及更高版本，以及其他基于 Chromium 的浏览器。Firefox 或 Safari 不支持此功能。工具在运行时检测支持情况，在不支持的浏览器上显示明确提示，而非失效的按钮。

工具输出哪些颜色格式？

工具可转换并显示 HEX（如 #3B82F6）、RGB（如 rgb(59, 130, 246)）、HSL（如 hsl(217, 91%, 60%)）、HSB（也称 HSV）和 CMYK。All Formats 面板同时显示全部五种格式，并为每种格式提供独立的复制按钮。

可以不使用吸管直接输入颜色值吗？

可以。您可以直接在 HEX、R/G/B 或 H/S/L 输入字段中输入。也可以点击小型原生颜色输入（Pick From Screen 按钮旁的彩色方块）打开浏览器内置颜色轮。三种输入方式均更新同一内部颜色状态。

历史记录面板可以存储多少种颜色？

历史记录面板最多存储 50 种颜色（支持者功能）。达到上限时，最旧的条目会被删除。历史记录保存在 IndexedDB 中，跨浏览器会话持久保留。此功能需要 Ko-fi 支持者订阅。

可以与他人共享特定颜色吗？

可以。当前颜色以可分享状态编码在页面 URL 中。选择颜色后，从浏览器地址栏复制 URL。当您的同事打开链接时，工具将加载该预选颜色并显示"Loaded from share"通知。您也可以使用页面底部的分享按钮直接发布到 Twitter、LinkedIn 或 Reddit。

工具支持透明度/Alpha 值吗？

当前工具主要处理完全不透明的颜色。HEX 输入字段接受 3、4、6 和 8 位 hex 代码（4 位和 8 位代码包含 Alpha 通道），但 RGB 和 HSL 输入不提供单独的透明度滑块。如果需要 RGBA 或 HSLA 值，可以手动在显示的 RGB 和 HSL 值后附加所需的 Alpha 值。

输入无效的 hex 代码会怎样？

HEX 输入字段在输入时接受部分或无效值。只有存在有效 hex 代码（带或不带 # 的 3、4、6 或 8 位字符）时，颜色转换才会更新。部分值不会导致错误，显示只会保持最后一个有效颜色。

相关工具

• Contrast Checker — 验证您通过 Color Picker 选取的前景色和背景色是否符合 WCAG 2.1 无障碍标准。
• Color Converter — 在主取色器界面未显示的其他颜色格式之间进行转换。
• 即将推出: Palette Generator — 从您选取的 hex 值出发，生成完整的调色板。
• 即将推出: Gradient Generator — 使用采样的颜色，通过可视化编辑器创建 CSS 渐变效果。

立即试用 Color Picker：Glyph Widgets Color Picker