取色器（屏幕与图片取色）

Windows 上的截图取色流程

Windows 用户最常见的情况是：浏览器没问题，但要取的颜色在另一个程序里。可以按 PrtSc 把整个屏幕放进剪贴板，或者按 Windows + Shift + S 框选区域，再按 Ctrl+C 复制截图（Microsoft 支持）。回到本页按 Ctrl+V，图片就出现在工具里。Mac 上在截图快捷键里加 Control，例如 Control-Shift-Command-4，截图会存进剪贴板而不是桌面（Apple 支持）。

实例：核对小程序导航栏颜色

微信小程序 app.json 的 window.navigationBarBackgroundColor 类型是 HexColor，文档示例写法是 "#ff00ff"（微信开放文档：全局配置），OKLCH 之类的写法不能用。假设设计规范要求用 WeUI 的品牌绿：WeUI 2.6.26 的样式表里 --weui-BRAND 是 #07c160。对设计稿截图取色，读到 #07c160，HEX 可以直接写进 app.json。

同一个颜色在其他字段是 hsl(148.7, 93%, 39.2%) 和 oklch(71% 0.189 151.2)。很多取色工具把 HSL 取整成 hsl(149, 93%, 39%)，换算回去是 #07c060，绿色通道差 1。本工具输出的每个字段都能换算回同一个 HEX：测试按 3 级步长遍历 sRGB 立方体（636,056 种颜色）用工具自己的解析器读回，另用 culori 读回 30,000 个随机颜色，全部一致。

实例：1 像素细节与半透明像素

用一张 2000 × 400 的测试图，红 #ff0000、蓝 #0000ff 两色 1 像素竖条交替。工具按原始分辨率读取，单点取样得到纯红或纯蓝，状态行写明坐标，例如「x 1000、y 200」；3 × 3 平均得到 rgb(85, 0, 170)，即一列红、两列蓝。照片和渐变上单个像素有噪点，用平均取样更稳。

PNG 里一个 #1a73e8、alpha 为 10/255 的像素，在 Chromium 的 canvas 里读回 rgba(26, 128, 230, 0.039)。canvas 按 alpha 预乘存储，越透明精度越差，工具会显示 alpha 并加提示。

取到的是哪个颜色空间

• 屏幕：EyeDropper API 返回 sRGB 的十六进制字符串（MDN）。在 macOS 上，Chromium 会先把取到的显示器颜色换算成 sRGB，再按每通道 8 位取整（skia_utils_mac.mm 的 CGColorRefToSkColor），广色域屏幕上超出 sRGB 的颜色会被截取。
• 图片：工具把图片画进 sRGB canvas 再读像素。CSS Color 4 规定浏览器要按图片内嵌的色彩配置文件显示（§3.4），没有配置文件的图片按 sRGB 处理（§3.5）。支持 Display P3 canvas 的浏览器（Chrome、Edge 92 起，Safari 15.2 起，Firefox 不支持）会多读一次 P3 值，像素超出 sRGB 时，工具给出提示，并保留 P3 值。例如 color(display-p3 1 0 0) 的 HEX 只能写成 #ff0000。
• 换算公式取自 CSS Color 4 示例代码，测试与 colorjs.io 对比，误差在 10⁻⁹ 以内。

与同类工具的差异

2026-10-01 在桌面版 Chromium 中用同一组文件实测。StarryTool 在线取色器同样按原图分辨率取色，也有放大镜和方向键微调。差别有两点：它的 HSL 取整，例如 hsl(210, 80%, 50%)；透明像素它显示 #1A80E60A，但不提示 RGB 是近似值。imagecolorpicker.com 把条纹测试图缩到 529 × 105 再取色，点哪里都是 #7f007f，原图里没有这个颜色。要比较两个取到的颜色的对比度，用颜色对比度检测器；要从一张图提取整套配色，用图像配色提取。

限制

• 超过 16,777,216 像素的图片会先缩小再取色（iOS 的 canvas 上限是 4,096 × 4,096，MDN），工具会写明缩小后的尺寸和每个像素平均了多少原始像素。
• 屏幕取色每次都要点按钮。没有用户点击时，open() 会以 NotAllowedError 拒绝；每次只取一个像素。
• 能打开的图片格式取决于浏览器，HEIC 只有 Safari 能打开。没有 EyeDropper API 时，也可以用 macOS 自带的数码测色计，或 Windows 的 PowerToys 取色器（Win + Shift + C）。
• 只输出 HEX、RGB、HSL、OKLCH、Display P3。需要 CMYK、Lab、HSV 时，把 HEX 粘贴到颜色转换器。