alpha(): 只改透明度的颜色函数
想把一个现成的颜色「调淡一半」，传统做法要么改不动（颜色是字面量，没有透明度旋钮）、要么得整条重写。CSS Color 5 的 alpha() 把这件事收成一个函数：吃一个 origin color, 三个色度通道原样保留，只把 alpha
替换或缩放，结果仍在 origin 的色彩空间里。它是 relative color 语法 的单通道便捷形式——不必把 r g b / l c h 整套抄一遍。
和 relative color 完整写法是同一回事。 你今天就能用的 rgb(from teal r g b / 50%) 把 origin 拆成 r g b 三个色度通道 + 一个 alpha 通道，你只想动 alpha 时，那三个通道纯属陪跑。alpha() 就是把它们省掉的语法糖：alpha(from teal / 50%)
与 oklch(from teal l c h / 50%) 等价。它也不同于 color-mix(in srgb, teal 50%, transparent)——后者是「往透明里混」，在非线性空间里并不严格等于「把 alpha 设成 50%」。
1 · 替换 alpha: alpha（from color / 值）
斜杠后给一个 <alpha-value>（
的数或 0%–100%），直接覆盖 origin 的透明度，原 alpha 是多少都不再相关。拖滑块改透明度、换底色试不同输入，色块叠在棋盘格上才看得出穿透；右侧读数是 getComputedStyle 读回的真实结果色。
2 · 缩放 alpha: calc（alpha * 系数）
斜杠后不必是常量——relative color 把 origin 的透明度暴露成一个名叫 alpha 的 <number> 关键字（1.0 即 100%），可直接进 calc() 参与运算。于是 calc(alpha * .25) 就是「在原有透明度的基础上再打到四分之一」——origin 已有的 alpha
不同，得到的结果也不同。系数超过 1 时 alpha 在 [0,1] 处截断。
现状提醒： alpha() 这类单通道函数（还有规划中的按通道取值）出自 CSS Color 5，属实验特性，尚未进入 Baseline；它展开成的完整 relative color 写法 (rgb(from c r g b / alpha)) 才是各浏览器已普遍支持的那个。本页两处 demo 在支持
alpha() 的浏览器跑真函数，否则自动退回它的等价展开形式（并在读数里标注）——退回的那段恰好就是 alpha() 的语义定义。检测方式是运行期探针 CSS.supports('color', 'alpha(from red / 50%)')，不是猜版本号。
3 · 🔗 相关链接
- CSS Color 5 · Modifying alpha: the alpha() function · drafts.csswg.org——本页主要来源：
alpha()的语法定义、「替换 / 缩放」两种语义与规范示例。 - Using relative colors · developer.mozilla.org——relative color 语法全貌：
from关键字、各色彩空间的通道关键字（含alpha）如何解析成 number 进 calc。 - CSS relative color syntax · developer.chrome.com——大量「调一档色」实战：加深 / 调淡 / 改 alpha 配色板，即本页 fallback 形式的现成用法。