如何为CSS变量定义的十六进制颜色添加透明度？

1. 用color-mix函数（首推，现代浏览器都支持） #

这是最省心的方式，不用改原有颜色变量的格式，直接混合透明度：

:root {
  --color: #ff0000; /* 你的基础红色变量 */
}

.target-element {
  /* 要得到#ff000099的效果，就给transparent设40%占比（99对应60%不透明度） */
  background: color-mix(in srgb, var(--color), transparent 40%);
}

原理是color-mix会把基础色和透明色按比例混合，直接生成带透明度的颜色值，完全不用手动拼接字符串。

2. 转成RGB格式用rgba #

如果需要兼容稍旧的浏览器，可以把颜色变量拆成RGB数值，再用rgba组合：

:root {
  --color-rgb: 255, 0, 0; /* 把#ff0000转成RGB数值 */
}

.target-element {
  background: rgba(var(--color-rgb), 0.6); /* 0.6对应十六进制的99 */
}

要是已经有了十六进制变量，也可以直接在rgba里转：

:root {
  --color: #ff0000;
}

.target-element {
  background: rgba(rgb(var(--color)), 0.6);
}

3. 直接用HSL变量定义 #

如果一开始就用HSL格式存颜色，调透明度会更顺手：

:root {
  --color-hsl: 0, 100%, 50%; /* 红色的HSL参数 */
}

.target-element {
  background: hsla(var(--color-hsl), 0.6);
}

HSL的第四个参数就是透明度，直接加就行，逻辑更清晰。

为啥你之前的写法没用？ #

你写的background:var(--color)99，CSS会把var(--color)替换成#ff0000，但解析器会把#ff0000和99当成两个独立的内容，不会自动拼成#ff000099这个合法颜色值，所以自然失效。

内容的提问来源于stack exchange，提问作者Fredy31