How do I get pixi to read 8 digit hex codes? - vue.js

Question

I'm using Vuetify's color picker which has options for hexa, hsla and rgba. I am using hexa but am willing to use any option that will work.
It seems that Pixi can only understand 6 digits hex codes with 0x in front of it.
I want to be able to use Vuetify's slider and translate the 8 digit hex code to pixi.
Here is what I've tried:
this.sketcher.color = this.color.replace(/\x23/g, '0')
This removes the '#' (ascii 23) from the front and adds 0 in it's place. I read the 0x is for 6 digit hex and 0 is for octal; which I was hoping meant 8 digit hexa codes but it appears that's not correct.
I've also found a workaround to remove the last two digits from the hex value but that removes the transparency.
Is there a way to push over my 8 digit hexa value to pixi in a way that pixi will understand it and display it accordingly?? I'm using it to sketch shapes btw. Thanks!

Answer 1

For a color in string format '#RRGGBBAA' few operations need to be done so it can be used with PIXI. You need to convert the string to a number and also extract the alpha component to a separate variable. This can be done like this:
Remove the # symbol from the beginning of the color string: color.slice(1)
Convert color string to number type with the parseInt(...) global function.
Extract RGB values from color number with bit shifting.
Extract alpha component (last two characters) by bit manipulation.
// Convert color string to a number
const colorString = '#ffcc33aa';
const colorNumber = parseInt(colorString.slice(1), 16);
// Extract color components from color number
const rgb = colorNumber >>> 8;
const alpha = (colorNumber & 0xff) / 255;
// Apply obtained color components to a PIXI sprite
sprite.tint = rgb;
sprite.alpha = alpha;