将颜色十六进制更改为更暗答案

【问题标题】：Change color hex to darker将颜色十六进制更改为更暗
【发布时间】：2018-05-06 10:37:43
【问题描述】：

我知道对此有答案 (Programmatically darken a Hex colour)，我已经尝试按照该解释进行操作。

所以，我将十六进制的值保存到一个变量中：

let y = chart.color(x);

如果我打印它，它看起来像这样#1f77b4。所以我删除了第一个字符：

y = y.substr(1);

现在看起来像这样：1f77b4 所以我在开头添加了0x：

y = "0x" + y; => 现在是0x1f77b4。太好了！

现在我正在尝试使用该问题中解释的方法使颜色变深：

y = (y & 0xfefefe) >> 1;

经过此计算，y 为998234，将其转换为十六进制即为7f3f07。我尝试了这两个值，但它们不是深蓝色。

原来的颜色是蓝色，我用这个方法得到了更深的蓝色，但我得到了棕黄色。

我的解决方法有问题吗？

【问题讨论】：

你是怎么得到3992936的？
看来我没有得到 3992936。看来您的十六进制转换出错了 - 您是否使用了y.toString(16)？
var y = "#1f77b4".substr(1); y = parseInt(y, 16); y = (y & 0xFEFEFE) >> 1; console.log(y.toString(16)); 输出“f3b5a”，这是正确的值。 [我仍然无法弄清楚我是如何粘贴到另一个号码中的，目前我正在做的任何其他事情都没有。]
我理解你的做法。但是现在有一个 5 位的结果，我如何将它表示为一种颜色呢？ :D 如果我在末尾添加一个 0，它将是淡橙色，而不是我想要的深蓝色。
我认为您可能将“0”添加到错误的末尾：您需要使用“#0f3b5a”而不是“#f3b5a0”。

标签： javascript colors hex

【解决方案1】：

您的（未显示的）用于转换为十六进制字符串的函数似乎无法正常工作。幸运的是，JavaScript 的 toString 数字函数有一个可选参数，可以为您进行转换。

另外，当您在 HTML/JavaScript 中使用结果时，您可能需要在宽度为 6 之前添加零，所以...

function halveBrightness(hexColor) {
    if (hexColor.charAt(0) == "#") {
        hexColor = hexColor.substr(1);
    }
    var color = parseInt(hexColor, 16);
    /* using the method of https://stackoverflow.com/a/1787193/1115360 */
    color = (color & 0xFEFEFE) >> 1;

    return padLeft("0", 6, color.toString(16));

}

function padLeft(padChar, finalLength, str) {
    padChar = padChar.charAt(0);
    var nPads = finalLength - str.length;
    var padding = "";
    for(var i=1; i<=nPads; i++) {
        padding += padChar;
    }

    return padding + str;
}

/* using the value from the question */
var y = "#1f77b4";
console.log(halveBrightness(y));

/* check it works when bytes are/will become zero */
console.log(halveBrightness("0001FF"));

输出：

0f3b5a
00007f

您可能需要在结果的开头添加“#”或“0x”，具体取决于您使用它的目的。

【讨论】：