I have an integer which I need to convert to a color in javascript. I am using an MVC model and am trying to replicate a model in a software for a web interface. I have the color in integer format from the database. It needs to be converted to a color in javascript.
For example: integers like -12525360, -5952982
I have the code like this :
items[x].barStyle = "stroke: Black; fill = Red";
So instead of giving the fill:Red, I need to give it the exact color corresponding to the integer value.
This is the code I have written in C#. I need the same thing in javascript. Here resourcecolor= the integer input.
var bytes = BitConverter.GetBytes(resourcecolor);
ti.color = Color.FromArgb(bytes[3], bytes[2], bytes[1], bytes[0]);
In javascript, you express a ARGB color that is to be used with canvas or css as a string like "rgba(0-255,0-255,0-255,0-1)"
.
You can convert the integer to that string format with this function:
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)"
Try:
hexColour = yourNumber.toString(16)
You may want to normalize 'yourNumber' too.
Really simply:
colorString = "#" + colour.toString(16).padStart(6, '0');
But when I actually reference it I also remove the alpha from the integer and set the style colour at the same time, so the whole line is:
document.getElementById('selectColourBtn').style.color = "#" +
(colour & 0x00FFFFFF).toString(16).padStart(6, '0');
Reading the comments on the question it seems you are able to manipulate the value on the server before its sent to the client. If you are using .NET I suggest using the ColorTranslator
int intColor = -12525360;
string htmlColor = ColorTranslator.ToHtml(Color.FromArgb(intColor)); //#40E0D0
Or this (if you need the alpha channel):
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);
Disclosure : I'm the author of the library suggested below.
If you want to use a library rather than coding it yourself, the pusher.color Javascript library supports integer to HTML color conversions:
// Will set c to "rgba(105,80,131,1.0)"
var c = pusher.color('packed_argb', -9875325).html()
Or if you wanted a different format:
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"
Internally the library uses code very similar to Esailija's answer.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.