diff --git a/colorer-b.js b/colorer-b.js
index 0e6096f..c3d1fcb 100644
--- a/colorer-b.js
+++ b/colorer-b.js
@@ -2,9 +2,45 @@ var transactionCache = {};
 var coinbaseHash = '0000000000000000000000000000000000000000000000000000000000000000';
 var defs = {};
 var transactionSpentCache = {};
+var colorSetHash = '';
 
 
 
+function loadDefs(names, colorSet) {
+    defs = {};
+    for(i=0;i<names.length;i++) {
+        addDef(names[i], colorSet[i]);
+    }
+}
+
+function addDef(name, colorDescriptor) {
+    [coloringScheme, transactionHash, outputIndex, height] = colorDescriptor.split(':');
+    defs[transactionHash] = {'colorDescriptor': colorDescriptor, 'name': name, 'unit': 1};
+    $('#colorDescriptors').append("<br />\n"+colorDescriptor);
+}
+
+function getColorSetFromServer(colorSetHash, callback) {
+    $.ajax({
+        url: "/get_color_set/" + colorSetHash,
+        dataType: "json"
+    }).done(function (data) {
+        loadDefs(data.names, data.color_set);
+        callback();
+    }).fail(function (jqXHR, textStatus, errorThrown) { alert('fail:' + jqXHR + ' ' + textStatus);});
+}
+
+function addColorSetToServer(callback) {
+    //the server fills in the heights and returns both the color_set and the color_set_hash.
+    $.ajax({
+        url: "/add_color_set/" + getColorSet() + '/' + getNames(),
+        dataType: "json"
+    }).done(function (data) {
+        colorSetHash = data.color_set_hash;
+        loadDefs(data.names, data.color_set);
+        callback();
+    }).fail(function (jqXHR, textStatus, errorThrown) { alert('fail:' + jqXHR + ' ' + textStatus);});
+}
+
 function getTransaction(transactionHash, callback) {
     var data = transactionCache[transactionHash];
     if (data)
@@ -300,6 +336,14 @@ function testAll() {
             "unit": 1
         }
     };
+    console.log(getColorSet() + '  /  ' + getNames());
+    addColorSetToServer(function () {
+        console.log(colorSetHash, '673b13966a0dc47bb71a7e270ec15f7df8addcf0166f492e08ae68c2275324ed');
+        console.log(getColorSet() + '  /  ' + getNames());
+    });
+    getColorSetFromServer('673b13966a0dc47bb71a7e270ec15f7df8addcf0166f492e08ae68c2275324ed', function() {
+        console.log(getColorSet() + '  /  ' + getNames());
+    });
 
     var i = 0;
     testNext();
@@ -399,12 +443,20 @@ function getColorDescriptor(coloringScheme, transactionHash, outputIndex, height
     return [coloringScheme, transactionHash, outputIndex, height].join(':');
 }
 
-function getColorDescriptors() {
+function getColorSet() {
+    var result = '';
+    for(key in defs) {
+        if(result !== '') result += ',';
+        result += defs[key].colorDescriptor;
+    }
+    return result;
+}
+
+function getNames() {
     var result = '';
     for(key in defs) {
-        if(result !== '') result += '&';
-        def = defs[key];
-        result += [def.name, def.colorDescriptor].join(',');
+        if(result !== '') result += ',';
+        result += defs[key].name;
     }
     return result;
 }
diff --git a/index.html b/index.html
index da275df..321178c 100644
--- a/index.html
+++ b/index.html
@@ -66,7 +66,7 @@
 <div class="input"><label>Output index:</label><input id='addOutputIndex' size='4' value='0' /></div>
 <button onClick="addColorUI()">add</button>
 
-<p><div class="box" id='colorDescriptions'>Colors</div></p>
+<p><div class="box" id='colorDescriptors'>Colors</div></p>
 
 </div>
 
@@ -90,35 +90,28 @@
 
     var coloringScheme = 'obc'; //allow the user to set this?
     var height = 0; //allow the user to set this?
-
-    addColor(name, getColorDescriptor(coloringScheme, transactionHash, outputIndex, height));
-    oldUrl = window.location.href.replace(/\?.*/, '');
-    window.location.href = oldUrl + '?' + getColorDescriptors();
-}
-function addColor(name, colorDescriptor) {
+    var colorDescriptor = getColorDescriptor(coloringScheme, transactionHash, outputIndex, height);
+    
     if(colorDescriptor.split(':').length != 4) {
         window.alert('incorrect color descriptor found');
     }
-    [coloringScheme, transactionHash, outputIndex, height] = colorDescriptor.split(':');
-    defs[transactionHash] = {'colorDescriptor': colorDescriptor, 'name': name, 'unit': 1};
-    $('#colorDescriptions').append("<br />\n"+colorDescriptor);
+    addDef(name, colorDescriptor);
+    $('#colorDescriptors').empty();
+    $('#colorDescriptors').append("Colors");
+    addColorSetToServer(function () {
+        oldUrl = window.location.href.replace(/\?.*/, '');
+        window.location.href = oldUrl + '?colorSetHash=' + colorSetHash;
+    });
 }
 function parseUrl() {
-    params=getUrlParams();
     var transactionHash;
-    for(param in params) {
-        if(param == 'goto') {
-            goTransaction(params[param]);
-            return;
-        }
-        [name, colorDescriptor] = param.split(',');
-        if(param.split(',').length != 2) {
-            window.alert('incorrect parameter found');
-        }
-        addColor(name, colorDescriptor);
+    params=getUrlParams();
+    if('colorSetHash' in params) {
+        getColorSetFromServer(params['colorSetHash'], function() {
+        });
     }
-    if(transactionHash !== undefined) {
-        goTransaction(transactionHash);
+    if('goto' in params) {
+        goTransaction(params['goto']);
     }
 }
 </script>