写过前端的人都踩过这个坑——每次给颜色出半透明版本都要把 RGB 通道重写一遍，今天 CSS 用一个 alpha() 函数把这件事彻底原生化了

写过前端的人都踩过这个坑——每次给一个颜色出半透明版本，都要把它所有通道重写一遍。hex 要拆、rgb 要拆、hsl 要拆，设计师换个品牌色你得回来把所有副本改一轮。

今天 CSS 用一个函数把这件事彻底原生化了。

alpha() 是什么

这是 CSS Color Level 5 里的相对颜色语法，专门用来调任意颜色的透明度通道，其他通道原样保留。

:root {
  --brand: oklch(55% 0.22 270);
  /* 固定值：品牌色的 50% 透明度 */
  --brand-50: alpha(from var(--brand) / 50%);
  /* 相对值：在原始透明度上打折 */
  --brand-dim: alpha(from var(--brand) / calc(alpha * 0.6));
}

语法拆解：

• from <颜色>：原始颜色，可以是任何有效颜色值
• / <alpha值>：目标透明度，可以是固定值（50%）也可以是 calc(alpha * 0.5) 这样的相对表达式
• alpha 关键字：在 calc 内部引用原始颜色的透明度通道

和 rgba / opacity 的本质区别

这三者效果相似，但机制完全不同：

/* rgba：必须重写所有通道，原始颜色一变它不会跟着变 */
--overlay-rgba: rgba(80, 20, 120, 0.5);

/* opacity：作用于整个元素，文字也会变透明 */
.modal { opacity: 0.5; }

/* alpha()：从原始颜色派生，透明色始终和原始色保持一致 */
:root {
  --primary: oklch(55% 0.22 270);
  --primary-overlay: alpha(from var(--primary) / 0.5);
}
.card {
  background-color: var(--primary-overlay);
  /* 设计师把 --primary 换成新品牌色，overlay 自动跟着变 */
}

设计系统里的真实用法

最直接的价值：设计系统里只需要定义一套主色，其他透明度变体由 CSS 自动派生。

:root {
  color-scheme: light dark;

  --surface: oklch(98% 0.005 250);
  --surface-overlay: alpha(from var(--surface) / 0.85);

  --primary: oklch(55% 0.22 270);
  --primary-hover: alpha(from var(--primary) / calc(alpha * 1.1));
  --primary-disabled: alpha(from var(--primary) / 0.35);
}

.btn-primary {
  background-color: var(--primary);
}
.btn-primary:hover {
  background-color: var(--primary-hover);
}
.btn-primary:disabled {
  background-color: var(--primary-disabled);
}

浏览器支持

Baseline 2026 Newly Available（2026 年 9 月全面可用）：

• Chrome 151+（2026 年 7 月）
• Firefox 155+（2026 年 9 月）
• Safari 27+（2026 年 9 月）
• Edge 151+

全球覆盖率约 58%，生产环境建议配合 @supports 渐进增强：

@supports (background: alpha(from red / 50%)) {
  .overlay { background-color: alpha(from var(--brand) / 0.4); }
}
@supports not (background: alpha(from red / 50%)) {
  .overlay { background-color: rgba(80, 20, 120, 0.4); }
}

下一步

如果你正在维护一套 design token，现在可以把所有的 rgba(hex, 0.5) 替换成 alpha() 派生的形式——主 token 一变，所有透明度副本自动同步，不用再靠人工追踪。

你的设计系统里有没有手动维护透明度副本的习惯？试试用 alpha() 把它收编成一行 CSS。