MODERN CSS
颜色混合color-mix()
在 CSS 里按比例混合两种颜色，做悬停变深、禁用变淡、色调叠加，不用再手动算十六进制值。
效果预览
100%80%60%40%20%0%
适合用在哪
生成 hover/active 态、禁用态、浅色背景、与白色/黑色混合出的色调与阴影。设计令牌体系的利器。
容易踩的坑
- 用 in srgb 与白色混合浅色底，蓝紫色系会明显发灰，应改用 in oklch。
- 混合出的 hover 色与原色差异不足 5%，用户看不出状态变化。
- 混合后不复核对比度，浅色背景上的主色文字常跌破 4.5:1。
设计提示词 · Prompt
颜色混合（color-mix()）：语法 color-mix(in oklch, 主色 80%, #fff)。用途 —— hover 深色版本：color-mix(in oklch, var(--brand) 88%, #000)；禁用淡版：color-mix(in oklch, var(--brand) 42%, #fff)；半透明：color-mix(in srgb, var(--brand) 60%, transparent)（比手写 rgba 更易维护，因为主色改了这里自动跟着改）；提示底色：color-mix(in oklch, var(--brand) 12%, #fff)。强烈建议用 in oklch 插值，它比 srgb 更符合人眼感知，混出来的中间色不会发灰。支持度已很广（Chrome 111+、Safari 16.2+、Firefox 113+）。
color-mix(): syntax color-mix(in oklch, primary 80%, #fff). Uses — darker hover version: color-mix(in oklch, var(--brand) 88%, #000); faded disabled version: color-mix(in oklch, var(--brand) 42%, #fff); semi-transparent: color-mix(in srgb, var(--brand) 60%, transparent) (easier to maintain than hand-written rgba, since it follows automatically when the primary color changes); hint background: color-mix(in oklch, var(--brand) 12%, #fff). Interpolating in oklch is strongly recommended — it matches human perception better than srgb, so the mixed intermediate colors don't go gray. Support is already broad (Chrome 111+, Safari 16.2+, Firefox 113+).
常见搭配
同一页面里经常和「颜色混合」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-col" style="width:100%;gap:0">
<div class="mc-mix">
<i style="background:#4f46e5"></i><i style="background:#726bea"></i><i style="background:#9590ef"></i><i style="background:#b9b5f5"></i><i style="background:#dcdafa"></i><i style="background:#ffffff"></i>
</div>
<div class="mc-mix__n"><span>100%</span><span>80%</span><span>60%</span><span>40%</span><span>20%</span><span>0%</span></div>
</div>