打印颜色变灰是因浏览器默认启用color-adjust: economy，需在@media print中同时声明color-adjust: exact和-webkit-print-color-adjust: exact才能保留颜色，且background-color受用户设置影响，十六进制颜色最稳妥。
打印时颜色全变灰，不是 CSS 写错了，是浏览器主动压制
Chrome、Edge 和 Firefox 默认启用 color-adjust: economy（旧名 -webkit-print-color-adjust: economy），这是浏览器级“省墨策略”，会把所有 color 和 background-color 强制降级为灰度或纯黑/白。哪怕你在屏幕样式里写了 color: #e74c3c，只要没在 @media print 里显式关掉它，打印时就等于没写。
这个行为不是 bug，也和打印机驱动无关——它是渲染引擎在生成打印快照前就做的预处理。所以别在 DevTools 的“print 模拟”里反复调色，那只是视觉示意，不反映真实输出逻辑。
必须同时声明 color-adjust: exact 和 -webkit-print-color-adjust: exact
只写 color: #c0392b 不起作用；只加 !important 也不起作用；只写其中一个前缀，部分浏览器仍会忽略。正确做法是：对需要保留颜色的元素，逐个声明两个属性：
-
color-adjust: exact（W3C 标准属性） -
-webkit-print-color-adjust: exact（Chrome/Safari 兼容必需） - 注意：
print-color-adjust: exact是过时别名，已废弃，不要用
示例：
@media print {
.status-danger {
color: #c0392b;
background-color: #fdf2f2;
color-adjust: exact;
-webkit-print-color-adjust: exact;
}
}
别用 * { color-adjust: exact; } 兜底——Firefox 对通配符支持不稳定，且会拖慢打印样式解析。
background-color 打印不出来？先看用户设置，再换方案
即使加了 color-adjust: exact，background-color 仍可能不出现，因为：
- Chrome 默认关闭“背景图形”打印选项（
Settings → Advanced → Printing → Background graphics） - Firefox 默认开启，但用户可手动关掉
- 你无法用 CSS 强制打开它，这是浏览器 UI 层控制项
更稳妥的做法：
- 关键区域（如标题栏）才用
background-color，并搭配深色文字（避免浅色文字+浅色背景） - 状态标签类元素优先用
border+box-shadow模拟色块，例如：border-left: 4px solid #007bff; - 完全避开渐变、
rgba()、background-image——它们在打印通道中基本被丢弃
颜色值选什么？十六进制最稳，别碰 hsl() 和命名色
打印时颜色映射受浏览器实现影响较大，推荐：
- 用
#hex或rgb()，比如color: #333或color: rgb(51, 51, 51) - 避免
hsl()、gray、darkblue等命名色，不同浏览器对它们的灰度映射不一致 -
rgba()的 alpha 通道在打印时一律被忽略，等同于rgb() - 慎用高饱和浅色组合（如
color: #f0f0f0; background-color: #222），打印后极易糊成一片
最后提醒一句：CSS 变量（--primary-color）不会跨媒体类型透传，@media print 里得重新赋值，否则就是 undefined。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
