配了八年颜色，每次改透明度都要把三个通道重抄一遍——今天 alpha() 把这件事彻底原生化了

配了八年颜色，每次设计师让你把主色加个半透明版本，你都得把 OKLCH 三个通道值重新抄一遍。今天 Chrome 152 把这件事彻底变了——alpha() 函数让 CSS 只改 alpha 通道，颜色本身不动。

八年都在重复的机械劳动

设计系统里颜色一般长这样：

--brand: oklch(60% 0.25 315);

想给按钮背景加 30% 透明度，以前只有两条路：要么用 opacity，但会把文字也变透明；要么用相对颜色语法，但得把三个通道值全重抄一遍：

/* 以前：三个通道值必须全写 */
background: oklch(from var(--brand) l c h / 0.3);

alpha() 出来之后，同一件事变成一行：

background: alpha(from var(--brand) / 0.3);

只动 alpha，颜色本身、颜色空间全部保留。这就是它的核心价值：把「改透明度」这件事，从需要了解颜色模型，彻底还原成一个只关心透明度的操作。

固定值、相对值、hover 场景都能覆盖

alpha() 的用法比你想象的灵活。

固定值：alpha(from var(--brand) / 0.5) → 50% 透明度，闭眼写。

相对原值：alpha(from var(--brand) / calc(alpha * 0.5)) → 在原透明度基础上打五折。alpha 这个关键字指代原始 alpha 值，所以 calc(alpha * 0) 是全透明，calc(alpha * 2) 是翻倍。

hover 场景，background 变 40% 透，文字色不动：

.button {
  background: alpha(from var(--brand) / 0.9);
  color: var(--brand);
}
.button:hover {
  background: alpha(from var(--brand) / 0.4);
}

color 属性里没有加 alpha()，所以文字始终不透明。只有 background 的透明度在变，这是 alpha() 相比 opacity 的本质区别：opacity 影响整棵 DOM 子树，alpha() 只影响它所在的属性。

颜色空间自动保留

无论你的 token 是 oklch、oklch、是 rgb 还是 hsl，alpha() 返回的颜色永远在原始颜色空间里。token 是 oklch，返回值也是 oklch；token 是 hsl，返回值也是 hsl。不需要额外转换。

opacity 和 alpha() 什么时候用哪个

记住一个判断原则：如果透明只影响背景/边框/阴影，不影响文字，用 alpha()；如果想整体淡入淡出整个组件，用 opacity。

比如弹层遮罩：

/* 正确：文字保持可读 */
.overlay { background: rgb(0 0 0 / 0.4); }

/* 错误：连文字都变透明了 */
.overlay { opacity: 0.4; }

浏览器支持：Chrome 152 刚出，Firefox 150 已稳定

alpha() 随 Chrome 152（2026 年 8 月 25 日）正式版一同发布，Edge 152 同步。Firefox 150（2026 年 4 月）已稳定支持，Safari 15.4 起进入早期支持。覆盖率：Chrome + Edge 合计约 65%，Firefox 约 27%，Safari 约 19%（iOS 占 16%）。Safari 目前属于「有限可用」状态，生产项目建议加 @supports：

.button {
  background: var(--brand-bg);
}
@supports (alpha(from var(--c) / 0.5)) {
  .button { background: alpha(from var(--brand-bg) / 0.8); }
}

写进设计系统之前，有一个工程建议

alpha() 能真正发挥的前提是：颜色 token 本身必须用 CSS 自定义属性存起来。如果你团队的颜色还是散落在各个组件里的十六进制值，alpha() 的价值折半。

建议现在的标准流程：

/* 只定义一次 */
:root {
  --surface: oklch(98% 0.01 240);
  --primary: oklch(60% 0.25 315);
}

/* 之后随便派生，通道值永不重复 */
.modal { background: alpha(from var(--surface) / 0.9); }
.card  { background: alpha(from var(--primary) / 0.15); }
.badge { border-color: alpha(from var(--primary) / 0.4); }

一套 token，alpha() 给你无限透明变体，通道值永不重复。这才是它真正把「颜色即代码」这件事说清楚了的地方。