你想给按钮的背景色加个 10% 透明度，你以前得把 RGB 三个通道的值全部重写一遍——这件事 Chrome 153 把最优雅的解法放进了 CSS 原生函数里

设计师把主色调改了一个值，你的代码里有七个地方需要同步修改，因为每个透明度版本都是独立写的 hex 值。这就是传统 CSS 颜色最大的问题：颜色和透明度是绑定的，调透明度必须把颜色通道全部重抄一遍。

Chrome 153 正式把这个问题的最优解变成了 CSS 的内置能力。

alpha() 是什么

alpha() 是 CSS Color Level 5 规范里的新函数，Chrome 151 引入，Chrome 153 正式默认启用。它的功能很纯粹：取一个颜色，返回它的透明版本，只改 alpha 通道，其他通道原样保留。

/* 以前：想改透明度必须把三个通道全写一遍 */
color: oklch(from var(--brand) l c h / 0.1);

/* 现在：alpha() 只需要指定透明度 */
color: alpha(from var(--brand) / 0.1);

这个差异在 token 化的设计系统里格外明显。如果你的 --brand 存的是 OKLCH 值，用相对颜色语法你要写 oklch(from var(--brand) l c h / 0.1)，每用一个透明度都要重复一遍 l c h 三个字母。alpha() 把这个重复消掉了——你需要什么透明度，直接 alpha(from var(--brand) / 0.1) 就好。

MDN 文档对它的描述是：The alpha() CSS function takes an origin color and returns that same color with a modified alpha (transparency) channel，返回值和原始颜色在同一个色彩空间里。

什么时候用它

它最有用武之地的场景，是你在设计系统里定义了一组语义化的颜色 token，然后需要给不同状态生成对应的透明版本。

:root {
  /* 基础 token */
  --color-primary: oklch(62% 0.21 254);

  /* 用 alpha() 派生不同透明度版本 */
  --color-primary-hover: alpha(from var(--color-primary) / 0.8);
  --color-primary-active: alpha(from var(--color-primary) / 0.6);
  --color-primary-disabled: alpha(from var(--color-primary) / 0.35);
  --color-primary-focus-ring: alpha(from var(--color-primary) / 0.45);
  --color-primary-surface: alpha(from var(--color-primary) / 0.08);
}

每个 token 都引用同一个 --color-primary，只要设计师改了主色的 OKLCH 值，所有派生的透明度版本全部自动更新。不再需要为每个状态维护独立 hex，不再需要 SCSS/Less 的 lighten()、rgba() 包装函数。

它也支持基于原始透明度做相对调整：

/* 在当前透明度基础上减半 */
color: alpha(from var(--color-primary) / calc(alpha * 0.5));

/* 保证最小透明度不低于 20% */
color: alpha(from var(--color-primary) / clamp(0.2, alpha, 1));

这里的 alpha 关键字代表原始颜色的透明度值，可以在 calc() 表达式里直接使用。这是 CSS Color Level 5 规范里相对 alpha 语法的核心能力。

和 color-mix()、相对颜色语法的关系

alpha() 解决的是”同一个颜色、不同透明度”的问题。CSS Color 5 规范里还有两个配合使用的工具：

color-mix() 处理两个颜色之间的混合：

/* 把主色和白色按 8:2 混合 */
background: color-mix(in oklch, var(--brand) 80%, white);

相对颜色语法（oklch(from var(--brand) l c h)）处理在已有颜色基础上修改单个通道：

/* 降低亮度、保持色相和彩度 */
background: oklch(from var(--brand) calc(l * 0.9) c h);

三个工具各司其职：color-mix() 混合两种颜色，oklch(from ...) 修改颜色通道，alpha() 只改透明度。它们组合起来，构成了 CSS Color Level 5 完整的颜色操作工具链，覆盖了设计系统里 95% 的颜色派生需求。

浏览器支持：Chrome 153 先行，渐进增强

只有 Chromium 系的浏览器目前支持 alpha()。这不是问题：只要给不支持的浏览器提供降级方案，用标准的 rgba 或 hsla 写法写在 alpha() 声明前面即可：

/* 回退：直接用带透明度的 hex */
--color-primary-focus-ring: #4f46e580;

/* 现代浏览器覆盖 */
@supports (color: alpha(from #fff / 0.5)) {
  --color-primary-focus-ring: alpha(from var(--color-primary) / 0.45);
}

@supports 会在浏览器支持时触发覆盖，不需要任何 JavaScript 特性检测。渐进增强的成本极低。

下一步：今天能做的两件事

第一件（20 分钟）：把现有颜色 token 改成 OKLCH + alpha() 组合

找到你的 :root 里的基础颜色，把 hex 转成 OKLCH（Chrome DevTools 可以直接做到），然后用 alpha() 把现有的透明度派生版本全部替换成一行声明。比如原来有 --btn-primary-bg 和 --btn-primary-bg-hover 两个 token，改成 --btn-primary-bg: oklch(62% 0.21 254) 加一个 --btn-primary-hover: alpha(from var(--btn-primary-bg) / 0.85)，设计师改了主色，所有状态自动同步。

第二件（1 小时）：给你的设计系统引入透明度 token 标准

在你的设计 token 文档里定义一组固定的 alpha 级别：--alpha-hover: 0.85、--alpha-active: 0.6、--alpha-disabled: 0.35、--alpha-focus: 0.45、--alpha-surface: 0.08。所有组件在需要透明度时引用这些标准化 token 而不是现场计算。久而久之你的设计系统会有一个一致、可预测的透明度语言，颜色和透明度是解耦的。

CSS Color Level 5 把颜色操作从”需要预处理器的工程问题”变成了”浏览器原生支持的语言能力”。alpha() 是其中最小但最实用的一块——它让”同一颜色、不同透明度”这件事从需要重写三个通道变成只需要一个函数。Chrome 153 把它默认启用了，今天就可以用。

• 搜索来源：MDN Web Docs（alpha() 函数文档）+ Chrome Status（CSS Color Level 5 alpha() 功能状态）+ Web Platform DX explorer（alpha() 浏览器支持时间线）+ TechBloat（Color Alpha Anywhere，CSS alpha 透明颜色完整指南）+ Position Is Everything（Color Alpha Anywhere，CSS alpha 详解）+ What’s !important #13（alpha() 实战背景介绍）*