CODEWITHSUNDEEP
javascript
user1585020
user1585020

Reputation: 261

How do I convert an integer to a javascript color?

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

Upvotes: 23

Views: 40221

Answers (6)

endaye
endaye

Reputation: 41

one line code by js template string:

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

For example:

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

Upvotes: 1

noelicus
noelicus

Reputation: 15055

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

Upvotes: 13

Ben
Ben

Reputation: 494

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.

Upvotes: 1

Magnus
Magnus

Reputation: 47036

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

Upvotes: 1

Esailija
Esailija

Reputation: 140234

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/

Upvotes: 36

nuno
nuno

Reputation: 384

Try:

hexColour = yourNumber.toString(16)

You may want to normalize 'yourNumber' too.

Upvotes: 10

Related Questions