How do I convert an integer to a javascript color?

Question

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]);

how does the integer looks like? Which javascript color format do you want to get? — tuxtimo, Aug 08 '12 at 14:32
`if(integer == 1) color == "red" else if(integer == 2) color == "green"`? — Nivas, Aug 08 '12 at 14:32
Still not enough information. What do the numbers represent exactly? What do you mean by "color" her? You cannot convert something into a "color", only into a *representation* of a color. So, what is your input and what is your expected output? — Felix Kling, Aug 08 '12 at 14:35
I get this integer value from a JSON result which extracts the data from the database. — user1585020, Aug 08 '12 at 14:41
Are you able to manipulate the value from .NET code before its sent to the client (javascript) — Magnus, Aug 08 '12 at 14:42
Yes, I can manipulate the value before it is sent to the client. — user1585020, Aug 08 '12 at 14:45
@user1585020 You should accept one of the answer to your question. — Magnus, Sep 03 '12 at 19:55

Esailija · Answer 1 · 2012-08-08T14:59:04.887

35

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)"

Demo: http://jsfiddle.net/Ectpk/

edited Aug 08 '12 at 14:59

answered Aug 08 '12 at 14:40

Esailija

138,174
23
272
326

This one returns an accurate color! – Fotios Tsakiris Jul 14 '22 at 16:50

score 10 · Answer 2 · edited Sep 03 '20 at 20:45

10

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');

edited Sep 03 '20 at 20:45

Alex

1,457
1
13
26

answered Jan 28 '19 at 17:16

noelicus

14,468
3
92
111

2

To ensure that it works for numbers such as 0 it needs to be padded. A simple one-liner would then be: `"#" + (number & 0x00FFFFFF).toString(16).padStart(6, '0')` – ackh May 20 '20 at 13:21
Good catch! Updated answer. Thanks @ackh. – noelicus May 21 '20 at 22:14

score 9 · Answer 3 · answered Aug 08 '12 at 14:34

9

Try:

hexColour = yourNumber.toString(16)

You may want to normalize 'yourNumber' too.

answered Aug 08 '12 at 14:34

nuno

194
1
11

1

To put a little more context, in pure Javascript, this would work to convert a number to color. td.style.backgroundColor = "#" + value.toString(16); – Dan Nov 11 '14 at 10:32
2

It doesn't work for some cases, for example the int value 0 can't convert to desire '#000000' – Alen Liang May 05 '17 at 02:24
13

This is a nice one liner: ('#' + mynum.toString(16).padStart(6, '0')); – jordan9001 Jun 16 '18 at 01:13
Thanks, this the proper answer. – Vaibhav Vishal Jun 28 '19 at 19:59

Magnus · Answer 4 · 2012-08-08T23:37:29.667

1

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);

edited Aug 08 '12 at 23:37

answered Aug 08 '12 at 14:57

Magnus

45,362
8
80
118

This is also works, though if there is a `rgba` format in .NET, you should use that because the `#xxxxxx`-format cannot encode alpha – Esailija Aug 08 '12 at 15:04
Btw I'm not sure one can do what I edited the post to be in .NET but the alpha value in the css rgba format is between 0-1 (float), not 0-255. There should probably be some kind of cast there? – Esailija Aug 08 '12 at 15:18
@Esailija yes, having 255 as a float value (by adding the "f") and using `InvariantCulture` (to always format the float with a ".") should do it. – Magnus Aug 08 '12 at 23:37

score 1 · Answer 5 · edited May 23 '17 at 12:33

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.

How do I convert an integer to a javascript color?

5 Answers5

Linked