Si può fare in vari modi. Con jQuery sarebbe ancora più semplice.

Comunque puoi fare una cosa del genere (posto un esempio completo):
codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jscolor/jscolor.js"></script>
    <script type="text/javascript">
      function stampa(){
        var box = document.getElementById("box");
        var numero_colori = 10;
        for(i=1; i<=numero_colori; i++){
          var id = "colore"+i;
          var per ="percentuale"+i;
           box.insertAdjacentHTML("beforeend", "colore numero "+i+" : <input  class='color' id='"+id+"'><br><input type='text'  id='"+per+"' /><br>");
          new jscolor.color(document.getElementById(id));
        }
      }
    </script>
  </head>
  <body><input type=button value="Elabora" onclick="stampa()">
  <div id="box"></div>
  </body>
</html>
PS: quando posti sul forum, è meglio fornire possibilmente tutti i dettagli all'inizio.
PPS: quando posti del codice sul forum, è opportuno usare gli appositi tag di formattazione.