程序化地变亮或变暗十六进制颜色(或rgb，和混合颜色)

这是一个我正在工作的函数，以编程方式使十六进制颜色变亮或变暗。只需要传入一个像“3F6D2A”这样的字符串来表示颜色(col)，并传入一个base10整数(amt)来表示要变亮或变暗的量。为了变暗，传入一个负数(即-20)。

我这么做的原因是，到目前为止，我找到的所有解决方案似乎都把问题复杂化了。我有一种感觉，只需几行代码就可以完成。请让我知道，如果你发现任何问题，或有任何调整，以加快它。

有趣的灯光上校(16号); return键(col . & 0x0000FF) + amt) | ((((col > > 8) & 0x00FF) + amt) < < 8) | (16 (col > >) + amt) < < 16) . toString (16); 的 / /测试控制台(照明颜色(“3F6D2A”，40);

对于开发人员来说，这里有一个更容易阅读的版本:

函数 LightenDarkenColor（col， amt） { var num = parseInt（col， 16）; var r = （num >> 16） + amt; var b = （（num >> 8） &0x00FF） + amt; var g = （num & 0x0000FF） + amt; var 新颜色 = g |（b << 8） |（第16<<条）; 返回 newColor.toString（16）; } 测试 console.log（LightenDarkenColor（“3F6D2A”， -40））;

最后一个版本可以处理开头可能有(也可能没有)“#”的颜色。加上调整不适当的颜色值:

function LightenDarkenColor(col,amt) {
    var usePound = false;
    if ( col[0] == "#" ) {
        col = col.slice(1);
        usePound = true;
    }

    var num = parseInt(col,16);

    var r = (num >> 16) + amt;

    if ( r > 255 ) r = 255;
    else if  (r < 0) r = 0;

    var b = ((num >> 8) & 0x00FF) + amt;

    if ( b > 255 ) b = 255;
    else if  (b < 0) b = 0;
    
    var g = (num & 0x0000FF) + amt;

    if ( g > 255 ) g = 255;
    else if  ( g < 0 ) g = 0;

    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}

好了，现在它不只是几行，但它看起来更简单，如果你不使用“#”，不需要检查颜色超出范围，它只是几行。

如果不使用“#”，你可以像这样在代码中添加它:

var myColor = "3F6D2A";
myColor = LightenDarkenColor(myColor,10);
thePlaceTheColorIsUsed = ("#" + myColor);

我想我的主要问题是，我说的对吗?这不是包括大多数(正常)情况吗?如果是的话，最快最小的方法是什么?我想在动画和小环境中使用，所以速度是这里的第一个最重要的因素，尺寸第二，准确性第三，可读性?嗯?不在要求清单上(对不起，我知道你们中有一半人正在泪眼汪汪!)

当前回答

我在c#中需要它，它可以帮助。net开发人员

public static string LightenDarkenColor(string color, int amount)
    {
        int colorHex = int.Parse(color, System.Globalization.NumberStyles.HexNumber);
        string output = (((colorHex & 0x0000FF) + amount) | ((((colorHex >> 0x8) & 0x00FF) + amount) << 0x8) | (((colorHex >> 0xF) + amount) << 0xF)).ToString("x6");
        return output;
    }

2020-05-22 18:42:04

其他回答

我做了一个优秀的xcolor库的移植，以消除它的jQuery依赖。里面有很多功能，包括调亮和调暗颜色。

实际上，将十六进制转换为RGB是一个完全独立于颜色变亮或变暗的功能。请保持衣物干燥。在任何情况下，一旦你有了RGB颜色，你可以把你想要的光级别和你必须的光级别之间的差值加到每个RGB值上:

var lightness = function(level) {
    if(level === undefined) {
        return Math.max(this.g,this.r,this.b)
    } else {
        var roundedLevel = Math.round(level) // fractions won't work here
        var levelChange = roundedLevel - this.lightness()

        var r = Math.max(0,this.r+levelChange)
        var g = Math.max(0,this.g+levelChange)
        var b = Math.max(0,this.b+levelChange)

        if(r > 0xff) r = 0xff
        if(g > 0xff) g = 0xff
        if(b > 0xff) b = 0xff

        return xolor({r: r, g: g, b: b})
    }
}

var lighter = function(amount) {
    return this.lightness(this.lightness()+amount)
}

更多信息请参见https://github.com/fresheneesz/xolor。

2017-01-17 02:52:06

我一直希望能够产生色彩的色调/深浅，这是我的JavaScript解决方案:

const varyHue = function (hueIn, pcIn) {
    const truncate = function (valIn) {
        if (valIn > 255) {
            valIn = 255;
        } else if (valIn < 0)  {
            valIn = 0;
        }
        return valIn;
    };

    let red   = parseInt(hueIn.substring(0, 2), 16);
    let green = parseInt(hueIn.substring(2, 4), 16);
    let blue  = parseInt(hueIn.substring(4, 6), 16);
    let pc    = parseInt(pcIn, 10);    //shade positive, tint negative
    let max   = 0;
    let dif   = 0;

    max = red;

    if (pc < 0) {    //tint: make lighter
        if (green < max) {
            max = green;
        }

        if (blue < max) {
            max = blue;
        }

        dif = parseInt(((Math.abs(pc) / 100) * (255 - max)), 10);

        return leftPad(((truncate(red + dif)).toString(16)), '0', 2)  + leftPad(((truncate(green + dif)).toString(16)), '0', 2) + leftPad(((truncate(blue + dif)).toString(16)), '0', 2);
    } else {    //shade: make darker
        if (green > max) {
            max = green;
        }

        if (blue > max) {
            max = blue;
        }

        dif = parseInt(((pc / 100) * max), 10);

        return leftPad(((truncate(red - dif)).toString(16)), '0', 2)  + leftPad(((truncate(green - dif)).toString(16)), '0', 2) + leftPad(((truncate(blue - dif)).toString(16)), '0', 2);
    }
};

2017-08-29 02:10:21

下面是一个基于Eric的回答的超级简单的一行代码

function adjust(color, amount) {
    return '#' + color.replace(/^#/, '').replace(/../g, color => ('0'+Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
}

例子:

adjust('#ffffff', -20) => "#ebebeb"
adjust('000000', 20) => "#141414"

2019-08-07 20:28:06

你的方法是可以的:)我简化了你的最短版本一点点(饱和度控制看这里)

(col,amt)=> (+('0x'+col)+amt*0x010101).toString(16).padStart(6,0)

// Similar to OP shortest version, we not have here # and colors range checking var LightenDarkenColor = (col,amt) => (+('0x'+col)+amt*0x010101).toString(16).padStart(6,0); // ------ // TEST // ------ function update() { let c= col.value.padEnd(6,'0').slice(0,6); let color = '#'+LightenDarkenColor(c, +amt.value); oldColor.innerHTML = 'Old: #'+c; oldColor.style = `background: #${c}`; newColor.innerHTML = 'New: '+color newColor.style = `background: ${color}`; } update(); .box{ width: 100px; height: 100px; margin: 10px; display: inline-block} <input id="col" value="3F6D2A" oninput="update()"> <input id="amt" value="30" oninput="update()"><br> <div id="oldColor" class="box"></div> <div id="newColor" class="box"></div>

和版本#和颜色范围检查

// # and colors range checking var LightenDarkenColor = (col,amt) => '#'+col.slice(1).match(/../g) .map(x=>(x=+`0x${x}`+amt,x<0?0:(x>255?255:x)) .toString(16).padStart(2,0)).join``; // ------ // TEST // ------ function update() { let c= col.value.padEnd(6,'0').slice(0,7); let color = LightenDarkenColor(c, +amt.value); oldColor.innerHTML = 'Old: '+c; oldColor.style = `background: ${c}`; newColor.innerHTML = 'New: '+color newColor.style = `background: ${color}`; } update(); .box{ width: 100px; height: 100px; margin: 10px; display: inline-block} <input id="col" value="#3F6D2A" oninput="update()"> <input id="amt" value="40" oninput="update()"><br> <div id="oldColor" class="box"></div> <div id="newColor" class="box"></div>

2019-12-04 17:20:52

我只是使用了“#”前面的十六进制数字。

var x = 0xf0f0f0;
x=x+0xf00; //set this value as you wish programatically
document.getElementById("heading").style = 'background-color: #'+x.toString(16);

更高的数字..颜色变浅

2020-08-16 13:38:40

程序化地变亮或变暗十六进制颜色(或rgb，和混合颜色)

推荐文章

最新文章

标签