如何使用calc()在颜色值之间切换？

Question

在CSS中，是否可以使用calc()函数来操作十六进制颜色值？

在以下CSS片段中，我想使用--enable变量在background-color属性的两个十六进制颜色值之间切换，这些颜色值为 MyBtnStyle ： --enable-color和--disable-color。

当使用rgb（r，g，b）颜色格式时，可以通过使用calc()计算每个颜色组成部分来实现这一点，但是我更喜欢直接在十六进制颜色值之间进行切换。

    :root {
        --enable: 0;
        --disable-color: #ff0000;
        --disable-r: 255;
        --disable-g: 0;
        --disable-b: 0;
        --enable-color: #00ff00;
        --enable-r: 0;
        --enable-g: 255;
        --enable-b: 0;
    }

    .MyBtnStyle {
        width: 100%;
        height: 100%;
        text-align: center;
        border: 2px;
        margin: 1px 1px;
        color: black;
        padding: 1px 1px;
        background-color: calc(var(--enable-color)*var(--enable) + var(--disable-color)*(1 - var(--enable))); 
    }

/* this works */
    /* rgb( calc(var(--enable-r)*var(--enable) + var(--disable-r)*(1 - var(--enable)) ), 
            calc(var(--enable-g)*var(--enable) + var(--disable-g)*(1 - var(--enable)) ), 
            calc(var(--enable-b)*var(--enable) + var(--disable-b)*(1 - var(--enable)) )) */

- Miroslav Radojević

Answer 1

你不能像你正在做的那样乘以十六进制值。一个技巧是使用渐变并控制颜色的百分比。这适用于任何颜色格式：

:root {
  --enable: 0;
  --disable-color: red;
  --enable-color: #00ff00;
}

.MyBtnStyle {
  text-align: center;
  margin: 5px;
  color: black;
  padding:20px;
  background:
   linear-gradient(
     var(--enable-color)  calc(100% * var(--enable)),
     var(--disable-color) 0
   );
     
 }

<div class="MyBtnStyle" style="--enable:1">some text</div>

<div class="MyBtnStyle">some text</div>

这里是另一种语法，您可以调整background-size：

:root {
  --enable: 0;
  --disable-color: red;
  --enable-color: #00ff00;
}

.MyBtnStyle {
  text-align: center;
  margin: 5px;
  color: black;
  padding:20px;
  background:
   linear-gradient(var(--enable-color) 0 0),
   var(--disable-color);
  background-size:100% calc(100% * var(--enable))
}

<div class="MyBtnStyle" style="--enable:1">some text</div>

<div class="MyBtnStyle">some text</div>

这里有另一个灵感来自这个答案的想法，您可以对文本或任何其他属性应用颜色，而不仅仅是背景。此技巧可以使用hsl（）着色。

:root {
  --enable: 0;
  --disable-color: red;
  --enable-color: #00ff00;
}

.MyBtnStyle {
  text-align: center;
  margin: 5px;
  color: hsl(0,100%, calc((1 - var(--enable))*100%));
  border:3px solid hsl(120,100%, calc((1 - var(--enable))*50%));
  padding:20px;
  background:
   linear-gradient(var(--enable-color),var(--enable-color)),
   var(--disable-color);
  background-size:100% calc(100% * var(--enable))
}

<div class="MyBtnStyle" style="--enable:1">some text</div>

<div class="MyBtnStyle">some text</div>

这可以帮助我们完全控制对比度。我们同时改变背景颜色和文本颜色。在黑白色之间（或同一颜色的两个版本之间），只需要控制亮度即可。

要表达任意两种颜色的组合，只需使用问题中定义rgb()颜色的代码即可。

---

另一个相关的问题获取更多技巧：如何根据

元素的高度或宽度更改其颜色？

- Temani Afif

---

哦，那太有趣了！又有一个技巧可以加入我的工具箱了。我很高兴自己只是个业余爱好者，所以不必太担心支持和一致性问题，因为只有我自己参与。^^ - Ben Philipp

Answer 2

color-mix 可以用来在两种颜色之间切换。

在下面的代码中，--toggle 变量被用来设置 --color1 作为（默认）背景颜色，当 --toggle 未设置或为 0 时，如果 --toggle 设置为 1，则使用 --color2。

这个方法的原理是因为 color-mix 在混合这两种颜色，但在任何给定的时间，只有其中一种颜色以 100% 的比例进行混合，并成为主导颜色。

（如果稍微调整一下数学计算，这种方法也可以适用于更多的颜色）

label {
  --color1: lightGreen;
  --color2: salmon;
  
  background: color-mix(in srgb, 
    var(--color1) calc(var(--toggle, 0) * 100%), 
    var(--color2) calc(100% - var(--toggle, 0) * 100%)
  );
  
  position: fixed;
  inset: 0;
  cursor: pointer;
}

label:has(:checked) {
  --toggle: 1;
}

<label><input type=checkbox hidden/></label>

- vsync