How to add a colour picker that can dynamically change parts of an image?

Elements
1

My previous question - about singularly selectable elements on a page driving a larger image of the selected element is the precursor to this problem.

After selecting a (button?) with a thumbnail of an image, a larger image box with that selected image is filled.

Underneath this larger ‘selected’ image, I need a colour picker, and that colour picker needs to

a) show the RGB or CYMK values of the chosen colour and

b) Dynamically change the colour of PARTS of the raster image - without destroying the original ‘shading’ and ‘realism’ of the part i.e. not just filling the entire ‘path’ with a solid colour.

The parts of this larger image that can change are to be chosen from a selectable area under the image so that the user can choose just one of the 3 possible parts, any two of the possible parts or all 3 of the 3 possible parts to be affected by the colour picker.

Again, at the bottom of the page will be a ‘buy now’ button, and when clicked it needs to use the colour chosen, the parts selected for the new colour to pre-populate a webform that can be emailed. Or added to a ‘site-wide’ ‘shopping cart’ - without using any e-commerce platform - just staying all on the local site.

The final total contents of the ‘shopping cart’ will fill the same part of the web form that will be emailed to me.

Does elements have something similar to this?
2

It’s a little tricky to follow the full flow of what you’re trying to build, however, this isn’t something that Elements has built in, as it’s a very specific use-case.

You could achieve it with a custom component, but it would definitely require some custom code to handle the colour-picking, image manipulation, and passing the selected options into your form or cart setup.