diff --git a/js/menus/CompositeMenu.js b/js/menus/CompositeMenu.js
index 2086b8f58d3c4c86c2cdc54e8adc3007d6593307..4cc18fdb62303c1592e334c821a03748dae79194 100644
--- a/js/menus/CompositeMenu.js
+++ b/js/menus/CompositeMenu.js
@@ -30,6 +30,11 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
             lattice._changeRandomColor();
         },
 
+        updateHex: function(hex){
+            //update hex without rendering
+            $("#compositeColor").css("border-color", hex);
+        },
+
         _finishComposite: function(e){
             e.preventDefault();
             this.stopListening();
@@ -76,7 +81,7 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
             Name: &nbsp;&nbsp;<input id="compositeName" data-property="compositeName" value="<%= compositeName %>" placeholder="Enter Name" class="seventyFiveWidth form-control textInput lattice" type="text"><br/><br/>\
             Bounding Box: ()<br/><br/>\
             Display Color: &nbsp;&nbsp;\
-            <input style="border-color: <%= compositeColor %> ;" value="<%= compositeColor %>" placeholder="Enter HEX" class="halfWidth form-control" type="text"><br/><br/>\
+            <input id="compositeColor" style="border-color: <%= compositeColor %> ;" data-property="compositeColor" value="<%= compositeColor %>" placeholder="Enter HEX" class="halfWidth lattice form-control hexInput" type="text"><br/><br/>\
             <a id="newRandomColor" href="#" class="btn btn-block btn-lg btn-default">New Random Color</a><br/><br/>\
             <a id="finishComposite" href="#" class="btn btn-block btn-lg btn-success">Finish Composite</a><br/>\
             <a id="cancelComposite" href="#" class="btn btn-halfWidth btn-lg btn-default">Cancel / Exit</a>\
diff --git a/js/menus/MenuParentView.js b/js/menus/MenuParentView.js
index 60f97965a31f9f028e51a0ce0c7abe57b9abd7a4..176ab925ed2f431670338c5d309fa43800ed0abb 100644
--- a/js/menus/MenuParentView.js
+++ b/js/menus/MenuParentView.js
@@ -20,6 +20,7 @@ define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
             if (this.model.changedAttributes()["currentNav"]) return;
             if ($("input[type=text]").is(":focus")) return;
             this.$el.html(this.template(this._makeTemplateJSON()));
+            this.$el.html(this.template(this._makeTemplateJSON()));
             if (this._render) this._render();
         },
 
diff --git a/js/menus/MenuWrapperView.js b/js/menus/MenuWrapperView.js
index 82d3b82eb100674bb51280c2ebb7edf45fa28c09..884d68d6ac52f2bf666c2d0d7bfe5246cad1fe13 100644
--- a/js/menus/MenuWrapperView.js
+++ b/js/menus/MenuWrapperView.js
@@ -44,7 +44,8 @@ define(['jquery', 'underscore', 'plist', 'backbone', 'lattice'], function($, _,
             }
             if ($(".floatInput").is(":focus")) this._updateFloat(e);
             if ($(".intInput").is(":focus")) this._updateInt(e);
-            if ($(".textInput").is(":focus")) this._updateString(e);
+            if ($(".textInput").is(":focus")) this._updateString(e)
+            if ($(".hexInput").is(":focus")) this._updateHex(e);
         },
 
         _updateString: function(e){
@@ -58,6 +59,24 @@ define(['jquery', 'underscore', 'plist', 'backbone', 'lattice'], function($, _,
             this._getPropertyOwner($target).set(property, $target.val());
         },
 
+        _updateHex: function(e){
+            e.preventDefault();
+            var $target = $(e.target);
+            var hex = $target.val();
+            if (!this._isValidHex(hex)) return;
+            var property = $target.data("property");
+            if (!property) {
+                console.warn("no property associated with string input");
+                return;
+            }
+            this._getPropertyOwner($target).set(property, hex);
+            if (this.menu.updateHex) this.menu.updateHex(hex);
+        },
+
+        _isValidHex: function(hex){
+            return hex.match(/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i) !== null;
+        },
+
         _updateFloat: function(e){
             e.preventDefault();
             var $target = $(e.target);