color-mix()可将主题色与白色混合生成柔和浅色背景，如color-mix(in srgb, var(--primary) 20%, white)得#e6f0ff；color-contrast()用于自动选合规文字色；深色文字宜用color-mix()降饱和微调；旧浏览器需静态fallback值。
直接用 color-mix() 从主题色生成浅色背景
主题色通常指品牌主色（比如 #4285f4），但直接拿它当背景容易刺眼或对比不足。现代 CSS 提供了 color-mix()，能在颜色空间里按比例混合主题色与白色/黑色，生成柔和、可读的背景变体。
关键不是“提纯”，而是“稀释”——把主题色往 white 方向混合，就能得到带品牌调性的浅灰背景：
body {
--primary: #4285f4;
background-color: color-mix(in srgb, var(--primary) 20%, white);
color: #1a1a1a;
}
这里 20% 表示主题色只占混合结果的两成，其余八成是白色，结果接近 #e6f0ff 这类柔和蓝底。数值越小，背景越亮；超过 30% 就开始显色过重，可能影响文字可读性。
注意：color-mix() 目前仅支持 Chrome 111+、Edge 111+、Safari 16.4+（需开启实验特性），Firefox 尚未支持。
color-contrast() 不适合直接生成背景，但能守住文字底线
有人误以为 color-contrast() 可以反向“推导”出适配背景，其实它只做一件事：给定一个背景色，从候选列表里挑最合规的文字色。它不生成新背景，也不修改背景本身。
所以如果你已经用 color-mix() 得到浅背景，下一步该用 color-contrast() 确保文字始终可读：
.card {
background-color: color-mix(in srgb, var(--primary) 15%, white);
color: color-contrast(var(--primary) vs black, white to WCAG21/AA);
}
这段代码实际效果是：哪怕你把 --primary 改成 #ffeb3b（明黄色），color-contrast() 也会自动选 black 而非 white，因为后者在黄底上对比度不够。
常见坑：别把 color-contrast() 的第一个参数写成背景变量以外的值，比如 var(--bg-color) —— 如果这个变量没定义或无效，整个声明会被浏览器忽略，文字会回退到继承色，而不是报错提醒你。
深色文字不是固定 #000，而是用 color-mix() 做“降饱和+微调明度”
直接用 black 或 #000 作文字色，在浅色背景上虽然对比够，但视觉重量太重，尤其小字号时易发虚。更优解是基于主题色生成一个“收敛版深色”：
- 先取主题色的
lch值（亮度、色相、色度），降低色度（chroma）至接近 0，保留其亮度倾向 - 再用
color-mix()向black混合少量（比如 10%），避免纯黑带来的生硬感
实操更简单：直接用主题色的暗面变体，再压一压：
:root {
--primary: #4285f4;
--text-dark: color-mix(in srgb, color(from var(--primary) l c h), black 10%);
}
这比硬写 #1a1a1a 更一致，也比 rgb(0 0 0 / 0.85) 更可控——前者依赖 alpha 叠加，后者受父级背景影响大；而 color-mix() 输出的是确定的不透明色值。
兼容 fallback 必须手动写，@supports 不能嵌套变量检测
当你依赖 color-mix() 和 color-contrast() 时，旧浏览器会直接跳过这些声明，导致背景或文字色变成初始值（通常是透明或继承色）。@supports 只能检测函数是否存在，无法判断变量是否有效：
@supports (color: color-mix(in srgb, red, blue)) {
.theme-card {
background-color: color-mix(in srgb, var(--primary) 20%, white);
color: color-contrast(var(--primary) vs black, white);
}
}
@supports not (color: color-mix(in srgb, red, blue)) {
.theme-card {
background-color: #f8f9fa; /* 浅灰 fallback */
color: #212529; /* 深灰 fallback */
}
}
重点：fallback 颜色必须是静态值，不能含 var(--primary) —— 因为 @supports not 区块内，浏览器根本不会解析变量，只会当作无效声明丢弃。这意味着你得为每种主题色预设一组 fallback，或者用 JS 注入兜底样式。
真正容易被忽略的点是：这些函数在 Safari 中默认关闭实验特性，用户需手动开启 “Web Compatibility” 实验选项；而多数生产环境不会提示用户去开，所以 fallback 不是可选，是必填项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
