Css 如何使用calc（）在颜色值之间切换？

是否可以在CSS中使用

calc（）

函数来操作十六进制颜色值

在下面的CSS代码片段中，我想使用

--enable

变量在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)) )) */

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


：根目录{
--启用：0；
--禁用颜色：红色；
--启用颜色：#00ff00；
}
MyBtnStyle先生{
文本对齐：居中；
保证金：5px；
颜色：黑色；
填充：20px；
背景：
线性梯度(
var（--启用颜色）计算（100%*var（--启用）），
变量（--禁用颜色）计算（100%*变量（--启用）），
变量（--禁用颜色）计算（100%*（1-变量（--启用）））
);
}
一些文本
一些文本