如何通过JavaScript实现webkit-linear-gradient的相对颜色设置

需求说明 #

给定任意颜色，计算出与之保持固定色彩距离的另一个颜色：当参考色为#bb0303时，对应颜色为#e13c3b；当参考色为#e13c3b时，对应颜色为#bb0303，而非静态硬编码这两个值。

现有代码 #

function setRelativeColor(myElement,refColor)
{
    myElement.style.background='-webkit-linear-gradient(270deg,#e13c3b 0%,#'+refColor+' 100%)';
}

const myDiv=document.createElement('div');
myDiv.style.width='300px';
myDiv.style.height='80px';
setRelativeColor(myDiv,'bb0303');
document.body.appendChild(myDiv);

解决方案 #

1. 计算固定色彩差值

先将两个基准色转换为RGB值，算出它们的固定差值：

• #e13c3b → RGB(225, 60, 59)
• #bb0303 → RGB(187, 3, 3)
• 差值：ΔR=38，ΔG=57，ΔB=56

相对颜色计算逻辑：

• 若传入参考色是#bb0303，则目标色 = 参考色RGB + 差值
• 若传入参考色是#e13c3b，则目标色 = 参考色RGB - 差值
• 计算后需确保RGB值在0-255范围内，超出则截断到边界值（0或255）

2. 完整实现代码

// 辅助函数：十六进制颜色转RGB对象
function hexToRgb(hex) {
    hex = hex.replace(/^#/, '');
    const r = parseInt(hex.substring(0, 2), 16);
    const g = parseInt(hex.substring(2, 4), 16);
    const b = parseInt(hex.substring(4, 6), 16);
    return { r, g, b };
}

// 辅助函数：RGB对象转十六进制颜色
function rgbToHex(rgb) {
    const r = Math.max(0, Math.min(255, rgb.r)).toString(16).padStart(2, '0');
    const g = Math.max(0, Math.min(255, rgb.g)).toString(16).padStart(2, '0');
    const b = Math.max(0, Math.min(255, rgb.b)).toString(16).padStart(2, '0');
    return r + g + b;
}

// 计算相对颜色的核心函数
function getRelativeColor(refColor) {
    const deltaR = 38;
    const deltaG = 57;
    const deltaB = 56;
    
    const refRgb = hexToRgb(refColor);
    
    // 判断参考色类型，计算对应相对色
    if (refRgb.r === 187 && refRgb.g === 3 && refRgb.b === 3) {
        return rgbToHex({
            r: refRgb.r + deltaR,
            g: refRgb.g + deltaG,
            b: refRgb.b + deltaB
        });
    } else if (refRgb.r === 225 && refRgb.g === 60 && refRgb.b === 59) {
        return rgbToHex({
            r: refRgb.r - deltaR,
            g: refRgb.g - deltaG,
            b: refRgb.b - deltaB
        });
    } else {
        // 对任意其他颜色，默认按加差值计算（可根据需求调整方向）
        return rgbToHex({
            r: refRgb.r + deltaR,
            g: refRgb.g + deltaG,
            b: refRgb.b + deltaB
        });
    }
}

// 更新后的渐变设置函数
function setRelativeColor(myElement, refColor) {
    const relativeColor = getRelativeColor(refColor);
    myElement.style.background = `-webkit-linear-gradient(270deg, #${relativeColor} 0%, #${refColor} 100%)`;
}

// 测试代码
const myDiv = document.createElement('div');
myDiv.style.width = '300px';
myDiv.style.height = '80px';
setRelativeColor(myDiv, 'bb0303');
document.body.appendChild(myDiv);

// 反向测试
const myDiv2 = document.createElement('div');
myDiv2.style.width = '300px';
myDiv2.style.height = '80px';
myDiv2.style.marginTop = '10px';
setRelativeColor(myDiv2, 'e13c3b');
document.body.appendChild(myDiv2);

补充说明

如果需要更贴合人眼感知的色彩距离，可以将RGB转换为Lab色彩空间计算差值，但对于当前需求，RGB差值已经能满足固定色彩距离的要求。

内容的提问来源于stack exchange，提问作者Hezi-Gangina