How to use canvas to make a filter by color using an example?

Question

css

Now I'm developing a landing page for cases, and I need a filter by colors. I will have more than 50 colors for 11 different iPhone models, so I want to take 11 photos or canvas (I don’t know what should be, that’s why I came here to the forum)
And in general, in order not to take 500 photos with different colors, I just want to choose a color and change only the background color of the cover, and not change the photo, how can this be done?
Here is an example - https://endorphone.com.ua/personalcase/apple-iphon...

Sory if I didn't explain clearly, in short I need a color filter for different iPhone models, but I don't want to use 500 photos for this and write jquery code for each color and model...
Thank you for reading to the end :)

Answer 1

Something like this?
in addition to hue-rotate, you can also add saturate.

UPD: I remembered seeing a color wheel with a range-slider. Here you can change the color with the slider. The principle of operation is the same.