La domanda e` relativa alla semantica dei tag.

Dierei che i tag piu` adatti sono le liste di definizione:
codice:
<dl>
  <dt>[img]col1.png[/img]</dt>
  <dd>descrizione del colore1</dd>
  <dt>[img]...[/img]</dt>
  <dd>descrizione del colore 2</dd>
  ...
</dl>
oppure:
codice:
 <dl>
  <dt class="col1"></dt>
  <dd>descrizione del colore</dd>
  <dt class="col2"></dt>
  <dd>descrizione del colore</dd>
  ...
</dl>

CSS:
dt.col1 { color: #...; }
dt.col12{ color: #...; }
Il primo caso e` piu` corretto dal punto di vista semantico (il colore fa parte del contenuto, non e` un elemento di abbellimento), il secondo e` leggermente piu` leggero (non devi scaricare le immagini).

Chiaramente l'esempio va integrato con le dimensioni delle immagini, con i float e i clear (sia float:left; che clear:left; a tutti i <dt>; float:left ai <dd>)