相对颜色语法中min()/max()不能直接用于hsl()参数内，必须通过css变量预计算明度值（如--l-clamped: max(15, min(90, calc(var(--l-base) - 20)))），再在hsl()中引用该变量，否则整条声明静默失效。
相对颜色语法不能直接限制明度上限
你不能写 color: hsl(from var(--c) h s min(90, l))——min() 在 hsl() 函数内部不被解析，浏览器会静默丢弃整条声明。相对颜色语法（hsl(from ...)、lch(from ...)）只接受简单算术表达式（如 l - 10），不支持函数调用或条件逻辑。
必须用 calc() 预计算明度值再注入
真正可行的做法是：把明度提取为独立变量，用 calc() 提前做边界控制，再传给 hsl()。这是目前唯一跨浏览器稳定生效的方式。
-
--l-base: 65→ 基础明度（无单位整数） -
--l-max: min(90, calc(var(--l-base) + 15))→ 用min()截断上限 -
--l-clamped: max(15, min(90, calc(var(--l-base) - 20)))→ 同时防下溢和上溢 - 最后在颜色中使用
hsl(var(--h), calc(var(--s) * 1%), var(--l-clamped))
注意：max()/min() 必须出现在变量声明里，不能嵌套进 hsl() 参数；Safari ≤15.4 不支持 clamp()，所以优先用 max(min()) 组合。
为什么不用 brightness() 滤镜替代？
brightness() 是视觉效果，不是颜色值本身：它不改变 computedStyle.color，无法用于生成新色值、无法参与 color-mix()、也不能作为 from 的输入源。它只是渲染层的后处理，对可访问性（如 contrast ratio 计算）、打印样式、截图还原都会造成偏差。
- 想让文字在浅背景上“不刺眼”，靠
brightness(0.9)会降低对比度，可能违反 WCAG - 想导出一个“安全提亮版”的品牌色用于按钮悬停，必须产出真实颜色值，而非滤镜叠加
- 深色模式切换时，滤镜不会自动反向，需 JS 手动重设，而变量方案天然响应
lch() 虽好，但兼容性仍是硬门槛
lch() 的 l 通道是感知均匀的，用 min(85, l) 确实比 HSL 更符合人眼预期，但它在 Firefox 中仍需 -moz-lch() 前缀，且旧版 Safari 完全不支持。如果你的目标是「所有现代浏览器（Chrome 111+/Safari 16.4+/Edge 111+）」，可以这样写：
color: lch(from var(--c) calc(min(85, l)) c h);
但只要项目还需兼容 Safari 15.x 或 Firefox 115 以下，就必须退回到 HSL + calc() 变量预计算的老路——这不是妥协，而是当前 CSS 颜色演进的真实水位线。
最容易被忽略的是：明度截断值不是固定数字，它得随基础色动态调整。比如深蓝（l: 25）提亮到 90 会发灰，而浅灰（l: 85）再加就过曝；所以 min(90, ...) 里的 90 往往得根据色相/饱和度经验微调，而不是抄个通用值完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
