javascript - 在 Javascript 中为给定的 HEX 值创建线性渐变

Question

我正在使用线性渐变背景图像绘制 DIV 背景。

background-image: linear-gradient(to bottom,  #cdeb8f 0%,#a5c955 100%); 

线性渐变看起来比简单的背景颜色更好。是否可以通过 javascript 为给定的 HEX 颜色创建这种线性渐变？

我的意思是我想将一个十六进制颜色值作为参数传递给一个函数，它应该返回一个更亮或更暗的十六进制颜色，这样我就可以创建上面好看的渐变。

如上给出，如果我通过

#cdeb8f 

它应该返回我

#a5c955

我将以上十六进制值转换为小数，发现它们的比率为 1.24。然后我使用一个函数将传递的 HEX 转换为 Decimal，将其乘以或除以 1.24，然后转换回 HEX。返回的 HEX 颜色未使用传递的 HEX 颜色创建有意义的线性渐变。

主要问题是要保持上面的比例，这样线性渐变才不会显得怪怪的。

Answer 1

您可以从这里开始。您还可以将比率作为参数传递。

取自 Tim's answer. 的十六进制和 RGB 转换函数

var div = document.getElementById("div");
var hex = "#cdeb8f";

gradient(hex, div);

function gradient(topColor, elm) {
    function hexToRgb(hex) {
        var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        hex = hex.replace(shorthandRegex, function(m, r, g, b) {
            return r + r + g + g + b + b;
        });

        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }

    function componentToHex(c) {
        var hex = c.toString(16);
        return hex.length == 1 ? "0" + hex : hex;
    }

    function rgbToHex(r, g, b) {
        return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
    }

    var ratio = 1.24;
    var top = hexToRgb(topColor);
    var r = Math.floor(top.r / ratio);
    var g = Math.floor(top.g / ratio);
    var b = Math.floor(top.b / ratio);
    var bottom = rgbToHex(r, g, b);
    var bg = "linear-gradient(to bottom,  " + hex + " 0%, " + bottom + " 100%)";
    elm.style.background = bg;
}

FIDDLE