diff --git a/src/dat/gui/GUI.js b/src/dat/gui/GUI.js
index 2f6f2d3..60fde59 100644
--- a/src/dat/gui/GUI.js
+++ b/src/dat/gui/GUI.js
@@ -22,6 +22,8 @@ import NumberControllerSlider from '../controllers/NumberControllerSlider';
 import ColorController from '../controllers/ColorController';
 import BgColorController from '../controllers/BgColorController';
 import NgColorController from '../controllers/NgColorController';
+import HSVColorController from '../controllers/HSVColorController';
+import GtColorController from '../controllers/GtColorController';
 import requestAnimationFrame from '../utils/requestAnimationFrame';
 import CenteredDiv from '../dom/CenteredDiv';
 import dom from '../dom/dom';
@@ -536,6 +538,26 @@ common.extend(
         }
       );
     },
+    addGtColor: function(object, property) {
+      return addgt(
+        this,
+        object,
+        property,
+        {
+          color: true
+        }
+      );
+    },
+    addHSVColor: function(object, property) {
+      return addhsv(
+        this,
+        object,
+        property,
+        {
+          color: true
+        }
+      );
+    },
 
     /**
      * @param controller
@@ -968,6 +990,22 @@ function augmentController(gui, li, controller) {
       return val;
     }, controller.updateDisplay);
 
+    controller.updateDisplay();
+  } else if (controller instanceof HSVColorController) {
+    dom.addClass(li, 'color');
+    controller.updateDisplay = common.compose(function(val) {
+      li.style.borderLeftColor = controller.__color.toString();
+      return val;
+    }, controller.updateDisplay);
+
+    controller.updateDisplay();
+  } else if (controller instanceof GtColorController) {
+    dom.addClass(li, 'color');
+    controller.updateDisplay = common.compose(function(val) {
+      li.style.borderLeftColor = controller.__color.toString();
+      return val;
+    }, controller.updateDisplay);
+
     controller.updateDisplay();
   }
 
@@ -1128,6 +1166,100 @@ function addng(gui, object, property, params) {
 
   return controller;
 }
+function addgt(gui, object, property, params) {
+  if (object[property] === undefined) {
+    throw new Error(`Object "${object}" has no property "${property}"`);
+  }
+
+  let controller;
+
+  if (params.color) {
+    controller = new GtColorController(object, property);
+  } else {
+    const factoryArgs = [object, property].concat(params.factoryArgs);
+    controller = ControllerFactory.apply(gui, factoryArgs);
+  }
+
+  if (params.before instanceof Controller) {
+    params.before = params.before.__li;
+  }
+
+  recallSavedValue(gui, controller);
+
+  dom.addClass(controller.domElement, 'c');
+
+  const name = document.createElement('span');
+  dom.addClass(name, 'property-name');
+  name.innerHTML = controller.property;
+
+  const container = document.createElement('div');
+  container.appendChild(name);
+  container.appendChild(controller.domElement);
+
+  const li = addRow(gui, container, params.before);
+
+  dom.addClass(li, GUI.CLASS_CONTROLLER_ROW);
+  if (controller instanceof ColorController) {
+    dom.addClass(li, 'color');
+  } else if (controller instanceof NgColorController) {
+    dom.addClass(li, 'color');
+  } else {
+    dom.addClass(li, typeof controller.getValue());
+  }
+
+  augmentController(gui, li, controller);
+
+  gui.__controllers.push(controller);
+
+  return controller;
+}
+function addhsv(gui, object, property, params) {
+  if (object[property] === undefined) {
+    throw new Error(`Object "${object}" has no property "${property}"`);
+  }
+
+  let controller;
+
+  if (params.color) {
+    controller = new HSVColorController(object, property);
+  } else {
+    const factoryArgs = [object, property].concat(params.factoryArgs);
+    controller = ControllerFactory.apply(gui, factoryArgs);
+  }
+
+  if (params.before instanceof Controller) {
+    params.before = params.before.__li;
+  }
+
+  recallSavedValue(gui, controller);
+
+  dom.addClass(controller.domElement, 'c');
+
+  const name = document.createElement('span');
+  dom.addClass(name, 'property-name');
+  name.innerHTML = controller.property;
+
+  const container = document.createElement('div');
+  container.appendChild(name);
+  container.appendChild(controller.domElement);
+
+  const li = addRow(gui, container, params.before);
+
+  dom.addClass(li, GUI.CLASS_CONTROLLER_ROW);
+  if (controller instanceof ColorController) {
+    dom.addClass(li, 'color');
+  } else if (controller instanceof HSVColorController) {
+    dom.addClass(li, 'color');
+  } else {
+    dom.addClass(li, typeof controller.getValue());
+  }
+
+  augmentController(gui, li, controller);
+
+  gui.__controllers.push(controller);
+
+  return controller;
+}
 
 function add(gui, object, property, params) {
   if (object[property] === undefined) {