color-mix() 是安全降饱和的正确方案，它在色空间内线性混合颜色值，避免 filter 导致的像素失真；需显式声明 in srgb 色彩空间、禁用 transparent/white 混合、按明暗模式分别定义比例，并配合 hsl 源头变量与语义化 fallback。
用 color-mix() 替代 saturate() 避免像素级失真
直接对元素整体加 filter: saturate(0.7) 会模糊文字边缘、扭曲图片细节，尤其在 macOS 和高分屏上明显。真正安全的降饱和，是只动颜色值本身，不碰渲染管线。color-mix() 正是为此设计：它在色空间内线性混合，输出仍是标准颜色值，无后处理副作用。
-
color-mix(in srgb, #4a6fa5 80%, gray 20%)等效于“把主色稀释掉 20% 的彩度”，比saturate(0.8)更柔和、不发虚 - 必须显式声明色彩空间：
in srgb是当前最稳妥选择；in oklch更感知均匀但兼容性差（仅 Chrome 119+） - 别用
transparent或white混合——它们不是中性灰，会导致色相偏移；gray是设备无关的基准灰
color-mix() 在深色模式下要重写混合比例
同一句 color-mix(in srgb, var(--primary) 70%, gray 30%) 在亮/暗模式下效果完全不同：深色背景上，30% 灰混进去会让颜色“浮起来”，反而更刺眼。必须按模式拆开定义。
- 亮色模式可接受
gray 25%–35%降饱和 - 深色模式建议改用
color-mix(in srgb, var(--primary) 90%, hsl(210 5% 20%) 10%)——用带青灰调的暗灰替代中性灰，避免发脏 - 第三方组件（如
button内置图标）若未透出 CSS 变量，得用属性选择器单独覆盖：button[disabled] svg { color: color-mix(in srgb, currentColor 60%, hsl(210 3% 15%) 40%) }
兼容性 fallback 必须用 hsl() 而非 rgb() 或十六进制
@supports (color-mix: normal) 包裹后，旧浏览器回退方案不能随便写个 #6b8cbf 了事——这个值在不同主题下不会响应变化，且和主色失去关联。回退必须保持可维护性。
- 正确 fallback：
color: hsl(210, calc(var(--base-s) * 0.6), var(--base-l));，其中--base-s和--base-l是原始 HSL 参数 - 禁用状态常用
hsl(210, 15%, 55%)这类低饱和+中亮度组合，比opacity: 0.6更保语义、更易读 - Safari 15.3 及更早版本不支持
color-mix()小数参数，@supports判断必须写全：@supports (color-mix: in srgb, red, blue)
别在 :disabled 上直接套 color-mix() 处理复选框
input[type="checkbox"]:disabled 本身无法被 color-mix() 影响——系统控件的外观不由 color 或 background 控制。强行加会无效，还可能干扰屏幕阅读器。
- 正确做法：给关联的
label加样式，并用color-mix()调整文字色与边框色，视觉上形成统一禁用感 - 示例：
input[type="checkbox"]:disabled + label { color: color-mix(in srgb, currentColor 70%, hsl(210 5% 70%) 30%); border-color: color-mix(in srgb, #4a6fa5 40%, #ccc 60%); } - 若用了自定义 checkbox（如伪元素模拟），必须同步设
aria-disabled="true"和tabindex="-1"，否则键盘用户仍能聚焦
真正难的不是写出那行 color-mix()，而是所有颜色都得从 HSL 源头定义、所有状态都得按明暗模式分别混、所有系统控件都得绕过直接样式去影响其周边元素。漏掉任意一环，降饱和就变成视觉断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
