Coloring Css Shapes With Different Colors

I'm looking for a solution to color some css shapes (don't really want to use svg as in this example: http://bl.ocks.org/widged/4545199 , but the output would be pretty similar). W

Solution 1:

I don't know what is exactly your question, but I think that you are asking about to get the current color to pass through PHP, huh?

 function getCurrentColor() {
      var color = document.getElementById("box").style.backgroundColor;
      // you can now use AJAX or a form to pass this value to php

EDIT

OP was explained better in comment. You can:

 // add style to 3 boxes
 function button_click() {
     index = (index + 1) % colors.length;
     document.getElementById("box").style.backgroundColor = colors[index];
     document.getElementById("asd").style.backgroundColor = colors[index];
     document.getElementById("fgh").style.backgroundColor = colors[index];
 }


 // returns the current color of #box
 function getColor() {
        return document.getElementById("box").style.backgroundColor;
 }

 function whichIsColor(color) {
       // select all elements
       var els = document.getElementsByTagName("div");
       //iterate through them
       for(var i in els) {
            // if matches the color passed in argument:
            if(els[i].style.backgroundColor === color) {
               return els[i];
            }
       } 
 }

Good luck!