color-mix()截至2024年中尚未被Chrome、Firefox、Safari稳定支持，仅Chrome 111+开启实验标志后可试用，生产环境不可用，需用HSL手动插值或JS模拟实现混色。
color-mix() 在主流浏览器里还不能直接用
截至 2024 年中，color-mix() 函数尚未被 Chrome、Firefox 或 Safari 稳定支持（Chrome 111+ 开启实验性标志后可试用，但默认禁用；Firefox 未实现；Safari 无计划）。你写 color-mix(in srgb, red 50%, blue 50%)，绝大多数用户看到的只会是无效声明——浏览器直接忽略，回退到前一个有效颜色值。
这意味着：它目前不是生产环境可用的颜色混合方案，仅适合实验或渐进增强场景。
替代方案优先选 CSS 自定义属性 + HSL 调整
真要动态混色，最可靠的方式仍是手动计算或借助预处理器逻辑，再通过 CSS 变量注入。比如想让 --primary 和 --secondary 混出中间色：
body {
--primary: hsl(200, 100%, 50%);
--secondary: hsl(0, 100%, 50%);
/* 手动插值：色相取平均，饱和度/亮度按需加权 */
--mixed: hsl(100, 100%, 50%);
}优点是完全可控、100% 兼容；缺点是无法实时响应变量变化（除非配合 JS 计算并更新 style.setProperty）。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 纯 CSS 场景下，
hsl()比rgb()更易做线性插值 - 避免跨色相环直接平均（如红 0° 和蓝 240°，平均得 120° 绿——未必是你想要的“紫”），建议先归一化角度差
- 若需透明度参与混合，必须在 JS 中按 alpha 公式计算：新颜色 = 前色 × α + 后色 × (1 − α)
想试 color-mix()？得手动开 Chrome 实验标志
仅限本地开发验证逻辑，不用于线上：
- 访问
chrome://flags/#enable-experimental-web-platform-features - 启用该标志，重启浏览器
- 此时
color-mix(in srgb, #f00 70%, #00f 30%)才会生效 - 注意：
in srgb是当前唯一支持的色彩空间；in lch或in oklch尚未落地 - 错误写法如
color-mix(red, blue)（缺权重）或color-mix(in xyz, ...)（不支持）会静默失败
JS 中模拟 color-mix() 更实用
需要运行时混色（比如主题切换、图表配色），直接用 JS 解析颜色、加权计算、输出 RGB 字符串，比等 CSS 原生支持更省事：
function mixColors(c1, c2, ratio = 0.5) {
const [r1, g1, b1] = hexToRgb(c1);
const [r2, g2, b2] = hexToRgb(c2);
const r = Math.round(r1 * (1 - ratio) + r2 * ratio);
const g = Math.round(g1 * (1 - ratio) + g2 * ratio);
const b = Math.round(b1 * (1 - ratio) + b2 * ratio);
return `rgb(${r}, ${g}, ${b})`;
}关键点：
- 输入支持
#rrggbb、rgb()、命名色（需先转为 RGB） - ratio 为 0–1，0=全取 c1，1=全取 c2
- 别忘了处理 alpha——如果任一颜色带透明度，结果也应是
rgba() - 色域问题：RGB 线性插值可能产生过饱和或超范围值（如 >255），需 clamp
真正卡住人的往往不是怎么写函数，而是没意识到 color-mix 的“色彩空间”和“权重解释”在不同草案版本里变过三次——现在写的 demo，半年后语法可能就失效。
