Depends on which of the above layouts you are talking about.
With the last "Even Simpler" layout, the easiest way is to just assign a classname to each of the colors and add that classname to the desired box. Just be sure to delete the blanket color applied here:
and add it to the respective boxes in the following manner:
<div class="box1 green">
<div class="box1 yellow">
<div class="box1 magenta">
<div class="box2 cyan">
boxes, squares, rectangles, borders...
If you are actually talking about the individual rects (squares), the same principle apples, except to different elements. You might choose a better convention than using colornames as classnames, too. Numbering or lettering the boxes might be more semantically appropriate.