原生css中可用hsl()函数通过调整lightness值实现shade（降低lightness）和tint（提高lightness），兼容性好且保色相；或用color-mix(in lch/oklch, base 70%, black/white 30%)生成更精准的变暗/变亮色，避免opacity污染语义。
怎么用 CSS 函数生成颜色的 shade（变暗）和 tint（变亮）
原生 CSS 没有 shade() 或 tint() 函数，但可以用 color-mix()（现代浏览器）或 hsl() 手动调光度（lightness）来可靠实现。别依赖 opacity 叠加灰层——那不是真正的 shade/tint，会污染透明度语义，且对背景色敏感。
推荐优先用 hsl()：改 lightness 值最直观、兼容性好（IE9+）、不依赖 alpha 通道。
-
hsl(200, 50%, 60%)是基准蓝；hsl(200, 50%, 40%)就是它的 shade（更暗） -
hsl(200, 50%, 80%)是它的 tint（更亮） - lightness 范围是 0%–100%，建议 shade 用 10%–40%，tint 用 70%–95%，避免纯黑/纯白丢失色相
color-mix() 怎么写才不出错
color-mix() 是 CSS Color Level 4 的新函数，Chrome 111+、Safari 16.4+、Firefox 119+ 支持，但写法容易踩坑：必须指定颜色空间，且不能混用不同空间的值。
- 正确写法：
color-mix(in lch, #3b82f6 70%, black 30%)（生成 shade） - 错误写法：
color-mix(in srgb, red, #000)——srgb空间下混合结果偏灰、不可控，官方推荐用lch或oklch - 想生成 tint？把
black换成white，比如：color-mix(in oklch, #3b82f6 80%, white 20%) - 注意：百分比总和必须为 100%，否则部分浏览器静默失败或回退到默认色
JavaScript 动态生成 shade/tint 时要注意什么
如果要在运行时批量生成一组变体（比如主题色系），别用字符串拼 hsl()——手动算 lightness 容易越界。用 chroma.js 或原生 Color 构造器（Chrome/Firefox 支持）更稳。
- 原生方案（需检查支持）：
new Color('#3b82f6').lighten(0.2).hex()（tint），.darken(0.3)（shade） - 降级 fallback：自己写 HSL 解析函数，重点校验 lightness 是否在 [0, 100] 区间，
Math.max(0, Math.min(100, l))必须加 - 别直接操作 HEX：RGB 转 HSL 再调 lightness 才能保色相；单纯减 R/G/B 值会导致偏色（比如红色变棕）
为什么 tailwind 的 bg-blue-700 不等于 hsl(... 70%)
Tailwind 的 color scale（如 blue-50 到 blue-900）不是线性映射 lightness，而是人工校准的感知均匀色阶。例如 blue-700 实际是 hsl(219, 91%, 30%)，lightness 是 30%，但视觉上比 hsl(219, 91%, 30%) 更“重”，因为同时降低了饱和度（saturation）来匹配设计意图。
这意味着：直接用 lightness 偏移生成的 shade/tint，和 Tailwind 同名 class 并不一致。如果项目已用 Tailwind，建议查它的源码 defaultTheme.colors.blue 获取真实值，而不是推算。
真正麻烦的是多色模式（dark mode + theme switching）——此时每个 shade/tint 都得单独定义，不能只靠一个 base color + delta 计算。漏掉这一层，换肤时按钮文字就可能在深色背景上看不见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
