1

我想做一个动态渐变。我有一种颜色，我想生成 5 种颜色的渐变，如下所示。例如。

background-image: -webkit-linear-gradient(top, 
rgba(235, 82, 164, 1.00) 0% ,
rgba(244, 49, 153, 1.00) 18% ,
rgba(245, 0, 130, 1.00) 56% ,// this color i have 
rgba(196, 0, 104, 1.00) 84% ,
rgba(171, 0, 91, 1.00) 100% );

有什么办法可以得到其他4种与原色相似的颜色，以获得良好的效果。（颜色顺序从浅到深）

4

1 回答 1

2

此功能内置于大多数 CSS 框架中，例如SASS、LESS等。如果您想知道它是如何完成的，请查看您选择的语言的源代码。然而，它是在样式表的编译期间完成的，因此一旦编译完成，规则就会作为静态代码生成。

例如，这是来自 LESS 源代码：

[...]
lighten: function (color, amount) {
    var hsl = color.toHSL();

    hsl.l += amount.value / 100;
    hsl.l = clamp(hsl.l);
    return hsla(hsl);
},
darken: function (color, amount) {
    var hsl = color.toHSL();

    hsl.l -= amount.value / 100;
    hsl.l = clamp(hsl.l);
    return hsla(hsl);
}
[...]

function clamp(val) {
    return Math.min(1, Math.max(0, val));
}
[...]
toHSL: function () {
    var r = this.rgb[0] / 255,
        g = this.rgb[1] / 255,
        b = this.rgb[2] / 255,
        a = this.alpha;

    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2, d = max - min;

    if (max === min) {
        h = s = 0;
    } else {
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

        switch (max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2;               break;
            case b: h = (r - g) / d + 4;               break;
        }
        h /= 6;
    }
    return { h: h * 360, s: s, l: l, a: a };
}
于 2012-10-23T09:49:52.907 回答