I have a raster image - Let's say a shirt:

I need to use html and css and javascript to change the colour of this shirt by way of an on-page colour picker. Infinite colour choices and live updating. I know I need to adjust the HSL of a separate image that is overlaid exactly over the 'master' image - this 'overlay image' needs to JUST be the shirt and nothing else... but I'm getting a lot of conflicting information about the pre-processing of this 'overlay' image and what colour blending I should use.

I've looked at wikipedia about blending modes, and several youtube videos but they are mostly disagreeing with each other.

Do I need to make this 'overlay' image 'black and white' and use the greyscale version and then use a specific blending mode with the colour chosen from the picker to change the colour of the shirt, whilst retaining all the shadow and 'realism' effects?

Or does the image need to be just values of single colour and then combined with the HSL values and a specific blending colour mode to get the best results.

Or does it need to be something else I haven't discovered yet?

I've tried using a free online image editor (Canva) to test this out, but I just keep ending up with flat colouring that doesn't look 'real' and wiping out most of the realism and shading of the shirt. Some of the suggestions say to vary the Hue and Saturation, but how to do that with JavaScript in an 'automated' way based on the colour by the colour picker is something I can't work out alone.

To see an example in html,css and js that is completely NOT what I'm trying to do, look at this:

css-tricks image filter colours

This doesn't make anything close to realistic colour changes.

I guess what I'm trying to emulate the effects from this video on YT:

'How to change color in photoshop' - YouTube

I'm sure that e-commerce sites like Wayfair and others who do this, and do this quite well, are just using javascript to do it, but I can't find any reliable information.

ETA: If it wasn't completely obvious, this has to be done live on a webpage and allow the user to use a COLOUR PICKER to pick from ANY POSSIBLE colour - so taking photos of every possible colour of a physical object is not only ludicrous but impossible.

It has to be dynamic and live. I realise CSS can't do this (as evidenced by the link above) so it has to be done in JavaScript and/or HTML alone but I don't know if it's possible and just as important - if it is possible, what do I need to do to the 'overlay image' and blending modes to get it to work?