直接用 color-mix(in hsl, ...) 或 hsl() 调整 lightness 可生成真正同色系的浅背景与深边框，避免 rgba() 或十六进制手动调值导致偏灰、失饱和或依赖底层颜色；现代浏览器已原生支持，兼顾语义性、可维护性与可访问性。
直接用 color-mix() 或 hsl() 调整亮度就能生成同色系的浅背景+深边框，不需要手动查色值或硬编码多个颜色变量。
为什么不能直接用 rgba() 或十六进制加亮/加暗？
因为 #64b5f6 这类颜色转成 RGB 后，简单调高 R/G/B 值会偏灰、失饱和；而 rgba(100, 181, 246, 0.1) 是半透明叠加，不是“浅色背景”——它依赖下层颜色，不可控。
- 真正同色系的浅色 = 提升 HSL 中的
lightness，保持hue和saturation不变 - 真正同色系的深色边框 = 降低
lightness，同样保持hue和saturation不变 - 现代浏览器（Chrome 111+、Firefox 117+、Safari 16.4+）已原生支持
color-mix(in hsl, ...)和hsl()的动态计算
hsl() 手动推算：适合需要兼容旧浏览器的场景
假设主色是品牌蓝 #005fcc，先转成 HSL：hsl(213, 100%, 40%)。那么：
- 浅色背景 → 把
lightness提到 92%：hsl(213, 100%, 92%)（接近浅灰蓝，不发白） - 深色边框 → 把
lightness降到 28%：hsl(213, 100%, 28%)（比原色更沉稳，不发黑） - 注意：饱和度别乱调，
saturation: 80%以上才保色感；低于 50% 就开始像灰调了
示例代码：
立即学习“前端免费学习笔记（深入）”；
button {
background-color: hsl(213, 100%, 92%);
border: 2px solid hsl(213, 100%, 28%);
}
color-mix() 动态混合：推荐用于 CSS 自定义属性系统
用 color-mix() 可以把一个基础色“往 white 或 black 方向混合”，语义清晰、可维护性强：
-
color-mix(in hsl, var(--brand) 70%, white 30%)→ 70% 主色 + 30% 白，得到柔和浅背景 -
color-mix(in hsl, var(--brand) 85%, black 15%)→ 加一点黑，加深但不脏 - 必须写
in hsl，否则默认在 sRGB 空间混合，结果偏灰 - 不支持 IE 和 Safari 16.3 及更早版本；可用
@supports (color-mix: red white)做降级
配合自定义属性使用更灵活：
:root {
--brand: #005fcc;
--bg-light: color-mix(in hsl, var(--brand) 70%, white 30%);
--border-dark: color-mix(in hsl, var(--brand) 85%, black 15%);
}
.card {
background-color: var(--bg-light);
border: 1px solid var(--border-dark);
}
容易被忽略的对比度与可访问性陷阱
浅背景 + 深边框看着协调，但 WCAG AA 要求文本与背景对比度 ≥ 4.5:1。如果背景太浅（比如 lightness > 96%），而边框又细（1px），用户可能根本看不出边界，尤其在低分辨率屏或弱视场景下。
- 实测建议：背景
lightness控制在 88%–94%，边框lightness控制在 20%–32%，粗细 ≥ 2px - 避免用
hsl(..., 0%, ...)（纯灰）做边框色——它和任何背景都缺乏色相锚点，视觉重量不足 - 深色模式下，这套逻辑要翻过来：深背景 + 浅边框，且需重新计算
lightness偏移量，不能简单复用同一组值
