Kleine Quadrate oder Rechtecke lassen sich einfach mit einer transparenten 1-Pixel-Grafik und CSS herstellen. Für jedes farbliche Rechteck wird ein Style festgelegt und der Grafik zugewiesen:
.rechteck1{background-color:#BF2323;border:1px solid black;}
<img width="6" height="6" border="0" src="trans.gif" class="rechteck1" />
Das Ergebnis sieht dann so aus:
Farbige Rechtecke