Convert hexadecimal color to integer in javascript

Question

I'm trying to convert a hexadecimal color string to a int in javascript.

The color int must be the same format as VB6. I think the bytes are not in the normal order. Ex: 255 is red (#ff0000) and 16776960 is Aqua (#00ffff)

I have a function to do the inverse: (But someone in the comments told me that it's not correct)

function VBColorToHEX(i) {
    var hex = (i & 0xFF).toString(16) +
              ((i >> 8) & 0xFF).toString(16) +
            ((i >> 16) & 0xFF).toString(16) +
            ((i >> 24) & 0xFF).toString(16);

    hex += '000000';
    hex = hex.substring(0, 6);
    return "#" + hex;
}

But was unable to write a function to return to my initial value.

Can you help me?

EDIT:

I corrected my original function by padding each separate colors:

function VBColorToHEX(i) {
   var r = (i & 0xFF).toString(16);
   var g = ((i >> 8) & 0xFF).toString(16);
   var b = ((i >> 16) & 0xFF).toString(16);

   r = ('0' + r).slice(-2);
   g = ('0' + g).slice(-2);
   b = ('0' + b).slice(-2);

   return "#" + r + g + b;
}

Get VB6 to tell you the color number for pure red, green, and blue. Then it should be obvious which bytes you need. — David
– David, Commented Feb 17, 2016 at 20:08
I don't think your function VBColorToHEX is correct. VBColorToHEX(1) returns #100000 but it seems like it should return #010000. — andi
– andi, Commented Feb 17, 2016 at 20:17
The colors look correct, but as you say,certain value can be wrong. Which changes should I made? — Xasun
– Xasun, Commented Feb 17, 2016 at 20:20
Would you just like to pick an Hex like 0xFF and get the associated Int? — AndreaM16
– AndreaM16, Commented Feb 17, 2016 at 20:29

andi · Accepted Answer · 2016-02-17 20:49:43Z

7

Here's a working version of your original function, which I think will make more sense to you about how it actually works.

function VBColorToHEX(i) {
    var bbggrr =  ("000000" + i.toString(16)).slice(-6);
    var rrggbb = bbggrr.substr(4, 2) + bbggrr.substr(2, 2) + bbggrr.substr(0, 2);
    return "#" + rrggbb;
}

Then, to do the reverse, do this:

function HEXToVBColor(rrggbb) {
    var bbggrr = rrggbb.substr(4, 2) + rrggbb.substr(2, 2) + rrggbb.substr(0, 2);
    return parseInt(bbggrr, 16);
}

answered Feb 17, 2016 at 20:49

andi

6,5421 gold badge20 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Xasun Over a year ago

Your version of VBColorToHEX does't work, the color produced are very different than those set in my VB application.

andi Over a year ago

@Xasun, I'm not sure why you say that, as it works fine for the two examples you gave "255 is red (#ff0000) and 16776960 is Aqua (#00ffff)". Can you give an example where it doesn't work?

Xasun Over a year ago

My bad, I tested your function with "255" in string by error. Your solution work.

Community · Accepted Answer · 2017-05-23 11:50:34Z

1

function VBColorToHEX(i) {
    var hex = (i & 0xFF).toString(16) +
              ((i >> 8) & 0xFF).toString(16) +
            ((i >> 16) & 0xFF).toString(16) +
            ((i >> 24) & 0xFF).toString(16);

    hex += '000000'; // pad result
    hex = hex.substring(0, 6);
    return "#" + hex;
}

You're padding the result with zeroes instead of padding each color value. For instance if i = 657930, the string hex value is something like #0A0A0A but you'll output #AAA000 instead.

Beside, if you're extracting 4 color channels you need 8 chars and not 6.

PS for the padding, see for instance this solution.

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Feb 17, 2016 at 20:45

Ilya

5,6272 gold badges21 silver badges35 bronze badges

Collectives™ on Stack Overflow

Convert hexadecimal color to integer in javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related