hue-rotate() 是色相旋转而非替换，需原始色相集中（h±30内）才精准；杂色因原始h分散，应先用grayscale/sepia压平再旋转，或组合invert/brightness/saturate逼近目标色。
hue-rotate 为什么经常调不准颜色
不是角度没选对，是 hue-rotate() 对原始色相做的是“旋转”，不是“替换”。一张图里有红、黄、蓝三块区域，转 60deg 后，红色变黄、黄色变绿、蓝色变紫——它不会让三块都变成你的品牌蓝。你得先让原始 UI 元素的色相尽量集中，比如全用 HSL 的 h 接近 200 的蓝系，再统一旋转；否则结果就是杂色乱飞。
常见错误现象：filter: hue-rotate(180deg) 本想变蓝，结果按钮变紫、图标变青、边框变灰——因为原始像素的色相分布太散。
- 检查原图/组件：用浏览器开发者工具吸管取几个关键点的
hsl()值，看h是否集中在 ±30 范围内 - 预处理比硬调更有效：用
grayscale(100%)+sepia(100%)先压平色相层次，再叠hue-rotate() - 别依赖单次旋转：可组合使用，比如
filter: grayscale(1) sepia(0.8) hue-rotate(200deg)
品牌色是 #2563eb，怎么反推 hue-rotate 角度
不能直接换算。#2563eb 的 HSL 是 hsl(222, 70%, 46%)，但 hue-rotate() 不改变饱和度和明度，只动 h。如果你原始元素是 #3b82f6（hsl(210, 71%, 47%)），那差 12deg 就够；但要是原始是 #ef4444（hsl(0, 90%, 62%)），转 222deg 得到的是偏青的蓝，不是 #2563eb。
实操建议：
- 找一个最接近品牌色的原始色作为“基准色”，用在线 HSL 工具查它的
h值 - 计算目标
h与基准h的差值（注意：色相环是 360°，差值取最小角距，比如 350→10 是 +20，不是 +360） - 示例：基准色
hsl(215, 65%, 45%)→ 目标hsl(222, ...)，差值为7deg，写filter: hue-rotate(7deg) - 如果原始色没有明显主色，放弃
hue-rotate，改用filter: invert(XX) brightness(XX) saturate(XX)组合逼近
filter 在 SVG 和 CSS 中的行为差异
SVG 元素（如 <path></path>、<rect></rect>）上写 filter: hue-rotate(90deg) 是生效的，但作用对象是整个 SVG 渲染树；而给一个含 SVG 的 <img> 标签加 filter，效果取决于图片是否是内联 SVG 或外部文件——外部 SVG 文件受 CORS 限制，filter 可能被静默忽略。
容易踩的坑：
-
<svg></svg>内联时，filter作用在<g></g>或<path></path>上没问题；但若用了fill="currentColor"，先确保父级文本色已设为品牌色，否则hue-rotate无意义 - CSS 中对
<img src="icon.svg">加filter，Chrome 支持，Safari 旧版可能不渲染滤镜 - React/Vue 中动态插入的 SVG，若用
v-html或dangerouslySetInnerHTML，需确认内联 style 或 class 滤镜未被框架剥离
性能和可访问性影响不能忽略
filter 是合成层操作，hue-rotate 本身开销小，但一旦和 blur()、drop-shadow() 连用，就容易触发全图重绘，滚动时掉帧。更隐蔽的问题是：屏幕阅读器和高对比度模式下，滤镜后的颜色可能无法被正确识别为“按钮”或“链接”状态。
必须检查：
- 用 Chrome DevTools 的 Rendering 面板开启
Paint flashing，滚动时看是否大面积闪烁 - 在 Windows 高对比度模式或 macOS 的“增加对比度”开启后，确认关键控件仍可辨识
- 不要用
hue-rotate替代语义化颜色设置——比如把 disabled 状态也靠滤镜实现，应优先用opacity+ 显式color - 深色模式适配时，
filter不会自动反转，需配合@media (prefers-color-scheme: dark)单独重写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
