diff --git a/source/Ox.UI/js/Form/Ox.ColorInput.js b/source/Ox.UI/js/Form/Ox.ColorInput.js
index 7adf00e1..96594593 100644
--- a/source/Ox.UI/js/Form/Ox.ColorInput.js
+++ b/source/Ox.UI/js/Form/Ox.ColorInput.js
@@ -15,42 +15,44 @@ Ox.ColorInput = function(options, self) {
     self = Ox.extend(self || {}, {
             options: Ox.extend({
                 id: '',
-                value: '0, 0, 0'
+                mode: 'RGB',
+                value: options.mode == 'HSL' ? [0, 1, 0.5] : [0, 0, 0]
             }, options)
     });
     var that;
 
-    self.values = self.options.value.split(', ');
     self.$inputs = [];
-    ['red', 'green', 'blue'].forEach(function(v, i) {
+    Ox.loop(3, function(i) {
         self.$inputs[i] = Ox.Input({
-            id: v,
-            max: 255,
-            type: 'integer',
-            value: self.values[i],
-            width: 36
+            id: self.options.id + i,
+            max: self.options.mode == 'RGB' ? 255 : i == 0 ? 360 : 1,
+            type: self.options.mode == 'RGB' || i == 0 ? 'int' : 'float',
+            value: self.options.value[i],
+            width: 40
         })
         .bindEvent('autovalidate', change);
     });
     self.$inputs[3] = Ox.Label({
             id: 'color',
-            width: 36
+            width: 40
         })
         .css({
-            background: 'rgb(' + self.options.value + ')'
+            background: 'rgb(' + getRGB() + ')'
         });
     self.$inputs[4] = Ox.ColorPicker({
-            id: 'picker'
+            id: 'picker',
+            mode: self.options.mode
         })
-        .bindEvent('change', function(data) {
-            //Ox.Log('Form', 'change function called');
-            self.options.value = data.value;
-            self.values = data.value.split(', ');
-            Ox.range(3).forEach(function(i) {
-                self.$inputs[i].options({
-                    value: self.values[i]
+        .bindEvent({
+            change: function(data) {
+                //Ox.Log('Form', 'change function called');
+                self.options.value = data.value;
+                Ox.loop(3, function(i) {
+                    self.$inputs[i].options({
+                        value: self.options.value[i]
+                    });
                 });
-            });
+            }
         })
         .options({
             width: 16 // this is just a hack to make the InputGroup layout work
@@ -65,17 +67,25 @@ Ox.ColorInput = function(options, self) {
                 {title: '', width: 8},
                 {title: '', width: 8}
             ],
-            value: self.options.value // fixme: it'd be nicer if this would be taken care of by passing self
-        }, self)
+            value: self.options.value // fixme: it'd be nicer if this would be taken care of by passing self <-- but we're passing self!
+        })
         .bindEvent('change', change);
 
     function change() {
         self.options.value = self.$inputs.map(function(v) {
             return v.options('value');
-        }).join(', ');
-        self.$inputs[3].css({
-            background: 'rgb(' + self.options.value + ')'
         });
+        self.$inputs[3].css({
+            background: 'rgb(' + getRGB() + ')'
+        });
+    }
+
+    function getRGB() {
+        return self.options.mode == 'RGB'
+            ? self.options.value
+            : Ox.rgb(self.options.value).map(function(value) {
+                return Math.round(value);
+            });
     }
 
     return that;