[Dilettante_Pro]

Вариант jQuery

<style>
.ring { fill:red; }
.square { fill:green;}
#modal { position:absolute; display:none; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$( function() {
   var elems = $(".ring, .square"),
         picker = $("#modal"),
         that = '';
   elems.on("click", function () { 
             that = this;
             picker.show();
   });
   picker.on("change", function () {
       var col = $(this).val(); 
       elems.each(function(i, el){
                 if($(that).attr('class') == $(el).attr('class')) el.style.fill = col;
       });
       picker.hide();
   });
});
</script>
<input id="modal" type="color">

<svg width="700px" height="200px"> 
   <circle class = "ring" cx="50px" cy="50px" r="25px"   />
   <circle class = "ring" cx="150px" cy="70px" r="25px"  />
   <rect class = "square" x="70px" y="100px" width="50px" height="50px"  />
   <rect class = "square" x="170px" y="30px" width="50px" height="50px"  />
</svg>