为何选择十六进制颜色码
在数字界面中，十六进制颜色码（如 #1E90FF）是 CSS 和设计工具中标注颜色的标准格式。与 RGB 函数记法（rgb(30, 144, 255)）或 HSL（hsl(210, 100%, 56%)）不同，六位十六进制码紧凑且不需要括号或逗号，可以直接写入 color、background-color 等属性。本页面的核心差异就在于此：它优先输出六位十六进制值，而将透明度作为独立信息报告（“Alpha ‹n›% – 此像素部分透明”），因为标准六位 hex 不包含 Alpha 通道。当你需要从图片中提取一个可直接复制到 CSS 文件中的颜色值时，这个页面是最直接的工具——无需额外格式转换。
页面还同时显示 RGB 和 HSL 值作为补充，但主输出始终是十六进制。如果你需要包含透明度的颜色值（如 rgba() 或 hsla()），请使用网站上的其他兄弟页面；本页面聚焦于不依赖透明度的纯粹颜色提取。
从图像中提取颜色的工作原理
输入与加载
用户从设备中选择一个图像文件。支持的格式包括：PNG、JPG、WebP、GIF、AVIF、HEIC。对应的 MIME 类型为 image/jpeg、image/png、image/webp、image/gif、image/avif、image/heic、image/heif。图像加载后，如果其最长边超过 4096 像素，工具会自动等比缩小，以保证浏览器处理性能。当图像准备好时，工具显示信息：“图像已就绪——移动鼠标进行采样，点击保存颜色。”
初始输出
图像加载完成后，工具立即以图像中心像素的颜色作为起点，显示十六进制、RGB、HSL 值和像素坐标。这避免了用户面对空白画布的困惑，即使还没移动鼠标，也能得到第一组颜色数据。
鼠标与键盘采样
- 鼠标操作：将鼠标指针移动到图像上，工具会逐像素地更新色值、坐标和放大视图。点击鼠标则保存当前采样的颜色。
- 键盘操作：可以使用键盘方向键在图像上移动一个十字准线，每次移动 1 像素。按住 Shift 键的同时按方向键，可以每次移动 10 像素。按 Enter 或空格键可以保存当前颜色。这一设计为无法精确使用鼠标的用户提供了替代方案，也适合需要微调像素选取的场景。
放大视图
在鼠标或键盘移动时，工具提供一个局部放大的视图，帮助你精确定位到目标像素。对于包含抗锯齿或压缩的图片区域，放大镜能让你看清相邻像素之间的过渡，避免误选模糊色。
透明度与 Alpha 通道的处理
十六进制六位颜色码本身不表示透明度。本工具采用如下逻辑：
- 如果采样像素是半透明的（Alpha 值 < 100%），则在色值下方显示一行提示：“Alpha ‹n›% — 此像素部分透明。”其中 n 为不透明度百分比（例如 50%）。
- 工具读取的是图像文件中该像素的原始值，不考虑它背后的背景内容。这意味着如果你在 Photoshop 中叠加了一个半透明图层并导出为 PNG，工具会报告该图层自身的 Alpha，而非与背景混合后的结果。
- 在保存颜色历史时，即使 RGB 值完全相同，但 Alpha 值不同的像素会被视为独立的条目分别保存。这是因为实际视觉效果不同，而且用户可能需要分别引用透明和实心版本。
注意：由于 JPEG 格式不支持透明度，JPEG 图像的所有像素 Alpha 都是 100%，因此不会显示透明度提示。GIF 有透明度但只有 0% 或 100% 两种状态。PNG、WebP、AVIF 支持多级 Alpha。
边缘情况与注意事项
压缩与抗锯齿的影响
JPEG 是有损压缩格式，其像素值经过量化与平滑处理。屏幕截图（尤其是保存为 JPEG 或经过压缩的格式）中的“纯色”区域实际上可能包含微小的颜色变化。使用本工具时，务必通过放大视图确认所选像素是否真正代表你想要的颜色。抗锯齿（anti-aliasing）会在文字和形状边界处产生介于前景和背景之间的过渡色，这些颜色常常带有小数 RGB 值，六位 hex 会将其四舍五入到最近的整数。工具显示的是四舍五入后的结果，即实际存储在图片中的字节值。
错误处理
- 如果用户拖入或上传了不支持的格式（例如 BMP 或 TIFF），工具显示：“不支持该文件类型。请尝试 PNG、JPG、WebG、GIF、AVIF 或 HEIC 图像。”
- 如果图像文件损坏或无法解码，显示：“无法打开该图像。它可能已损坏或采用不支持的格式。”
- 如果浏览器阻止了剪贴板访问（如某些安全策略），当用户点击颜色值尝试复制时，显示：“无法复制——您的浏览器阻止了剪贴板访问。”
“重新开始”按钮
该按钮会清除当前图像、清空颜色历史记录（最多 12 项）、重置所有显示值，使工具回到初始等待状态。注意：这不会影响浏览器历史或页面状态，只是一个本地重置。
保存与复制颜色
- 保存颜色历史：每次点击图像（或按 Enter/空格）会触发保存，并将该颜色的十六进制码加入历史列表。历史列表最多保存 12 项。点击列表中的色块，可以重新加载该颜色及其完整的 RGB/HSL 数据。
- 复制色值：点击页面上显示的十六进制、RGB 或 HSL 值，即可将其复制到系统剪贴板。复制成功时无提示，失败时显示错误消息。
- 重复颜色处理：如果连续两次点击相同的像素，或者不同像素产生相同的十六进制值，历史中会出现重复项。工具不做去重，因为用户可能希望保留多次选择（例如用于记录不同位置）。
支持的复制格式示例
- 十六进制：
#1E90FF - RGB：
rgb(30, 144, 255) - HSL：
hsl(210, 100%, 56%)
所有格式均使用标准 CSS 记法，可直接粘贴。
常见问题（FAQ）
问：为什么十六进制颜色码里没有透明度？
答：标准六位十六进制颜色码（如 #FF0000）只表示 RGB 三通道，不包含 Alpha 通道。CSS 规范中的八位十六进制（#RRGGBBAA）虽然存在，但浏览器支持和设计工具普及度较低。本页面坚持输出六位 hex，并将透明度单独显示为百分比，使其同时兼容新旧工具。
问：如何选择图片中一个精确的像素？
答：推荐两种方式：1）使用鼠标（配合放大视图）移动到目标位置；2）使用键盘方向键逐像素移动十字准线。如果图像较大，先大致用鼠标点击附近区域，再用键盘微调。
问：为什么图片加载后中间像素的颜色看起来不对？
答：这可能是因为图片在加载后被按最长边不超过 4096 像素缩放。缩放会执行重采样（通常为双三次插值），导致中心像素的色值与原图略有偏差。该偏差通常以整数 RGB 变化体现，但在纯色区域可能很常见。如果你需要完全无损的像素提取，请确保原始图片尺寸在该限制内，或者预先在外部工具中裁剪。
问：我能保存多少个颜色？历史记录有上限吗？
答：颜色历史最多可保存 12 项。超出后，新保存的颜色会挤掉最早的那个（队列替换）。历史列表中的颜色可以随时点击重新调用。
问：透明像素（Alpha = 0%）会被保存吗？
答：会的。如果像素完全透明（Alpha = 0%），工具显示“Alpha 0% — 此像素部分透明。”并可以向历史中保存它的 RGB 值。但注意，由于完全透明的像素不贡献任何可见颜色，它的 RGB 值可能是在图像文件中存储的任意值（通常为 0）。这种保存主要用于技术分析。
问：这个工具会上传我的图片到服务器吗？
答：不会。所有处理都在您的浏览器本地完成（客户端 JavaScript），图片数据不会被发送到任何服务器。这也是工具设计的一个原则——保护隐私。