css无法实现真正随机配色，因其无运行时随机能力；所有“css随机”均依赖js驱动，color-mix()和hsl()仅支持静态值，calc()不支持math.random()等函数调用。
color-mix() 和 hsl() 不能生成真正随机配色，calc() 也不支持 Math.random() —— CSS 没有运行时随机能力，所谓“CSS 随机”全是 JS 驱动的伪随机。
为什么不能用 CSS Math 函数实现随机
CSS 的 calc() 只做静态计算，不执行函数调用；Math.random() 是 JavaScript API，在 CSS 中直接写会语法报错。浏览器解析 CSS 时根本不会执行任何随机逻辑，所有值都是编译期或加载时一次性确定的。
- 写
--color: hsl(calc(0 + 360 * Math.random()), 70%, 60%)→ 直接无效，浏览器忽略整条声明 - Sass/Less 的
random()是构建时求值，刷新页面颜色不变，不是真随机 - 哪怕未来 CSS 加入
math-random()（目前无标准提案），也需配套运行时引擎支持，当前零浏览器实现
color-mix() 能否“模拟随机插值”
color-mix() 可线性混合两种已知色，但权重必须是固定数字，无法动态变化 —— 它适合做可控渐变起点，不是随机发生器。
- 合法写法：
color-mix(in srgb, #2563eb 70%, #1e40af 30%)，70% 和 30% 是字面量，不能是变量或表达式 - 想让每个标签用不同比例？必须 JS 计算后写入
style.setProperty('--mix-ratio', '70%')，再在 CSS 里用var(--mix-ratio)—— 但color-mix()不接受变量作为权重参数，此路不通 - 常见误试：
color-mix(in srgb, #f00 var(--w1), #00f var(--w2))→ 浏览器报错或回退为默认色
hsl() + calc() 做“可控伪随机”的边界在哪
你可以用 calc() 算色相偏移，比如 hsl(calc(var(--base-h) + 30), 65%, 55%)，但这只是固定偏移，不是随机；真要多样性，仍得靠 JS 注入初始值。
-
--base-h必须由 JS 设置，例如：el.style.setProperty('--base-h', Math.floor(Math.random() * 360)) -
calc()只能做加减乘除，不能调用Math.floor或取模，所以calc(var(--h) % 360)无效 - 明度/饱和度联动（如
l: calc(65 - var(--s) * 0.3)）可行，但前提是--s已由 JS 提前设定 - 别指望
hsl(calc(...), calc(...), calc(...))自动产生新颜色 —— 所有 calc 输入都得是已知数
真正容易被忽略的是：所谓“CSS 随机配色”，本质是 JS 控制权 + CSS 变量承载 + color 函数渲染的三段协作；任何试图把随机逻辑塞进 CSS 本身的做法，都会卡死在语法层或运行时。颜色函数越强大（如 oklch()、color-mix()），越需要 JS 提前算好输入值——它们是颜料，不是画笔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
