Drag and Drop

[Boy]

Nice approach with the color wheel, Acorn.

[Egg Bramhill]

The main problem with doing it the way suggested so far is that it can very quickly become a highly multi-layered file.

For example 23 colours x 5 shapes would need 115 layers

The link below leads to an all Xara created animation with 20 colours (fills) x 10 shapes. This would require 200 layers in the suggested method but it only has 30 layers in this example.

LINK

[siran]

Is javascript really not an option even if simple? Otherwise check out this.

[Egg Bramhill]

Nice solution siran. Very simple to add more shape and colours.

[Acorn]

siran, I like it but the grouping of a shape and its cut-out and the use of Names needs to be explained.

Acorn

[Egg Bramhill]

One of the tings I find strange is that you can drag one 'colourtarget' onto another 'colourtarget' and it changes colour.

[Boy]

siran, I like it but the grouping of a shape and its cut-out and the use of Names needs to be explained.

Yes, tell us how you did this!

[siran]

Egg, that is because images are draggable by default. Would you like to prevent that? If so do a little code change

function dragStartEvt(e) {if(e.target.className.indexOf("coloursource")>=0){e.dataTransfer.setData("text", e.target.style.backgroundColor);}}
function dropEvt(e) {e.preventDefault();if(e.target.className.indexOf("colourtarget")>=0){var c=e.dataTransfer.getData("text");if(c)e.target.style.backgroundColor=c;}}

Boy, this example is based on the htmlclass name I learned from Acorn. And it uses a little trick on the shapes. The shapes themselves are the transparent part of exported image. So when setting the background colour of the image it has the effect of displaying a coloured shape. So in this case the images are groups of white rectangle from which the shape was subtracted with a transparent copy of the shape with a black outline added, so that you can see the outlines.
These groups have been given the name htmlclass=colourtarget so that the code can identify them.
The source colour squares have been given the name htmlclass=coloursource so that the code can identify them. They are made draggable during startup. Additionally three event handlers are registered which do the copying of the coulour. Have a look at the page body code. There are a lot of examples on the web how that can be done. Search for: html drag and drop
Did I miss something? Please ask if so.

[Boy]

Thanks Siran. At first I didn't get that it was about a drag & drop routine. Clever use of the shapes.