sepia滤镜是叠加固定比例棕褐色蒙版而非调暖色，不改变色温或色相环；hue-rotate才是直接旋转色相环实现冷暖调节，二者组合需注意顺序与强度控制。
sepia滤镜不是调“暖色”，是加棕褐色蒙版
很多人以为 sepia(1) 就是让图变暖，其实它只是叠加一层固定比例的棕褐色（类似老照片效果），和色温无关。它不改变白点、也不移动色相环，只是按预设矩阵混合RGB通道。实际效果取决于原图——偏蓝的图加 sepia(1) 可能反而显得灰闷，而不是“暖”。
- 值为
0时完全无效果；1是最大强度（非线性，中间值不等于一半效果） - 对纯灰度图几乎没变化，对高饱和蓝/青色区域压制明显
- 和
contrast()或brightness()连用时顺序很重要：浏览器按滤镜声明顺序执行，sepia()放前面会削弱后续色相调整的感知度
hue-rotate才是真正转动冷暖关系的滤镜
hue-rotate() 才是直接操作色相环的工具，+180° 和 -180° 效果相同，±60° 就能明显区分冷暖倾向。比如蓝（240°）转 +60° 到 300°（品红）偏暖，转 -60° 到 180°（青）更冷。但注意：它作用于所有颜色，肤色、文字、图标都会跟着转，不是只调背景图。
- 典型冷调尝试：
hue-rotate(-20deg)（微调蓝青增强）或hue-rotate(-45deg)（明显偏青） - 典型暖调尝试：
hue-rotate(15deg)（黄橙倾向）或hue-rotate(30deg)（避开肤色失真区） - 别用
hue-rotate(180deg)调冷暖——它把所有颜色翻到对面，红变青、蓝变黄，不是自然冷暖过渡
组合使用时，顺序和取值范围很关键
单独用 hue-rotate 容易让图片发艳或灰，常需搭配 saturation() 和 brightness() 控制。而 sepia 和 hue-rotate 一起用，必须注意数学叠加不是“颜色混合”，而是逐像素做矩阵变换，结果不可直觉预测。
- 推荐顺序：
hue-rotate()→saturation()→brightness()→sepia()（把 sepia 放最后，避免干扰色相判断） -
sepia(0.3)+hue-rotate(20deg)比sepia(1)+hue-rotate(20deg)更可控 - Chrome 和 Safari 对
hue-rotate的浮点精度处理略有差异，-19.8deg 和 -20deg 在某些设备上渲染不同
真实项目里，优先考虑 color-scheme 和自定义属性
如果目标是适配深色模式或主题切换，硬写 filter: hue-rotate(25deg) 很难维护。现代做法是用 CSS 自定义属性配合 @media (prefers-color-scheme: dark)，把滤镜值抽成变量，再用 JS 动态更新。
- 避免在
img标签上直接写复杂 filter——改一个值要重算全部，且无法被 CSS-in-JS 工具提取 - SVG 图片可内联
- 滤镜对 GPU 加速友好，但连续动画中频繁修改
hue-rotate值（如 hover 过渡）可能触发重绘抖动，建议加will-change: filter并限制帧率
实际调色时，人眼对绿色系最敏感，hue-rotate 超过 ±15° 就容易让植物、草地看起来不自然；而 sepia 强度超过 0.4 后，阴影细节会快速丢失。这两个数字，比任何教程里的“推荐值”都更值得先试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
