I'm trying to use some Java Color int values from a database in Javascript. What's the correct way to convert the Java color int (like -2147473665) to an RGB string (like '#ffff00') using Javascript?

Right now I'm taking the number, flipping it negative, converting it to hex, and adding a hashtag, but that gives me the wrong color. (The substring is to account for the alpha channel)

function getClients() {
  var query = new Parse.Query(Client);

  query.each(function(client) {
    var clientName = client.get("clientName");
    var borderColor = '#' + (-client.get("borderColor")).toString(16);
    var fillColor = '#' + (-client.get("fillColor")).toString(16).substr(2);
    var outline = client.get("outline");

    console.log(client.get("borderColor"));
    console.log(client.get("borderColor").toString(16));
    console.log(hexToRGB(client.get("borderColor")));

    var clientPoly = new google.maps.Polygon({
      paths: outline,
      strokeColor: borderColor,
      strokeOpacity: 1,
      strokeWeight: 2,
      fillColor: fillColor,
      fillOpacity: 0.5
    });

    clientPoly.setMap(mMap);
  });
}

For example, the int -16767233 should be navy blue, but it's showing up as yellow.

-16731137 should be light blue, but it's red

-1218518 should be orange, but it's blue

Correct colors:

This is what I get in JS with my current code

What is going on here?? I know it's supposed to be RGB, and not HSV, so that's not it...

I'm trying to use some Java Color int values from a database in Javascript. What's the correct way to convert the Java color int (like -2147473665) to an RGB string (like '#ffff00') using Javascript?

Right now I'm taking the number, flipping it negative, converting it to hex, and adding a hashtag, but that gives me the wrong color. (The substring is to account for the alpha channel)

function getClients() {
  var query = new Parse.Query(Client);

  query.each(function(client) {
    var clientName = client.get("clientName");
    var borderColor = '#' + (-client.get("borderColor")).toString(16);
    var fillColor = '#' + (-client.get("fillColor")).toString(16).substr(2);
    var outline = client.get("outline");

    console.log(client.get("borderColor"));
    console.log(client.get("borderColor").toString(16));
    console.log(hexToRGB(client.get("borderColor")));

    var clientPoly = new google.maps.Polygon({
      paths: outline,
      strokeColor: borderColor,
      strokeOpacity: 1,
      strokeWeight: 2,
      fillColor: fillColor,
      fillOpacity: 0.5
    });

    clientPoly.setMap(mMap);
  });
}

For example, the int -16767233 should be navy blue, but it's showing up as yellow.

-16731137 should be light blue, but it's red

-1218518 should be orange, but it's blue

Correct colors:

This is what I get in JS with my current code

What is going on here?? I know it's supposed to be RGB, and not HSV, so that's not it...

• javascript
• java
• colors
• rgb

• Did you confuse BGR with RGB? The hex value of 16767233 is FFD901 which is yellow, but 01D9FF is blue. – WangYudong Commented Jun 13, 2016 at 17:16
• I don't think so: developers.google./maps/documentation/javascript/examples/… I'll try and see what happens though – Andrew Torr Commented Jun 13, 2016 at 17:20

1 Answer 1

You need to handle signed integers. See How to convert decimal to hex in JavaScript?

console.log(getHexColor(-16731137)); // light blue
console.log(getHexColor(-1218518)); // orange

function getHexColor(number){
    return "#"+((number)>>>0).toString(16).slice(-6);
}