网页取色器：查看任意元素的 Hex 颜色代码

你想查看网页颜色，比如线上网站中某个按钮或标题的确切文字颜色或背景颜色，又不想对着截图去猜。SuperchargeInspect 正是为此打造的网页取色器。指向元素，颜色区域就会显示它的文字、背景和边框颜色。一键即可将十六进制代码复制到剪贴板。

颜色区域显示哪些内容

颜色区域会列出你所指向元素的颜色色块。

文字。元素的文字颜色，即浏览器绘制它时使用的 color 值。

背景。元素的背景颜色，即 background-color 值。

边框。边框颜色，仅在元素确实有边框时显示。

点击每个色块只会复制该色块的值，因此你可以逐个复制 CSS 颜色值，并粘贴到自己的样式表中。这些是该元素计算后的颜色，而不是整个页面的颜色。

复制出的颜色格式取决于颜色的透明程度。不透明颜色会输出为十六进制，即可直接粘贴到 CSS 中的简洁 #rrggbb 格式。下表列出了三种情况下各处给出的格式。

颜色	在面板中点击	复制参考文本	参考 PNG 页脚
不透明	`#rrggbb` 十六进制	原始 `rgb()` 值	十六进制
部分透明	原始 `rgba()` 值	原始 `rgba()` 值	8 位十六进制
完全透明	`transparent`	alpha 为零的 `rgba()`	`transparent`

“复制参考文本”会列出浏览器返回的原始值，让你准确看到计算结果。PNG 页脚则将这些值显示为十六进制，作为简洁的参考。SuperchargeInspect 不使用 HSL。

它仅适用于 CSS 颜色值。照片中的颜色、渐变或背景图片都不是 CSS 颜色值，因此不会显示为色块。

有一种情况需要了解：如果背景颜色显示为 transparent，你实际看到的颜色来自它后方的元素。用 Ctrl+Up（macOS 上为 Option+Up）移动到父元素，在那里读取颜色。

整个流程都可以用键盘完成。按 Alt+Shift+E 开始检查。方向键可移动到上一个或下一个元素。按住 Ctrl 并按 Up 或 Down，可移动到父元素或子元素。在 macOS 上，用 Option 代替 Ctrl。

按 Enter 锁定当前元素。按 Esc 返回选取状态或关闭面板。

SuperchargeInspect 在你的设备上本地运行，不发起任何网络请求。无需账号，后台也没有任何分析统计。

如何查看网页上某个元素的十六进制颜色值？

按 Alt+Shift+E 开始检查，然后指向元素。颜色区域会列出它的文字、背景和边框颜色。对于不透明颜色，点击色块即可复制十六进制代码，可直接粘贴到 CSS 中使用。部分透明的颜色会复制为原始 rgba() 值，参考 PNG 页脚则将其显示为 8 位十六进制。

能查看元素的背景颜色吗？

可以。指向元素后，颜色区域会显示一个“背景”色块，其中是该元素的 background-color 值。点击即可将该值复制到剪贴板。如果背景显示为 transparent，那么你看到的颜色其实来自它后方的元素，这时请移到父元素上读取。

透明或半透明颜色如何处理？

完全透明的颜色会复制为 transparent。部分透明的颜色会以原始 rgba() 值复制，其参考 PNG 页脚会以 8 位十六进制显示。不透明颜色保持六位 `#rrggbb` 十六进制格式。该扩展不使用 HSL。

能从图片中取色吗？

不能。它读取的是你所指元素的 CSS 颜色值，也就是浏览器绘制该元素时使用的计算颜色。它不会从照片或图片中读取颜色，也不会对屏幕上的某个点取样。这些值来自元素自身的样式。

它会把页面数据发送到任何地方吗？

不会。你读取、点击和复制的颜色都保留在你的设备上。SuperchargeInspect 在本地运行，不发起任何网络请求，无需账号，也没有数据分析。你检查的任何内容都不会发送到服务器。只有当你自己粘贴或分享时，颜色值或保存的 PNG 才会离开你的设备。