减轻javascript中的十六进制代码[重复]

Posted 2023-02-23

【中文标题】减轻javascript中的十六进制代码[重复]

【英文标题】：Lighten hex code in javascript [duplicate]

【发布时间】：2014-01-28 20:55:20

【问题描述】：

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

我希望如何更改颜色的简单示例。

用户输入的内容：#2AC0A3

它吐出什么：#C6EEE6

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

【问题讨论】：

如果你能给出一个比一个例子更完整的“更轻”的定义，这会好很多。

见这里：***.com/questions/5560248/…

【参考方案1】：

一种使颜色变亮的简单方法是使用白色进行线性插值。同理，可以通过黑色插值使颜色变暗。

这是一个接受颜色字符串并改变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 总是产生原始颜色：

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

【讨论】：

谢谢，这非常有帮助。不知道为什么它还没有得到更多的支持

这似乎很棒！我稍微重构了算法，并将我的十六进制项目 (github.com/rpearce/hex) 中的助手复制到任何人都可以使用的零依赖要点中：gist.github.com/rpearce/7806764b7ba2694ba27a849e3178db9e