在JavaScript中减少十六进制代码的亮度

Question

在JavaScript中减少十六进制代码的亮度

javascriptalgorithmhex

3

我希望用户可以输入一个随机的十六进制颜色代码，然后我的javascript代码会输出这个颜色的浅色版本(某种算法等等)。

以下是一个快速示例，说明我想要颜色如何更改：

用户输入的颜色代码：#2AC0A3

输出的浅色版本：#C6EEE6

非常感谢任何能提供帮助的人！

- aritro33

如果您能给出比一个例子更完整的“轻量级”定义，那么这将会更顺利。 - A. I. Breveleri

1

请点击此处查看如何以编程方式将十六进制颜色变浅或变暗的问题的解答：https://dev59.com/Um035IYBdhLWcg3wNdLg - jasonscript

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- M Oehm · Accepted Answer

通过与白色进行线性插值，可以轻松地让颜色变浅。同样的，通过与黑色进行插值，可以使颜色变暗。

这是一个函数，它接受一个颜色字符串，并根据 light 指示的亮度改变颜色：

function hex2(c) {
    c = Math.round(c);
    if (c < 0) c = 0;
    if (c > 255) c = 255;

    var s = c.toString(16);
    if (s.length < 2) s = "0" + s;

    return s;
}

function color(r, g, b) {
    return "#" + hex2(r) + hex2(g) + hex2(b);
}

function shade(col, light) {

    // TODO: Assert that col is good and that -1 < light < 1

    var r = parseInt(col.substr(1, 2), 16);
    var g = parseInt(col.substr(3, 2), 16);
    var b = parseInt(col.substr(5, 2), 16);

    if (light < 0) {
        r = (1 + light) * r;
        g = (1 + light) * g;
        b = (1 + light) * b;
    } else {
        r = (1 - light) * r + light * 255;
        g = (1 - light) * g + light * 255;
        b = (1 - light) * b + light * 255;
    }

    return color(r, g, b);
}

当light为负值时，颜色变暗；-1始终是黑色。当light为正值时，颜色变亮，1始终是白色。最后，0始终保持原始颜色：

当light为负值时，颜色会变暗；当light为正值时，颜色会变亮，而0则不会改变颜色。

alert(shade("#2ac0a3", 0.731));