禁用态不能只降饱和度，因为亮度未同步调整会导致颜色发闷发浊、辨识度低；必须保持色相不变，将饱和度降至10%–25%，并依背景明暗相应提高（浅色ui）或降低（深色ui）亮度，再辅以opacity:0.65增强弱化感。
禁用态颜色辨识度低，本质不是“不够灰”，而是亮度和饱和度没配平——直接砍饱和度不调亮度，大概率会得到一块脏兮兮的灰斑。
禁用态为什么不能只降饱和度（S）？
只把 hsl(210, 60%, 50%) 改成 hsl(210, 10%, 50%)，结果是灰中带蓝、发闷发浊，尤其在浅色背景上几乎不可读。问题出在：L 值（亮度）没动，50% 的亮度配上极低 S，视觉上既不像禁用，也不像灰阶，反而像“脏了的按钮”。
- 饱和度（S）降到 10%–25% 是合理的，但必须同步调整亮度（L）
- 浅色 UI 下，L 得拉高（比如从 50% → 65%～85%），否则文字或图标会糊成一片
- 深色 UI 下，L 反而要压低（比如从 50% → 30%～45%），否则禁用按钮会“浮”在界面上
- 色相（H）必须保持不变，否则就脱离原色系，破坏一致性
怎么算出可用的禁用态 hsl 值？
别手算，用浏览器 DevTools 的颜色拾取器点一下原始色，它会自动显示当前值（比如 hsl(210, 60%, 50%)），然后按规则微调：
- 先固定 H 不变（例如保持
210） - S 降到 10%～25%，推荐起始值
15%（太低失色，太高仍有活力感） - L 按背景明暗选：
— 浅底：L 提到75%～85%（如hsl(210, 15%, 80%)）
— 深底：L 压到30%～45%（如hsl(210, 15%, 35%)） - 最后加
opacity: 0.65辅助弱化交互感（注意：这是叠加层，不是替代 hsl 调整）
常见错误写法及后果
这些看似“省事”的写法，实际会让禁用态在不同背景、不同模式下失效：
- 写成
color: gray或color: #ccc：色相漂移，蓝色按钮禁用后变冷灰，绿色按钮变暖灰，系统失去统一色系 - 只用
opacity: 0.5：按钮内容透出背景，深色背景上文字发虚，浅色背景上反差不足，且禁用语义被弱化 - 用
rgba(0,0,0,0.3)覆盖：直接抹掉原色信息，变成无意义的半透黑，与主色完全脱钩 - 把 L 降到
20%还不调 S：得到接近黑色的蓝块，可访问性失败（对比度不足）
深色模式下禁用态要单独处理
同一套 hsl() 值在深色模式里大概率翻车。比如浅色模式用的 hsl(210, 15%, 80%)，放到深色背景上会过亮、发灰、缺乏分量感。
- 深色模式禁用态建议：S 仍控制在
8%～12%，L 改为60%～70%（不是更低！） - 示例：浅色模式禁用
hsl(210, 15%, 80%)→ 深色模式对应hsl(210, 10%, 65%) - 用
@media (prefers-color-scheme: dark)包裹，或借助 CSS 自定义属性动态切换 - 千万别指望一套 hsl 值通吃两种模式——亮度感知是相对的，不是绝对的
真正难的不是算出一个禁用色，而是让这个色在各种背景、各种对比度、各种用户视力条件下，都明确传达“不可操作”这个信息。HSL 不是魔法，它只是把三个可控变量摊开给你调；调错一个，整个禁用态就塌一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
