如何将整数转换为 javascript 颜色？答案

【问题标题】：How do I convert an integer to a javascript color?如何将整数转换为 javascript 颜色？
【发布时间】：2012-08-08 14:30:53
【问题描述】：

我有一个整数，我需要将其转换为 javascript 中的颜色。我正在使用 MVC 模型，并试图在软件中复制模型以用于 Web 界面。我有数据库中整数格式的颜色。它需要在javascript中转换为颜色。

例如：-12525360、-5952982等整数

我有这样的代码：

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

因此，我需要为它提供与整数值对应的确切颜色，而不是填充：红色。

这是我用 C# 编写的代码。我在javascript中需要同样的东西。这里 resourcecolor= 整数输入。

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

【问题讨论】：

你需要更具体。
整数长什么样子？你想得到哪种 javascript 颜色格式？
if(integer == 1) color == "red" else if(integer == 2) color == "green"?
举个例子。你试过什么？
仍然没有足够的信息。这些数字究竟代表什么？你说的“颜色”她是什么意思？您不能将某物转换为“颜色”，只能转换为颜色的表示。那么，您的输入是什么，您的预期输出是什么？

标签： javascript

【解决方案1】：

真的很简单：

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

但是当我实际引用它时，我也会从整数中删除 alpha 并同时设置样式颜色，所以整行是：

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

【讨论】：

为了确保它适用于诸如 0 之类的数字，需要对其进行填充。一个简单的单行将是："#" + (number & 0x00FFFFFF).toString(16).padStart(6, '0')
好收获！更新了答案。谢谢@ackh。

【解决方案2】：

在 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/

【讨论】：

【解决方案3】：

试试：

hexColour = yourNumber.toString(16)

您可能也想规范化“yourNumber”。

【讨论】：

为了提供更多上下文，在纯 Javascript 中，这可以将数字转换为颜色。 td.style.backgroundColor = "#" + value.toString(16);
在某些情况下不起作用，例如int值0不能转换为desired '#000000'
这是一个不错的单行：('#' + mynum.toString(16).padStart(6, '0'));
谢谢，这是正确的答案。

【解决方案4】：

阅读有关问题的 cmets，您似乎能够在服务器上的值发送到客户端之前对其进行操作。如果您使用的是 .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);

【讨论】：

这也是可行的，但如果 .NET 中有 rgba 格式，你应该使用它，因为 #xxxxxx-format 不能编码 alpha
顺便说一句，我不确定是否可以将帖子编辑为 .NET，但 css rgba 格式的 alpha 值介于 0-1（浮点数）之间，而不是 0-255。那里可能应该有某种演员表？

【解决方案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's 答案非常相似的代码。

【讨论】：