你以为颜色只能靠一套代码写两遍？今天 Firefox 155 用一个函数把透明色彻底原生化了

你给按钮加了个 hover 效果，想把背景变透明一点——第一反应是再查一遍原来的颜色值，换成 rgba 或者在后面加个 /0.5，然后发现变量里存的是 #3b82f6，根本不是 rgb 格式，改起来要动两个地方。

这个问题以前没有标准答案。要么把颜色存成 rgb 格式留好 alpha 通道，要么写两套变量——一套正常色、一套透明色，维护成本直接翻倍。

Firefox 155 上个月悄悄支持了一个 CSS 函数，专门解决这个问题。

alpha() 函数是什么

它是 CSS 颜色模块 level 5 定义的相对颜色函数，语法极其简单：

/* alpha(原始颜色, 透明度) */
alpha(#3b82f6, 0.3)

它接受任意颜色值作为「来源色」，然后单独调整它的 alpha 通道，其他分量（色相、亮度、饱和度）原样保留。

这意味着你可以直接拿设计系统里现有的变量开刀，不需要改动任何颜色定义：

/* 之前：颜色存的是 hex，透明版本要另外写 */
--color-primary: #3b82f6;
--color-primary-hover: rgba(59, 130, 246, 0.15); /* 手动 rgba，还要再查一次 */

/* 之后：直接 derive */
--color-primary-hover: alpha(#3b82f6, 0.15);

/* OKLCH 颜色同样支持 */
--color-accent: oklch(55% 0.18 265);
--color-accent-overlay: alpha(var(--color-accent), 0.08);

alpha() 函数里的第二个参数接受三种写法：0~1 的小数、0%~100% 的百分比，以及 calc() 表达式。更有用的是 alpha 关键字可以嵌套引用自身：

/* 把原来的透明度减半 */
alpha(#3b82f6, calc(alpha * 0.5))

/* 限制在某个范围内 */
alpha(#3b82f6, clamp(0.1, alpha, 0.5))

为什么是「原生化」

在此之前，做一个颜色的透明变体有三条路： rgba/hsla 语法（要提前规划好颜色格式）、CSS 相对颜色语法（oklch(from var(--c) l c h / 0.2)，语法重、还要写完整颜色空间）、或者直接维护两套变量（维护负担大、容易不同步）。

alpha() 的存在意义是：专注、透明、不可扩展。它只做一件事——调 alpha 通道，其他原样通过，结果颜色永远和来源色在同一色彩空间（hex 就是 sRGB，oklch 就是 oklch），不需要你再指定一遍。

兼容性与渐进增强

截至 2026 年 9 月，Firefox 155（桌面+Android）和 Chrome 151+ / Edge 151+ 已经支持。Safari 还未支持，iOS 用户需要等待。

实际落地上，建议直接用 CSS 变量配合 @supports 写渐进增强：

/* 基础：维持不透明版本 */
.button { background-color: var(--btn-bg); }

/* 有支持时：自动叠加 hover 态 */
@supports background-color: alpha(#000, 0.1) {
  .button:hover {
    background-color: alpha(var(--btn-bg), 0.12);
  }
}

下一步

如果你正在维护一个设计系统，或者项目里有大量「同一个颜色 × 不同透明度」的场景，现在可以把那些手动维护的 rgba 变量扫一遍，替换成 alpha() + 原有变量。三行以内可以覆盖按钮、徽标、边框、遮罩四类常见需求。