如何将整数转换为JavaScript颜色？

Question

我有一个整数需要在 JavaScript 中转换为颜色。

我正在使用 MVC 模型，并尝试在 Web 接口的软件中复制模型。我从数据库中获取的颜色以整数格式存在，需要将其转换为 JavaScript 中的颜色。

例如：像 -12525360、-5952982 这样的整数。

我有以下代码：

items[x].barStyle = "stroke: Black; fill = Red";

所以，我需要给出与整数值相对应的确切颜色，而不是给出fill:Red。

这是我在C#中编写的代码，我需要用JavaScript实现相同的功能。这里resourcecolor等于输入的整数。

     var bytes = BitConverter.GetBytes(resourcecolor);
     ti.color = Color.FromArgb(bytes[3], bytes[2], bytes[1], bytes[0]);

- user1585020

---

请说明得更具体一些。 - Austin

整数长什么样？你想获取哪种 JavaScript 颜色格式？ - tuxtimo

如果(integer == 1)，则颜色为"红色"，否则如果(integer == 2)，则颜色为"绿色"。 - Nivas

举个例子。你尝试过什么？ - PitaJ

你从哪里获取这个整数值？是从.NET代码中获取的吗？ - Magnus

Answer 1

在 JavaScript 中，如果要在 canvas 或 css 中使用一个 ARGB 颜色，你需要将其表示为一个字符串，例如 "rgba(0-255,0-255,0-255,0-1)"。

你可以使用以下函数将整数转换为该字符串格式：

function toColor(num) {
    num >>>= 0;
    var b = num & 0xFF,
        g = (num & 0xFF00) >>> 8,
        r = (num & 0xFF0000) >>> 16,
        a = ( (num & 0xFF000000) >>> 24 ) / 255 ;
    return "rgba(" + [r, g, b, a].join(",") + ")";
}
toColor(-5952982)
//"rgba(165,42,42,1)"
toColor(-12525360)
//"rgba(64,224,208,1)"

演示：http://jsfiddle.net/Ectpk/

- Esailija

---

这个返回准确的颜色！ - Fotios Tsakiris

Answer 2

真的很简单：

colorString = "#" + colour.toString(16).padStart(6, '0');

但实际引用时，我还会从整数中删除alpha并同时设置样式颜色，因此整行代码如下：

document.getElementById('selectColourBtn').style.color = "#" +
    (colour & 0x00FFFFFF).toString(16).padStart(6, '0');

- noelicus

---

为了确保它适用于数字0等，它需要填充。一个简单的一行代码是："#" + (number & 0x00FFFFFF).toString(16).padStart(6，'0') - ackh

好的发现！已更新答案。感谢@ackh。 - noelicus

Answer 3

尝试一下：

hexColour = yourNumber.toString(16)

您可能也需要规范化'yourNumber'。

- nuno

---

为了更好地理解，纯JavaScript中可以使用以下代码将数字转换为颜色：td.style.backgroundColor = "#" + value.toString(16); - Dan

有些情况下它无法正常工作，例如整数值0无法转换为所需的“＃000000”。 - Alen Liang

这是一个不错的一行代码：('#' + mynum.toString(16).padStart(6, '0'))。它的作用是将数字转换为十六进制，并在前面加上"#"符号，如果转换后的结果不足6位，则在左侧填充0直到总位数为6。 - jordan9001

谢谢，这是正确的答案。 - Vaibhav Vishal

Answer 4

从问题的评论中看来，您似乎能够在将值发送到客户端之前在服务器上操纵该值。如果您正在使用.NET，则建议使用ColorTranslator

int intColor = -12525360;
string htmlColor = ColorTranslator.ToHtml(Color.FromArgb(intColor)); //#40E0D0

或者这个（如果你需要 alpha 通道）：

   int intColor = -12525360;
   Color c = Color.FromArgb(intColor);
   string htmlColor = String.Format(CultureInfo.InvariantCulture, 
                        "rgba({0},{1},{2},{3})", c.R, c.G, c.B, c.A / 255f);

- Magnus

---

这也可以工作，但如果在.NET中有rgba格式，则应使用该格式，因为#xxxxxx格式无法编码透明度。 - Esailija

顺便说一句，我不确定在.NET中是否可以执行我编辑后的操作，但是CSS RGBA格式中的Alpha值介于0-1之间（浮点数），而不是0-255。那里可能需要进行某种类型的转换？ - Esailija

@Esailija 是的，将255作为浮点值（通过添加"f"）并使用InvariantCulture（始终使用"."格式化浮点数）应该可以解决问题。 - Magnus

Answer 5

披露：我是下面推荐的库的作者。

如果你想使用一个库而不是自己编写代码，则 pusher.color Javascript 库支持整数到 HTML 颜色转换：

// Will set c to "rgba(105,80,131,1.0)"
var c = pusher.color('packed_argb', -9875325).html()

或者如果你想要不同的格式：

var colorObject = pusher.color('packed_argb', -9875325);
var htmlString = colorObject.html();          // i.e. "rgba(105,80,131,1.0)"
var colorName  = colorObject.html('keyword'); // closest named color
var hexString  = colorObject.html('hex6');    // "#695083"

在内部，该库使用的代码与Esailija的答案非常相似。

- Ben

Answer 6

一个行内代码通过js模板字符串：

let colorStr = `#${(colorNum).toString(16).padStart(6, '0')}`;

例如：

const colorNum = 0x00f0ff;
const colorStr = `#${(colorNum).toString(16).padStart(6, '0')}`;
console.log(colorStr);
// output: #00f0ff

- endaye