截图捕获的是显卡合成后的最终像素，而DevTools显示的是未经色彩管理的CSS声明值，二者本质不同；macOS截图应用Display P3映射，Windows截图更接近直出sRGB，Chrome截图则主动禁用部分色彩管理。
截图工具捕获的是屏幕像素的最终输出，而浏览器 DevTools 显示的是 CSS 声明值——两者根本不在同一层，不是“颜色错了”，而是“你看到的不是同一个东西”。
截图 vs DevTools 显示值：它们压根不是一回事
DevTools 里看到的 #FF6B6B 或 rgb(255, 107, 107) 是原始声明值，不包含色彩空间解释、系统级色彩管理、DPR 缩放、滤镜叠加等运行时处理；截图则捕获显卡合成后的最终帧，已混入所有这些因素。
- macOS 截图（Command+Shift+4）走的是 Core Graphics 渲染管线，会应用 Display P3 映射（即使 CSS 声明的是 sRGB）
- Windows Snipping Tool 默认绕过色彩管理，直接抓取 framebuffer，结果更接近“直出 sRGB”，但受显示器 ICC 配置影响
- Chrome 的 “Capture area” 截图功能会主动禁用部分 color-management 行为，和真实屏幕输出有微小差异
- 如果你开了
backdrop-filter: blur(2px)或filter: brightness(0.9)，DevTools 不会显示这些对颜色的实时调制，但截图会忠实记录
为什么同一页面，不同截图方式结果差一截？
关键在是否经过浏览器合成器（compositor）和系统色彩管理模块。例如：
- 用
window.print()导出 PDF → 输出基于 CSS color profile（若未声明，默认 sRGB），但忽略系统色温补偿 - 用 Puppeteer 的
page.screenshot()→ 默认启用omitBackground: false，但渲染上下文不加载系统 ICC，结果偏“冷” - 用 macOS QuickTime 录屏再逐帧截图 → 经过 Core Animation + ColorSync，Display P3 设备上明显更粉
- 用 Figma 插件导出“当前视口” → 完全脱离浏览器，按设计稿色域（常为 Display P3）直接转码，和网页实际渲染无关
怎样让截图更接近 DevTools 声明值？
没有绝对一致的方法，但可大幅收窄偏差：
立即学习“前端免费学习笔记（深入）”；
- 在目标设备上关闭系统级“夜览模式”“True Tone”“自适应亮度”——这些会实时偏移所有像素输出
- 用
getComputedStyle(el).color获取计算后值，而非 Styles 面板里的原始声明；注意它返回的是rgb(255, 107, 107)这类字符串，要.trim()后才能用于 Canvas 或对比 - 避免在截图前触发强制重绘（如快速 resize 或 toggle class），否则 DPR 切换或抗锯齿状态可能不稳定
- 对关键色块，用 Canvas 手动绘制并读取
ctx.getImageData().data第一个像素的 RGBA 值——这才是该环境下的“落地色”
设计师交付切图时最容易忽略的一环
截图颜色不准，往往因为源头资产就携带了错误色彩元数据：
- Figma 导出 PNG 时没勾选「Convert to sRGB」→ 图片自带 Display P3 ICC Profile，浏览器渲染时与 CSS 的 sRGB 声明打架
- 用
pngcheck -v image.png查看是否含sRGBchunk；不含就说明浏览器大概率按默认色域瞎猜 - 别信“设计稿里这个红就是 #FF6B6B”——用 Safari / Chrome DevTools 拾色器点真实渲染区域，读出的
rgb()值才是你在该浏览器+设备上的真实通道值
真正可控的只有输入端：CSS 用 color(srgb 1 0.4196 0.4196) 显式声明 + fallback，图片导出必选 sRGB，截图前关掉所有系统级色彩干预——其余环节，交给设备和浏览器去算，你只能验证，不能假设。
