2

This question is not asking how to convert a hash string hex value to it's opposite color. This question is asking how to convert a hash string hex value to a regular hex value explained below:

I get element's hex color values from their stored style. I need to convert their hex value which is a string with a hash like "#FFFFFF" to 0xFFFFFF. What is the fastest, and most direct way of accomplishing this?

I want to do this so I can do some bitwise modifications to the style's value. For example, storedColor ^ 0xFFFFFF to get an approximate inverse color.

Chewie The Chorkie
  • 4,896
  • 9
  • 46
  • 90
  • If you are looking to invert the colors, this has already been answered [here](https://stackoverflow.com/a/35970186/3483203) – user3483203 Jan 07 '18 at 19:24
  • Possible duplicate of [How can I generate the opposite color according to current color?](https://stackoverflow.com/questions/35969656/how-can-i-generate-the-opposite-color-according-to-current-color) – user3483203 Jan 07 '18 at 19:24
  • Nope, I'm looking to convert the text string like "#FFFFFF" with the hash to a plain hex value like 0xFFFFFF without the quotes or hash in JavaScript. – Chewie The Chorkie Jan 07 '18 at 19:41
  • Thank you for link. I can still use that to inverse the color, but it does not answer how to convert a string hex to regular hex. – Chewie The Chorkie Jan 07 '18 at 19:44
  • 3
    If you want to make a number from that string, try `parseInt(yourString.slice(1), 16)` – georg Jan 07 '18 at 21:01

2 Answers2

3

I know this answer is coming quite late, but I had a similar issue and here is what helped me (please note, the code provided below is not mine, this is simply a combination of multiple StackOverflow answers).

General workflow: convert hex code to RGB and then to the 0x representation.

You can check different HEX TO RGB conversion options here: RGB to hex and hex to RGB

I used this function to do it (easy to reverse, as it returns an array [r, g, b]. Also works with shorthand hex triplets such as "#03F").

hexToRgb(hex) {
  return hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
      , (m, r, g, b) => "#" + r + r + g + g + b + b)
      .substring(1).match(/.{2}/g)
      .map(x => parseInt(x, 16));
}

Idea for the final conversion is taken from here: convert rgba color value to 0xFFFFFFFF form in javascript

Like user @Chanwoo Park mentions, a color in this representation 0xFFFFFFFF is formed as Alpha, Blue, Green, Red and not Alpha, Red, Green, Blue. So simply converting a color #4286F4 to 0xFF4286F4 would not render the same color.

What you can do is reverse RGB values and then do the conversion. The full code:

hexToRgb(hex) {
  return hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
      , (m, r, g, b) => "#" + r + r + g + g + b + b)
      .substring(1).match(/.{2}/g)
      .map(x => parseInt(x, 16));
},
getFillColor(color) {
  let rgbColor = this.hexToRgb(color);
  let reversed = rgbColor.reverse();
  let hex = 0xff000000 | (reversed[0] << 16) | (reversed[1] << 8) | reversed[2];

  return parseInt(`0x${(hex >>> 0).toString(16)}`);
}

P.S. this is Vue.js code, but should be super simple to convert to vanilla JS.

All credit goes to users: https://stackoverflow.com/users/7377162/chanwoo-park, https://stackoverflow.com/users/10317684/ricky-mo, https://stackoverflow.com/users/3853934/micha%c5%82-per%c5%82akowski

8urning8eard
  • 54
  • 3
1

As @georg commented:

..., try parseInt(yourString.slice(1), 16)

Jose Benitez
  • 96
  • 1
  • 6