打印时颜色变灰或消失是浏览器省墨策略所致，需用color-adjust: exact、显式设色、禁用色彩管理并多浏览器测试。
print媒体查询里颜色变灰或消失怎么办
浏览器默认在打印时会弱化甚至丢弃部分颜色，尤其 background-color 和非黑色文字常被强制转为灰度或纯黑/白。这不是 bug，是多数浏览器（Chrome、Edge、Firefox）的省墨策略——但你写的是报表、发票或带品牌色的文档，这就得主动干预。
- 必须显式设置
color和background-color，不能依赖继承或默认值 - 禁用浏览器自动灰度：加
@media print { * { -webkit-print-color-adjust: exact; color-adjust: exact; } } - 注意
color-adjust: exact在 Safari 和旧版 Chrome 需要-webkit-前缀，否则无效 - 如果用了 CSS 变量（如
--primary-color），确保它们在@media print内被重新赋值，变量本身不会跨媒体类型“透传”
background-color 打印不出来？先看是否被覆盖
即使加了 color-adjust: exact，background-color 仍可能不出现——常见原因是用户浏览器设置了“背景图形”打印选项为关闭（Chrome 默认关，Firefox 默认开）。你无法用 CSS 强制打开它，只能引导用户手动勾选，或换更稳妥的方案。
- 优先用
border+box-shadow模拟浅色背景，例如：border-bottom: 4px solid #007bff; - 若必须用背景色，建议只用于关键区域（如标题栏），并搭配深色文字（避免白底黄字这种低对比组合）
- 测试时务必用真实打印预览（Ctrl+P → “另存为 PDF”），不要只靠 DevTools 的 print 模式模拟
print样式中该用什么颜色值
十六进制、RGB、HSL 都能用，但推荐优先选 rgb() 或具体 #hex，避免 hsl() 或命名色（如 darkblue），因为不同浏览器对命名色的打印映射不一致；而 rgba() 的 alpha 通道在打印时几乎总被忽略，等同于 rgb()。
- 文字色建议用明确的深灰或黑色：
color: #333;或color: rgb(51, 51, 51);，别用color: gray; - 需要强调的色块（如状态标签）可用高饱和度实色：
background-color: #e74c3c;，但需确认它在灰度下仍有足够对比度 - 慎用浅色文字配浅色背景（如
color: #f0f0f0; background: #222;），打印后极易糊成一片
Chrome 打印 PDF 时颜色偏淡的隐藏原因
不是你的 CSS 写错了，很可能是 Chrome 的“色彩管理”开关在作祟：如果系统级色彩配置文件（如 sRGB IEC61966-2.1）被启用，Chrome 会按该 profile 转换输出，导致印刷色值失真。这个开关不在网页里，而在浏览器设置深处。
立即学习“前端免费学习笔记（深入）”；
- 临时验证方法：在 Chrome 地址栏输入
chrome://settings/appearance→ 展开“高级”→ 关掉“使用硬件加速模式（如果可用）”，重启再试 - 更可靠的做法是在 CSS 中绕过色彩空间依赖：所有关键色值用 8 位 RGB 表达，避免 CMYK、display-p3 等扩展色域写法
- 如果项目面向企业内网打印，建议在部署说明里注明：“请在 Chrome 设置中关闭色彩管理，路径：chrome://flags/#force-color-profile → 设为 Disabled”
真正难的不是写对 @media print，而是让同一段 CSS 在不同打印机、不同驱动、不同用户设置下都稳定出色——所以每次改完，至少用 Chrome、Firefox、Edge 各导一次 PDF 对比色值，别信“看起来差不多”。
