2

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: Correct colors

This is what I get in JS with my current code 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...

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

1 Answers1

14

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);
}
Community
  • 1
  • 1
Tim
  • 810
  • 9
  • 20
  • 1
    Thank you!!! That's way easier than what I was trying to do... I ended up trying to subtract the colors from FFFFFF or FFFFFFFF, converted to decimal, which gave me most of the right colors, but some needed leading zeros and some trailing... this is way simpler... – Andrew Torr Jun 13 '16 at 17:54
  • 5
    `return "#"+ ('000000' + ((number)>>>0).toString(16)).slice(-6);` works better. – thunderbird Jun 21 '17 at 05:43
  • -41121 and -41635 both go to #ff5b5b for me. Is this supposed to happen? – Roshan Prabhakar Jul 24 '19 at 04:45