diff --git a/src/dat/color/Color.js b/src/dat/color/Color.js
index aeface0..ab63aca 100644
--- a/src/dat/color/Color.js
+++ b/src/dat/color/Color.js
@@ -31,6 +31,10 @@ class Color {
     return colorToString(this);
   }
 
+  toHexString() {
+    return colorToString(this, true);
+  }
+
   toOriginal() {
     return this.__state.conversion.write(this);
   }
diff --git a/src/dat/color/toString.js b/src/dat/color/toString.js
index ec87966..c2a85d8 100644
--- a/src/dat/color/toString.js
+++ b/src/dat/color/toString.js
@@ -11,16 +11,42 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-import common from '../utils/common';
+export default function(color, forceCSSHex) {
+  const colorFormat = color.__state.conversionName.toString();
 
-export default function(color) {
-  if (color.a === 1 || common.isUndefined(color.a)) {
-    let s = color.hex.toString(16);
-    while (s.length < 6) {
-      s = '0' + s;
+  const r = Math.round(color.r);
+  const g = Math.round(color.g);
+  const b = Math.round(color.b);
+  const a = color.a;
+  const h = Math.round(color.h);
+  const s = color.s.toFixed(1);
+  const v = color.v.toFixed(1);
+
+  if (forceCSSHex || (colorFormat === 'THREE_CHAR_HEX') || (colorFormat === 'SIX_CHAR_HEX')) {
+    let str = color.hex.toString(16);
+    while (str.length < 6) {
+      str = '0' + str;
     }
-    return '#' + s;
+    return '#' + str;
+  } else if (colorFormat === 'CSS_RGB') {
+    return 'rgb(' + r + ',' + g + ',' + b + ')';
+  } else if (colorFormat === 'CSS_RGBA') {
+    return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
+  } else if (colorFormat === 'HEX') {
+    return '0x' + color.hex.toString(16);
+  } else if (colorFormat === 'RGB_ARRAY') {
+    return '[' + r + ',' + g + ',' + b + ']';
+  } else if (colorFormat === 'RGBA_ARRAY') {
+    return '[' + r + ',' + g + ',' + b + ',' + a + ']';
+  } else if (colorFormat === 'RGB_OBJ') {
+    return '{r:' + r + ',g:' + g + ',b:' + b + '}';
+  } else if (colorFormat === 'RGBA_OBJ') {
+    return '{r:' + r + ',g:' + g + ',b:' + b + ',a:' + a + '}';
+  } else if (colorFormat === 'HSV_OBJ') {
+    return '{h:' + h + ',s:' + s + ',v:' + v + '}';
+  } else if (colorFormat === 'HSVA_OBJ') {
+    return '{h:' + h + ',s:' + s + ',v:' + v + ',a:' + a + '}';
   }
 
-  return 'rgba(' + Math.round(color.r) + ',' + Math.round(color.g) + ',' + Math.round(color.b) + ',' + color.a + ')';
+  return 'unknown format';
 }
diff --git a/src/dat/controllers/ColorController.js b/src/dat/controllers/ColorController.js
index 0f53f7f..649df8f 100644
--- a/src/dat/controllers/ColorController.js
+++ b/src/dat/controllers/ColorController.js
@@ -272,7 +272,7 @@ class ColorController extends Controller {
     common.extend(this.__field_knob.style, {
       marginLeft: 100 * this.__color.s - 7 + 'px',
       marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
-      backgroundColor: this.__temp.toString(),
+      backgroundColor: this.__temp.toHexString(),
       border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
     });
 
@@ -281,10 +281,12 @@ class ColorController extends Controller {
     this.__temp.s = 1;
     this.__temp.v = 1;
 
-    linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toString());
+    linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toHexString());
+
+    this.__input.value = this.__color.toString();
 
     common.extend(this.__input.style, {
-      backgroundColor: this.__input.value = this.__color.toString(),
+      backgroundColor: this.__color.toHexString(),
       color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
       textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
     });