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.

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 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 white or black with a different blending colour mode to get the best results.

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 HTML/CSS/JS in an 'automated' way based on the colour by the colour picker is another brain-buster.

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