此问题已在此处有答案：

How do I apply opacity to a CSS color variable?（16个答案）
3天前关闭。
我有一个HSL的颜色列表编码为CSS自定义属性，我想操纵他们的阿尔法通道。
What我试过：

:root {
  --color: hsl(25, 33%, 93%);
}

.test { box-shadow: ... hsla(var(--color), 1); }

在Web浏览器调试器中，检查styles选项卡，我观察到CSS规则是有效的，因为它没有被标记为无效。但是，切换到computed选项卡并展开box-shadow，显示计算结果为none。所以这个CSS语法看起来是正确的，但是浏览器（Chrome 112和Firefox 112）似乎没有呈现它。
如何将alpha通道添加到编码为CSS自定义属性的HSL颜色中？
有this messy SASS solution，但我不希望使用它，因为它需要太多的样板。