Best way to convert hex string with hash to hex value with 0x in JavaScript?

Question

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.

Anywheres

If you are looking to invert the colors, this has already been answered here – Brisco

Possible duplicate of How can I generate the opposite color according to current color? – Brisco

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. – Anywheres

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. – Anywheres

If you want to make a number from that string, try parseInt(yourString.slice(1), 16) – Mara

Answer 1

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

Magness

I don't know Vue.js though... – Spathe

Answer 2

As @georg commented:

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

Emblazon

Answer 3

im just leaving this here. if you have the value #ffffff say from a color picker but need to input 0xffffff into the value for example "three.js : scene .color" requires a hexadecimal color code but the html "<input>" of type="color" fives a #hex code

var bgColor = #ffffff;
bgColor.replace("#", "0x"); 
scene.color = bgColor;

Boreas