减轻javascript中的十六进制代码

ari*_*o33 1 javascript algorithm hex

我希望用户能够输入随机的十六进制颜色,而我的javascript代码会打印出该颜色的较浅版本(可以说是某种算法)

我想如何改变颜色的简单示例。

用户输入的内容:#2AC0A3

它吐出的是:#C6EEE6

非常感谢任何可以提供帮助的人!

M O*_*ehm 5

点亮颜色的一种简单方法是使用白色的线性插值。同样,可以通过插值黑色来变暗颜色。

这是一个采用颜色字符串并更改亮度的函数,该亮度由表示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);
}
Run Code Online (Sandbox Code Playgroud)

light为负时,颜色变暗; -1总是产生黑色。当light为正时,颜色变浅,始终为1会产生白色。最后,0总是产生原始颜色:

alert(shade("#2ac0a3", 0.731));
Run Code Online (Sandbox Code Playgroud)