javascript - 如何计算较深的十六进制颜色

Question

使用 this solution我正在尝试计算颜色的较暗范围，但输出看起来不像正确的十六进制值(缺少一个值)。

> #84079

我做错了什么？

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 firstColor = LightenDarkenColor("#3068A1", -20); 
var NewColor = LightenDarkenColor(firstColor, -20); 

console.log(NewColor);

Answer 1

改变这个:

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

对此

(usePound?"#":"") + ('00000'+(b | (g << 8) | (r << 16)).toString(16)).slice(-6);

这将确保有 6 位数字，并修复原始文章中关闭的绿色和蓝色位置。

• (r << 16)将红色移动到位 32 到 47
• (g << 8)将绿色移动到位 16 到 31
• 和b在位 0-15 中留下蓝色。

更新

正如指出的那样 b和 g变量也在读取错误的值。因此，您还想执行以下操作:

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

var b = (num & 0x0000FF) + amt;

交换 b 的位置和 g获取它们的值。

如果您不想交换它们，请将我的原始行更改为:

(usePound?"#":"") + ('00000'+(g | (b << 8) | (r << 16)).toString(16)).slice(-6);