冷色调需用 hue-rotate(-60deg 至 -120deg) 主导，辅以 brightness(1.05) 和 saturate(1.1)，避免 contrast() 和 grayscale() 误用，注意 Safari/IE 兼容性及移动端性能瓶颈。
用 filter: sepia() 和 hue-rotate() 混合调出冷色
纯靠 sepia(1) 只能发棕黄，不是冷色；真正可控的冷调得靠色相偏移。浏览器原生滤镜里没有“冷色开关”，但 hue-rotate() 能把图片整体往青蓝方向转——比如 hue-rotate(-90deg) 会让肤色变灰青、天空更湛蓝，视觉上立刻降温。
实操建议：
-
hue-rotate()值越负越冷，常见有效区间是-60deg到-120deg；超过-180deg开始反向变暖，容易翻车 - 单独用会失真（尤其人脸发青），建议叠加
brightness(0.9) saturate(0.8)保细节 - 别和
grayscale()连用——灰度后色相旋转无效，顺序错了就白写
避免 filter: contrast() 拉高导致发灰发飘
有人想靠提高对比度强化冷感，结果图片像蒙了层雾：高光炸裂、暗部死黑，冷色没出来，先丢层次。冷调的关键是“青蓝通道相对增强”，不是明暗拉满。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 优先调
hue-rotate()+ 小幅saturate(1.1)（只加 10%，过量会荧光） - 如需提亮，用
brightness(1.05)替代contrast(1.3)，后者会压缩中间调 - 在深色背景上预览效果——浅底看不出来发灰，换到暗环境才暴露问题
兼容性陷阱：filter 在 Safari 旧版和 IE 完全不生效
IE 全系无视 filter，Safari 9–13.1 对 hue-rotate() 支持不稳定（尤其 SVG 内嵌图）。如果项目必须兼容这些环境，不能只靠 CSS 滤镜。
可行退路：
- 用
手动读取像素，改 R/G/B 值（重点压红、提蓝，比如r *= 0.7; b *= 1.3;） - 服务端预生成冷色图，前端用
- CSS 里加
@supports (filter: hue-rotate(1deg)) { ... }做特性检测，fallback 到 desaturate+overlay
移动端性能警告：连续动画触发 filter 会掉帧
在 iOS Safari 上，用 transform 动画同时跑 hue-rotate()，GPU 很容易扛不住，滑动卡顿明显。这不是代码写错，是渲染管线真实瓶颈。
缓解方案：
- 冷色滤镜只用于静态展示，滚动/悬停动画里禁用
filter，改用opacity或transform: scale() - 必须动态调色时，用
will-change: filter提前声明，但别滥用——它会强制升层，内存涨得快 - 测试真机，别信 Chrome DevTools 的“模拟移动设备”帧率，它太乐观
