配了五年颜色，每次改透明度都要把 RGB 值重抄一遍——Chrome 151 把这件事用一个函数彻底原生化了

你想给一个按钮加半透明背景色，你以前得把 RGB 三个通道的值全部重写一遍——Chrome 151 把这件事用一个新函数彻底原生化了。

这个函数叫 alpha()，属于 CSS Color Level 5。它的用法极度简单：

:root {
  --brand: oklch(60% 0.18 240);
}

.button {
  background: alpha(from var(--brand) / 40%);
}

就这么一行。颜色通道不动，只改透明度。

以前的解法有多烦

假设你的品牌色是个 OKLCH token，你想生成一个 30% 透明度的版本。以前的做法有三种：

第一种，直接硬写数值——把 oklch(60% 0.18 240 / 30%) 写死。这意味着要么复制一份 token 值，要么维护两套颜色变量，维护成本极高。

第二种，用 RGB 通道分离——rgb(var(--brand-r) var(--brand-g) var(--brand-b) / 30%)。这要求你的 token 本身就是三个分离的通道值。如果你用 OKLCH 或 HSL，就没法直接这么用。

第三种，用 opacity，但这会影响整个元素包括文字和子元素，通常不是你要的效果。

alpha() 的核心差异

alpha() 是相对颜色语法，只操作透明度通道，保留原始色彩空间的完整属性。

/* OKLCH 色彩空间，保留完整 perceptual 特性 */
background: alpha(from var(--brand) / calc(alpha * 0.5));

/* 固定透明度值 */
background: alpha(from #3b82f6 / 25%);

/* 相对调整：透明度减半 */
background: alpha(from var(--accent) / calc(alpha * 0.6));

关键词 alpha 可以用在 calc() 表达式里，指代原始颜色的透明度值，这让「在 hover 时透明度降低」这类需求变得极其简洁：

.card {
  background: alpha(from var(--surface) / 80%);
  transition: background 200ms;
}
.card:hover {
  background: alpha(from var(--surface) / 95%);
}

浏览器支持现状

Chrome 151 + Edge 151 已支持，Firefox 和 Safari 暂未实现。由于是渐进增强特性，不支持的浏览器会静默忽略这条规则，背景直接使用默认值，不影响页面功能。

和 oklch(from ...) 通用相对颜色的区别

CSS Color 5 定义了一整套相对颜色语法，alpha() 只是其中一个子集。通用相对颜色语法可以重写所有通道：

color: oklch(from var(--brand) calc(L * 0.8) c h / 50%);

但大多数实际场景中，设计师只改透明度而不改色相或亮度，alpha() 刚好满足这个最小需求，语法比通用版本更简洁。

下一步

如果你正在维护一套 design token 系统，现在就可以把透明色变量全部迁移到 alpha() 语法——原来需要单独维护的 --surface-overlay、--border-subtle 这类 token，可以直接用 alpha(from --brand / 20%) 替代，token 数量直接减半。