可以独立设置十六进制颜色不透明度吗？

Question

是否可以独立设置十六进制颜色的 opacity 值（以避免重复），或者附加到 var() 例如var(--set1)1?

示例：

:root {
  --set1: #abc;
  --set1-1: #abc1;
  --set1-3: #abc3;
  --set1-5: #abc5;
}


pre {
  border-left: 4px solid var(--set1);
  background-color: var(--set1-1);
}

Answer 1

在不久的将来，感谢 "relative color syntax" 您可以执行以下操作

:root {
  --set1: #abc;
  --set1-1: rgb(from var(--set1) r g b / 80%);
  --set1-3: rgb(from var(--set1) r g b / 50%);
  --set1-5: rgb(from var(--set1) r g b / 30%);
}

将颜色转换为 rgb() 值，然后设置透明度。

浏览器不支持以上内容。在那之前，您必须手动编写颜色或使用 Sass 生成它们。

可以独立设置十六进制颜色不透明度吗？

Possible to set hex color opacity independently?

css

css-variables