在JavaScript中将十六进制颜色转换为整数

Question

我正在尝试在JavaScript中将十六进制颜色字符串转换为整数。颜色整数必须与VB6的格式相同。我认为字节的顺序不是正常的。例如：255是红色（＃ff0000），16776960是Aqua（＃00ffff）。我有一个反函数：（但评论中的某人告诉我它不正确）

function VBColorToHEX(i) {
    var hex = (i & 0xFF).toString(16) +
              ((i >> 8) & 0xFF).toString(16) +
            ((i >> 16) & 0xFF).toString(16) +
            ((i >> 24) & 0xFF).toString(16);

    hex += '000000';
    hex = hex.substring(0, 6);
    return "#" + hex;
}

但是我无法编写一个函数来返回我的初始值。

你能帮我吗？

编辑：

我通过填充每个单独的颜色来纠正了我的原始函数：

function VBColorToHEX(i) {
   var r = (i & 0xFF).toString(16);
   var g = ((i >> 8) & 0xFF).toString(16);
   var b = ((i >> 16) & 0xFF).toString(16);

   r = ('0' + r).slice(-2);
   g = ('0' + g).slice(-2);
   b = ('0' + b).slice(-2);

   return "#" + r + g + b;
}

- Xasun

---

让VB6告诉你纯红、绿和蓝的颜色编号，然后你就会明白需要哪些字节了。 - David

对于任何想知道的人，VB6的颜色格式是&H00BBGGRR&。 - pawel

我认为你的函数VBColorToHEX不正确。VBColorToHEX(1)返回#100000，但它似乎应该返回#010000。 - andi

颜色看起来正确，但正如你所说，某些值可能是错误的。我应该做哪些更改？ - Xasun

你是否只想选择一个十六进制数，如0xFF，并获取其对应的整数？ - AndreaM16

Answer 1

这是您原始功能的可用版本，我认为它会更加清晰地解释它的实际工作方式。

function VBColorToHEX(i) {
    var bbggrr =  ("000000" + i.toString(16)).slice(-6);
    var rrggbb = bbggrr.substr(4, 2) + bbggrr.substr(2, 2) + bbggrr.substr(0, 2);
    return "#" + rrggbb;
}

然后，要进行反向操作，请执行以下操作：

function HEXToVBColor(rrggbb) {
    var bbggrr = rrggbb.substr(4, 2) + rrggbb.substr(2, 2) + rrggbb.substr(0, 2);
    return parseInt(bbggrr, 16);
}

- andi

---

你的VBColorToHEX版本不起作用，产生的颜色与我在VB应用程序中设置的颜色非常不同。 - Xasun

@Xasun，我不确定您为什么会这样说，因为针对您给出的两个示例“255是红色（＃ff0000），16776960是Aqua（＃00ffff）”，它可以正常工作。您能否给出一个不起作用的示例？ - andi

我的错，我错误地使用了字符串中的“255”来测试您的函数。您的解决方案可行。 - Xasun

Answer 2

function VBColorToHEX(i) {
    var hex = (i & 0xFF).toString(16) +
              ((i >> 8) & 0xFF).toString(16) +
            ((i >> 16) & 0xFF).toString(16) +
            ((i >> 24) & 0xFF).toString(16);

    hex += '000000'; // pad result
    hex = hex.substring(0, 6);
    return "#" + hex;
}

您正在使用零填充结果而不是填充每个颜色值。例如，如果i = 657930，则字符串十六进制值类似于＃0A0A0A，但您将输出＃AAA000。

此外，如果您提取4个颜色通道，则需要8个字符而不是6个。

有关填充的说明，请参见this solution。

- Ilya