我使用的 CMS 以十六进制值定义颜色变量。有没有办法使用 CSS 将该变量值转换为该颜色的较浅色调？

Question

我无法更改公司 CMS 中的 CSS 颜色变量，这些变量以 6 位十六进制值编写。我可以使用这些变量仅使用 CSS 来获得预定义颜色值的较浅色调吗？

编辑：我仍然需要颜色来引用变量。我正在为我们的 CMS 上托管的不同站点构建模板页面，并且不同站点为 --primary、--secondary 等变量设置了不同的颜色。所以我不能直接对模板进行静态 RGB 值转换，因为它需要能够无缝地复制并粘贴到不同的站点中。

我的公司使用专有的 CMS，它以六位十六进制值定义颜色值（--primary、--secondary、--neutral、--accent）。我不能改变那些。我试图将背景色定义为中性色的 50%。

不幸的是，我并不精通如何使用 javascript 或 jquery。自从我知道如何使用 .changeClass 以外的任何东西以来，已经很久很久了。这并不意味着我不能，只是我不知道除了复制和粘贴之外还能做什么。

所以理想情况下，我正在寻找一个简单的 CSS 解决方案，但如果我必须在我的页面中复制并粘贴一行，我绝对可以。

<style>
:root { /* This is all predefined and I have no control over it. */
  --primary: #e42525;
  --neutral: #606161;
  --secondary: #003d75;
}

.wrapper {
  background-color: rgba( var(--neutral), .5); /* Since my values are in hex, I can't use the rgba() function thing */
}

</style>

如果有一个简单的脚本我可以复制并粘贴到我的页面中，它将 --neutral 转换为 rgb 值并将该值定义为 --neutral-rgb 或类似的东西，我可以使用它。我只是对自己的剧本写作/理解能力没有信心。

或者，如果有办法说：

background-color: hsl( var(--neutral) + "f0");

或

background-color: calc( var(--neutral) * (50%));

那真是太棒了……

附：如果这个问题以前已经回答过，请不要把我钉在十字架上。我不确定如何正确表达它。我一直在业余时间自学 Sass，所以我才刚刚开始弄清楚这些东西。

非常感谢！

Answer 1

如果只是关于背景，请为背景使用额外的图层，您可以在其中应用不透明度：

:root { /* This is all predefined and I have no control over it. */
  --primary: #e42525;
  --neutral: #606161;
  --secondary: #003d75;
}

.wrapper {
  position:relative;
  z-index:0;
}
.one {
  --c:var(--neutral);
  --o:0.8;
}
.two {
  --c:var(--primary);
  --o:0.2;
}
.wrapper:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: var(--c,transparent);
  opacity:var(--o,1);
}

<div class="wrapper">some content without background</div>
<div class="wrapper one">some content with neutral color</div>
<div class="wrapper two">some content with primary color</div>

您甚至可以申请filter 并能够随意更改初始颜色：

:root { /* This is all predefined and I have no control over it. */
  --primary: #e42525;
  --neutral: #606161;
  --secondary: #003d75;
}

.wrapper {
  position:relative;
  z-index:0;
}
.one {
  --c:var(--neutral);
  --o:0.8;
  --f:brightness(20%);
  color:#fff;
}
.two {
  --c:var(--primary);
  --o:0.2;
  --f:hue-rotate(130deg);
}
.wrapper:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: var(--c,transparent);
  opacity:var(--o,1);
  filter:var(--f,none);
}

<div class="wrapper">some content without background</div>
<div class="wrapper one">some content with neutral color</div>
<div class="wrapper two">some content with primary color</div>