diff --git a/index.html b/index.html
index 809b2452fcd09061907759b9d464c0e2f38573f9..705392cdd7a38d53b215874d1c313f54c772d008 100644
--- a/index.html
+++ b/index.html
@@ -422,8 +422,8 @@
                     Colored Material
                 </label>
                 <div id="coloredMaterialOptions" class="indent">
-                    <label>Frontside Color (rgb hex): </label><input value="" placeholder="" class="form-control" type="text"><br/>
-                    <label>Backside Color (rgb hex): </label><input value="" placeholder="" class="form-control" type="text"><br/>
+                    <label>Color 1 (rgb hex): </label><input id="color1" value="" placeholder="" class="form-control" type="text"><br/>
+                    <label>Color 2 (rgb hex): </label><input id="color2" value="" placeholder="" class="form-control" type="text"><br/>
                 </div>
                 <label class="radio">
                     <input name="colorMode" value="normal" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
diff --git a/js/controls.js b/js/controls.js
index bc8a2ee01ac295cccb63ec689321e7947c5c64f2..29c66227dfe34432db3ceb14f74233b6f7a1ec65 100644
--- a/js/controls.js
+++ b/js/controls.js
@@ -77,6 +77,13 @@ function initControls(globals){
         globals.model.setMeshMaterial();
     });
 
+    setHexInput("#color1", globals.color1, function(val){
+        globals.color1 = val;
+    });
+    setHexInput("#color2", globals.color2, function(val){
+        globals.color2 = val;
+    });
+
     function setButtonGroup(id, callback){
         $(id+" a").click(function(e){
             e.preventDefault();
@@ -123,6 +130,16 @@ function initControls(globals){
         $input.val(val);
     }
 
+    function setHexInput(id, val, callback){
+        var $input = $(id);
+        $input.change(function(){
+            var val = $input.val();
+            $input.val(val);
+            callback(val);
+        });
+        $input.val(val);
+    }
+
     function setCheckbox(id, state, callback){
         var $input  = $(id);
         $input.on('change', function () {
diff --git a/js/globals.js b/js/globals.js
index 2501f69128471a708eaecf40a714290278d56ff0..be5f7c25726808f6a88810ae00a2d8faed428ad8 100644
--- a/js/globals.js
+++ b/js/globals.js
@@ -9,6 +9,8 @@ function initGlobals(){
 
         //view
         colorMode: "normal",
+        color1: "ec008b",
+        color2: "ffffff",
 
         //flags
         fixedHasChanged: false,
diff --git a/js/model.js b/js/model.js
index 42f49e04f5e48a1b5c6b7fd05f6b2c56292abef7..f2439f4043c135af9611c357502ef2a7f44ce419 100644
--- a/js/model.js
+++ b/js/model.js
@@ -15,6 +15,8 @@ function initModel(globals){
                 new THREE.MeshLambertMaterial({shading:THREE.FlatShading, color:0xff0000, side:THREE.FrontSide}),
                 new THREE.MeshLambertMaterial({shading:THREE.FlatShading, color:0x0000ff, side:THREE.FrontSide})
             ]);
+            material.materials[0].color.setStyle( "#" + globals.color1);
+            material.materials[1].color.setStyle( "#" + globals.color2);
         }
         if (object3D) object3D.material = material;
     }