diff --git a/source/Ox.UI/js/Form/Ox.ColorPicker.js b/source/Ox.UI/js/Form/Ox.ColorPicker.js
index 3e473b12..18d3c041 100644
--- a/source/Ox.UI/js/Form/Ox.ColorPicker.js
+++ b/source/Ox.UI/js/Form/Ox.ColorPicker.js
@@ -18,36 +18,39 @@ Ox.ColorPicker = function(options, self) {
     var that = Ox.Element({}, self)
             .defaults({
                 id: '',
-                value: '0, 0, 0'
+                mode: 'RGB',
+                value: options.mode == 'HSL' ? [0, 1, 0.5] : [0, 0, 0]
             })
             .options(options || {});
 
     //Ox.Log('Form', self)
     self.$ranges = [];
-    self.rgb = ['red', 'green', 'blue'];
-    self.values = self.options.value.split(', ');
 
-    Ox.range(3).forEach(function(i) {
+    Ox.loop(3, function(i) {
         self.$ranges[i] = Ox.Range({
                 arrows: true,
-                id: self.options.id + Ox.toTitleCase(self.rgb[i]),
-                max: 255,
-                size: 328, // 256 + 16 + 40 + 16
+                id: self.options.id + i,
+                max: self.options.mode == 'RGB' ? 255 : i == 0 ? 359 : 1,
+                size: self.options.mode == 'RGB' ? 328 : 432, // 256|360 + 16 + 40 + 16
+                step: self.options.mode == 'RGB' || i == 0 ? 1 : 0.01,
                 thumbSize: 40,
                 thumbValue: true,
                 trackColors: getColors(i),
-                value: self.values[i]
+                value: self.options.value[i]
             })
             .css({
                 position: 'absolute',
                 top: (i * 15) + 'px'
             })
-            .bindEvent('change', function(data) {
-                change(i, data.value);
+            .bindEvent({
+                change: function(data) {
+                    change(i, data.value);
+                }
             })
             .appendTo(that);
         // fixme: make self.$ranges[i].children() work
         if (i == 0) {
+            // fixme: this should go into Ox.UI.css
             self.$ranges[i].$element.children('input.OxOverlapRight').css({
                 MozBorderRadius: 0,
                 WebkitBorderRadius: 0
@@ -67,17 +70,16 @@ Ox.ColorPicker = function(options, self) {
     that = Ox.Picker({
         element: that,
         elementHeight: 46,
-        elementWidth: 328,
+        elementWidth: self.options.mode == 'RGB' ? 328 : 432,
         id: self.options.id
     });
 
     function change(index, value) {
-        self.values[index] = value;
-        self.options.value = self.values.join(', ');
+        self.options.value[index] = value;
         that.$label.css({
-            background: 'rgb(' + self.options.value + ')'
+            background: 'rgb(' + getRGB(self.options.value).join(', ') + ')'
         });
-        Ox.range(3).forEach(function(i) {
+        Ox.loop(3, function(i) {
             if (i != index) {
                 self.$ranges[i].options({
                     trackColors: getColors(i)
@@ -90,14 +92,36 @@ Ox.ColorPicker = function(options, self) {
     }
 
     function getColors(index) {
-        return [
-            'rgb(' + Ox.range(3).map(function(v) {
-                return v == index ? 0 : self.values[v];
-            }).join(', ') + ')',
-            'rgb(' + Ox.range(3).map(function(v) {
-                return v == index ? 255 : self.values[v];
-            }).join(', ') + ')'
-        ];
+        return (
+            self.options.mode == 'RGB' ? [
+                Ox.range(3).map(function(i) {
+                    return i == index ? 0 : self.options.value[i];
+                }),
+                Ox.range(3).map(function(i) {
+                    return i == index ? 255 : self.options.value[i];
+                })
+            ]
+            : index == 0 ? Ox.range(7).map(function(i) {
+                return [i * 60, self.options.value[1], self.options.value[2]];
+            })
+            : Ox.range(3).map(function(i) {
+                return [
+                    self.options.value[0],
+                    index == 1 ? i / 2 : self.options.value[1],
+                    index == 2 ? i / 2 : self.options.value[2]
+                ];
+            })
+        ).map(function(values) {
+            return 'rgb(' + getRGB(values).join(', ') + ')';
+        });
+    }
+
+    function getRGB(values) {
+        return self.options.mode == 'RGB'
+            ? values
+            : Ox.rgb(values).map(function(value) {
+                return Math.round(value);
+            });
     }
 
     return that;