Javascript 以编程方式使十六进制颜色（或rgb和混合颜色）变亮或变暗

这是一个我正在使用的函数，它通过编程将十六进制颜色调暗或调暗一定量。只需输入一个字符串，如颜色（

col

）的字符串“3F6D2A”，以及用于变亮或变暗量的base10整数（

amt

）。要变暗，请输入负数（即

-20

）

我之所以这样做是因为我找到了所有的解决方案，到目前为止，它们似乎使问题过于复杂。我觉得只要几行代码就可以完成。请让我知道，如果你发现任何问题，或有任何调整，使之加快

函数颜色（col，amt）{
col=parseInt（col，16）；
返回（（col&0x0000FF）+amt）|（（（col>>8）&0x00FF）+amt）>16）+amt您是否考虑过rgb>hsl转换？然后只需上下移动亮度？我会这样做

快速查找一些算法后，我找到了以下站点

PHP:


Javascript:

编辑上述链接不再有效。您可以查看或的git hub

或者，另一个StackOverflow可能是一个好地方


尽管这不是OP的正确选择，但以下是我最初建议的代码的近似值。（假设您有rgb/hsl转换函数）

这假定：

您有函数
hslToRgb
和
rgbToHsl
参数
colorValue
是一个字符串，格式为#RRGGBB
虽然我们讨论css时，有一种语法可以指定IE9/Chrome/Firefox。
我尝试了你的函数，但有一个小错误：例如，如果某个最终的“r”值仅为1位数字，结果会像“a0a0a”，而正确的值为“0A0A”。
我只是通过添加这个而不是您的报税表来快速修复它：

var rStr = (r.toString(16).length < 2)?'0'+r.toString(16):r.toString(16);
var gStr = (g.toString(16).length < 2)?'0'+g.toString(16):g.toString(16);
var bStr = (b.toString(16).length < 2)?'0'+b.toString(16):b.toString(16);

return (usePound?"#":"") + rStr + gStr + bStr;

var rStr=（r.toString（16）。长度<2）？'0'+r.toString（16）：r.toString（16）；
var gStr=（g.toString（16）。长度<2）？'0'+g.toString（16）：g.toString（16）；
var bStr=（b.toString（16）。长度<2）？'0'+b.toString（16）：b.toString（16）；
返回（使用磅？#“：”）+rStr+gStr+bStr；

也许它不太好，但它可以工作。功能很棒，顺便说一句。正是我所需要的。：）
我做了一个对我来说非常好的解决方案：

function shadeColor(color, percent) {

    var R = parseInt(color.substring(1,3),16);
    var G = parseInt(color.substring(3,5),16);
    var B = parseInt(color.substring(5,7),16);

    R = parseInt(R * (100 + percent) / 100);
    G = parseInt(G * (100 + percent) / 100);
    B = parseInt(B * (100 + percent) / 100);

    R = (R<255)?R:255;  
    G = (G<255)?G:255;  
    B = (B<255)?B:255;  

    var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
    var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
    var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

    return "#"+RR+GG+BB;
}

示例变暗：

shadeColor("#63C6FF",-40);

好吧，这个答案已经变成了它自己的野兽。许多新版本，它变得愚蠢了很久。非常感谢这个答案的所有贡献者。但是，为了让它对大众保持简单。我将这个答案的所有版本/历史都存档到我的。并在这里用最新版本的StackOverflow重新开始n、 我要特别感谢这个版本。他给了我新的数学


此函数（
pSBC
）将采用十六进制或RGB web颜色。
pSBC
可以将其着色得更深或更浅，或将其与第二种颜色混合，也可以将其直接传递，但可以将其从十六进制转换为RGB（Hex2RGB）或RGB转换为十六进制（RGB2Hex）。您甚至不知道使用的颜色格式

这运行速度非常快，可能是最快的，特别是考虑到它的许多功能。这是一个很长的时间在制作中。看到我的整个故事。如果你想绝对最小和最快的方式来阴影或混合，看到下面的微功能，并使用其中一个2线速度恶魔。他们是伟大的密集动画，但这里的版本对于大多数动画来说足够快

此函数使用对数混合或线性混合。但是，它不会转换为HSL以适当地使颜色变亮或变暗。因此，此函数的结果将与使用HSL的那些更大、更慢的函数不同



特点：


自动检测并接受字符串形式的标准十六进制颜色。例如：
“#AA6622”
或
“#bb551144”
自动检测并接受字符串形式的标准RGB颜色。例如：
“RGB（123,45,76）”
或
“rgba（45,15,74,0.45）”
按百分比将颜色着色为白色或黑色
按百分比将颜色混合在一起
同时执行Hex2RGB和RGB2Hex转换，或单独执行
接受格式为#RGB（或#RGBA）的3位（或4位w/alpha）十六进制颜色代码。它将对其进行扩展。例如：
“#C41”
变为
“#CC4411”
接受并（线性）混合alpha通道。如果
c0
（from）颜色或
c1
（to）颜色具有alpha通道，则返回的颜色将具有alpha通道。如果两种颜色都具有alpha通道，则返回的颜色将是使用给定百分比的两个alpha通道的线性混合（就像它是一个正常的颜色通道）。如果两种颜色中只有一种具有alpha通道，则此alpha将直接传递给返回的颜色。这允许在保持透明度级别的同时混合/着色透明颜色。或者，如果透明度级别也应混合，则确保两种颜色都具有alpha。着色时，它将直接传递alpha通道hru.如果您希望基本着色也对alpha通道进行着色，则使用
rgb（0,0,0,1）
或
rgb（255255255,1）
作为
c1
（to）颜色（或其十六进制等价物）。对于rgb颜色，返回颜色的alpha通道将四舍五入到小数点后3位
使用混合时，RGB2Hex和Hex2RGB转换是隐式的。无论
c0
（from）颜色如何，返回的颜色将始终采用
c1
（to）颜色的颜色格式（如果存在）。如果没有
c1
（to）颜色，然后将
'c'
作为
c1
颜色传入，它将对
c0
颜色进行着色和转换
shadeColor("#63C6FF",40);

shadeColor("#63C6FF",-40);

    private string GetSmartShadeColorByBase(string s, float percent)
    {
        if (string.IsNullOrEmpty(s))
            return "";
        var r = s.Substring(3, 2);
        int rInt = int.Parse(r, NumberStyles.HexNumber);
        var g = s.Substring(5, 2);
        int gInt = int.Parse(g, NumberStyles.HexNumber);
        var b = s.Substring(7, 2);
        int bInt = int.Parse(b, NumberStyles.HexNumber);

        var t = percent < 0 ? 0 : 255;
        var p = percent < 0 ? percent*-1 : percent;

        int newR = Convert.ToInt32(Math.Round((t - rInt) * p) + rInt);
        var newG = Convert.ToInt32(Math.Round((t - gInt) * p) + gInt);
        var newB = Convert.ToInt32(Math.Round((t - bInt) * p) + bInt);

        return String.Format("#{0:X2}{1:X2}{2:X2}", newR, newG, newB);
    }

<?php
function shadeColor ($color='#cccccc', $percent=-25) {

  $color = Str_Replace("#",Null,$color);

  $r = Hexdec(Substr($color,0,2));
  $g = Hexdec(Substr($color,2,2));
  $b = Hexdec(Substr($color,4,2));

  $r = (Int)($r*(100+$percent)/100);
  $g = (Int)($g*(100+$percent)/100);
  $b = (Int)($b*(100+$percent)/100);

  $r = Trim(Dechex(($r<255)?$r:255));  
  $g = Trim(Dechex(($g<255)?$g:255));  
  $b = Trim(Dechex(($b<255)?$b:255));

  $r = ((Strlen($r)==1)?"0{$r}":$r);
  $g = ((Strlen($g)==1)?"0{$g}":$g);
  $b = ((Strlen($b)==1)?"0{$b}":$b);

  return (String)("#{$r}{$g}{$b}");
}

echo shadeColor(); // #999999

function adjustBrightness(col, amt) {

    var usePound = false;

    if (col[0] == "#") {
        col = col.slice(1);
        usePound = true;
    }

    var R = parseInt(col.substring(0,2),16);
    var G = parseInt(col.substring(2,4),16);
    var B = parseInt(col.substring(4,6),16);

    // to make the colour less bright than the input
    // change the following three "+" symbols to "-"
    R = R + amt;
    G = G + amt;
    B = B + amt;

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

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

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

    var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
    var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
    var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

    return (usePound?"#":"") + RR + GG + BB;

}

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)
}

private static string GetHexFromRGB(byte r, byte g, byte b, double exposure)
{
    exposure = Math.Max(Math.Min(exposure, 1.0), -1.0);
    if (exposure >= 0)
    {
        return "#"
            + ((byte)(r + ((byte.MaxValue - r) * exposure))).ToString("X2")
            + ((byte)(g + ((byte.MaxValue - g) * exposure))).ToString("X2")
            + ((byte)(b + ((byte.MaxValue - b) * exposure))).ToString("X2");
    }
    else
    {
        return "#"
            + ((byte)(r + (r * exposure))).ToString("X2")
            + ((byte)(g + (g * exposure))).ToString("X2")
            + ((byte)(b + (b * exposure))).ToString("X2");
    }

}

// split color (#e04006) into three strings
var r = Convert.ToByte("e0", 16);
var g = Convert.ToByte("40", 16);
var b = Convert.ToByte("06", 16);

GetHexFromRGB(r, g, b, 0.25);  // Lighten by 25%;

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);
    }
};

function setLightPercentage(col: any, p: number) {
    const R = parseInt(col.substring(1, 3), 16);
    const G = parseInt(col.substring(3, 5), 16);
    const B = parseInt(col.substring(5, 7), 16);
    const curr_total_dark = (255 * 3) - (R + G + B);

    // calculate how much of the current darkness comes from the different channels
    const RR = ((255 - R) / curr_total_dark);
    const GR = ((255 - G) / curr_total_dark);
    const BR = ((255 - B) / curr_total_dark);

    // calculate how much darkness there should be in the new color
    const new_total_dark = ((255 - 255 * (p / 100)) * 3);

    // make the new channels contain the same % of available dark as the old ones did
    const NR = 255 - Math.round(RR * new_total_dark);
    const NG = 255 - Math.round(GR * new_total_dark);
    const NB = 255 - Math.round(BR * new_total_dark);

    const RO = ((NR.toString(16).length === 1) ? "0" + NR.toString(16) : NR.toString(16));
    const GO = ((NG.toString(16).length === 1) ? "0" + NG.toString(16) : NG.toString(16));
    const BO = ((NB.toString(16).length === 1) ? "0" + NB.toString(16) : NB.toString(16));

    return "#" + RO + GO + BO;}

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"

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

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;
    }

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


function lightenDarkenColor(colorCode, amount) {
 let usePound = false;

 if (colorCode[0] == "#") {
     colorCode = colorCode.slice(1);
     usePound = true;
 }
 const num = parseInt(colorCode, 16);
 let r = (num >> 16) + amount;

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

 let b = ((num >> 8) & 0x00FF) + amount;

 if (b > 255) {
     b = 255;
 } else if (b < 0) {
     b = 0;
 }

 let g = (num & 0x0000FF) + amount;

 if (g > 255) {
     g = 255;
 } else if (g < 0) {
     g = 0;
 }
 let color = (g | (b << 8) | (r << 16)).toString(16);
 while (color.length < 6){
   color = 0 + color;
 }
 return (usePound ? '#' : '') + color;  
}

function changeColorLightness(color: number, lightness: number): number {
    return (Math.max(0, Math.min(((color & 0xFF0000) / 0x10000) + lightness, 0xFF)) * 0x10000) +
        (Math.max(0, Math.min(((color & 0x00FF00) / 0x100) + lightness, 0xFF)) * 0x100) +
        (Math.max(0, Math.min(((color & 0x0000FF)) + lightness, 0xFF)));
}

export function changeColorLightness(color: number, lightness: number): number {
    const r = (color & 0xFF0000) / 0x10**4;
    const g = (color & 0x00FF00) / 0x10**2;
    const b = (color & 0x0000FF);

    const changedR = Math.max(0, Math.min(r + lightness, 0xFF));
    const changedG = Math.max(0, Math.min(g + lightness, 0xFF));
    const changedB = Math.max(0, Math.min(b + lightness, 0xFF));

    return (changedR * 0x10**4) + (changedG * 0x10**2) + changedB;
}

changeColorLightness(0x00FF00, 0x50);
changeColorLightness(parseInt("#00FF00".replace('#',''), 16), 0x50);
changeColorLightness(0x00FF00, 127.5);